feat: typewriter-эффект в логотипе dedinit() — темы блога в скобках
- layouts/partials/extend_footer.html: инлайн-скрипт (печать/пауза/стирание/мигание, prefers-reduced-motion, слова из [params.typewriter]) - assets/css/extended/typewriter.css: блочный мигающий курсор - hugo.toml: [params.typewriter] words - openspec/changes/header-typewriter: proposal/design/specs/tasks Без зависимостей (Alpine не нужен), тема не модифицируется.
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
/* dedinit() typewriter — animated blog topics inside the logo parens.
|
||||
Progressive enhancement: pure CSS cursor blink, JS only drives the text. */
|
||||
|
||||
#dedinit-typewriter {
|
||||
display: inline-block;
|
||||
white-space: nowrap; /* never wrap the typed word */
|
||||
min-width: 0.5ch; /* keeps parens from collapsing when empty */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#dedinit-typewriter .tw-cursor {
|
||||
display: inline-block;
|
||||
width: 0.55ch;
|
||||
height: 1.05em;
|
||||
margin-inline-start: 0.15ch;
|
||||
background: currentColor; /* follows light/dark text color */
|
||||
vertical-align: -0.12em;
|
||||
animation: tw-blink 1s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes tw-blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#dedinit-typewriter .tw-cursor {
|
||||
animation: none; /* static cursor, no blink */
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user