emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wipe in <mark> waltuh

This commit is contained in:
Emilia Allison 2022-10-02 14:01:01 -04:00
parent ee64123194
commit 1882e1d156
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/cool-stuff/css-purgatory/waltuh/index.html
View File

@ -16,9 +16,9 @@
<section id="description" class="hr">
<h2>Description</h2>
<div class="container">
<mark class="waltuh-gradient">Waltuh</mark> is a stupid name for a theme.
Put your theme away.
It's collaborative too!</p>
<mark class="waltuh-gradient">Waltuh</mark>,
put your theme away.
It's collaborative!</p>
</div>
</section>
@ -49,17 +49,17 @@
<div class="container two-columns">
<div>
<p class="ff-serif fs-900">Heading 1</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:400</p>
</div>
<div>
<p class="ff-serif fs-800">Heading 2</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:300</p>
</div>
<div>
<p class="ff-serif fs-700">Heading 3</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:200</p>
</div>
<div>
@ -79,13 +79,13 @@
<div>
<p class="ff-sans fs-300">Text</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
</div>
<div>
<p class="ff-sans-cond fs-200">Subtext</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
</div>
</div>

8
src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss
View File

@ -254,6 +254,10 @@ footer {
background-position: 6em 0em;
}
}
@keyframes wipeIn {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.waltuh-gradient {
font-weight: 600;
@ -265,7 +269,9 @@ footer {
background-size: 30vmin 30vmin;
background-clip: text;
animation: waltuh-gradient-anim 12s linear infinite;
animation: waltuh-gradient-anim 12s linear infinite,
wipeIn 0.25s ease-in;
}
@keyframes overlay-breathe {