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:
2026-09-19 17:42:59 +00:00
parent a0b3749a1b
commit 2af0530f8a
7 changed files with 338 additions and 0 deletions
+30
View File
@@ -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;
}
}