gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

typing teaser animation pinned

Browse source
This commit is contained in:
Ava Gaiety W 2025-06-02 00:10:32 -06:00
parent f84f99341b
commit 0220af6f3a
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/pinned.njk
View file

@ -2,9 +2,9 @@
<main class="max-w-7xl mx-auto px-2">
<div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
<div class="p-2 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
<h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading inline-block motion-safe:animate-fade">
{{ title | markdown | safe }}
<div class="pt-2 px-4 sm:pt-8 sm:px-8 sm:pb-4 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
<h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading flex flex-row gap-1 motion-safe:animate-fade">
<span>{{ title | markdown | safe }}</span><div class="typing"></div>
</h1>
<div class="mt-3 max-w-2xl">
{{ content | safe }}

22
styles.css
View file

@ -157,3 +157,25 @@ pre {
margin-bottom: 0;
}
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
.typing {
width: 0.4em;
height: .75em;
background: linear-gradient(to bottom right,
rgb(var(--ctp-peach)),
rgb(var(--ctp-mauve))
);
opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
.typing {
animation: blink-animation 1s steps(5, start) infinite;
}
}