ember/continuwuity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Wiggly logo in hero

Browse source
This commit is contained in:
Jade Ellis 2024-08-27 20:41:40 +01:00
parent fb7790cf56
commit 251ae82bba
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
1 changed files with 58 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
packages/website/src/lib/Hero.svelte
View file

@ -1,17 +1,44 @@
<script lang="ts">
import url from "./logo.svg?url";
import { SITE_URL } from "$lib/metadata";
let logo: HTMLDivElement;
let wiggleCount = 0;
function wiggle() {
wiggleCount++;
logo.style.animationPlayState = "running";
}
function wiggleIteration() {
wiggleCount--;
if (wiggleCount === 0) {
logo.style.animationPlayState = "paused";
}
}
</script>
<div class="hero card edge h-card">
<div class="logo">
<a href={SITE_URL} class="u-url u-uid" rel="me"><img class="u-photo" src={url} alt="Logo" /></a>
<div
class="logo"
on:click={wiggle}
on:animationiteration={wiggleIteration}
bind:this={logo}
>
<a href={SITE_URL} class="u-url u-uid" rel="me"
><img class="u-photo" src={url} alt="Logo" /></a
>
</div>
<div class="content">
<div>
<h1 class="title p-name"><span class="p-given-name">Jade</span> <span class="p-family-name">Ellis</span></h1>
<div role="doc-subtitle"><span class="p-nickname">JadedBlueEyes</span></div></div>
<div class="description p-note">Student, Computer Scientist and Creative</div>
<h1 class="title p-name">
<span class="p-given-name">Jade</span>
<span class="p-family-name">Ellis</span>
</h1>
<div role="doc-subtitle">
<span class="p-nickname">JadedBlueEyes</span>
</div>
</div>
<div class="description p-note">
Student, Computer Scientist and Creative
</div>
</div>
</div>
@ -24,7 +51,7 @@
gap: var(--spacing);
margin: 48px auto;
max-width: 320px;
padding: 3rem .5rem;
padding: 3rem 0.5rem;
}
.logo {
@ -44,7 +71,7 @@
font-size: 32px;
margin: 0;
}
[role="doc-subtitle"] {
[role="doc-subtitle"] {
padding-block-start: 0;
font-size: 18px;
font-weight: 600;
@ -67,4 +94,28 @@
text-align: left;
}
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.logo {
animation-name: wiggle;
animation-duration: 0.2s;
/* animation-iteration-count: 1; */
animation-iteration-count: infinite;
animation-play-state: paused;
}
</style>