mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Claude
a2f723ca2d
Phase 1 of the functional design plan. - Move the old site into legacy/, unchanged, for reference. It still builds from there until cutover. - Add packages/schema: the one definition of all 20 note types, with field titles and descriptions, note and vault checks, and JSON Schema export so later editing tools and the MCP server share it. - Add vault-kit: Obsidian templates generated from the schema, and the Site guide for 24.01_PersonalWebsite. - Add tools/migrate: turns the legacy JSON, collections, store data and page text into 545 Site folder notes and 84 images, and checks the result with the schema. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
95 lines
1.9 KiB
CSS
95 lines
1.9 KiB
CSS
/**
|
|
* animations.css
|
|
* ---------------------------------------------------------------------------
|
|
* Keyframes used by hero backgrounds, decorative motion, and ambient effects.
|
|
* All animations are disabled by the global prefers-reduced-motion rule in
|
|
* global.css, so they are safe to use freely.
|
|
*/
|
|
|
|
/* Slowly drift radial-gradient stops for the hero mesh background. */
|
|
@keyframes gradient-shift {
|
|
0% {
|
|
background-position:
|
|
0% 0%,
|
|
100% 0%,
|
|
50% 100%;
|
|
}
|
|
50% {
|
|
background-position:
|
|
100% 100%,
|
|
0% 100%,
|
|
50% 0%;
|
|
}
|
|
100% {
|
|
background-position:
|
|
0% 0%,
|
|
100% 0%,
|
|
50% 100%;
|
|
}
|
|
}
|
|
|
|
/* Soft vertical float for decorative shapes / icons. */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
/* Slow rotation for ambient rings. */
|
|
@keyframes spin-slow {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Pulsing glow for accent dots / status indicators. */
|
|
@keyframes pulse-glow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
/* Nav backdrop blur is handled via class toggle, but the entry of the nav uses
|
|
* a fade-down so it doesn't pop on first paint. */
|
|
@keyframes fade-down {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Utility classes bound to the keyframes above. */
|
|
.animate-gradient-shift {
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 18s var(--ease-in-out-soft, ease-in-out) infinite;
|
|
}
|
|
.animate-float {
|
|
animation: float 6s var(--ease-in-out-soft, ease-in-out) infinite;
|
|
}
|
|
.animate-spin-slow {
|
|
animation: spin-slow 40s linear infinite;
|
|
}
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 4s var(--ease-in-out-soft, ease-in-out) infinite;
|
|
}
|
|
.animate-fade-down {
|
|
animation: fade-down 0.5s var(--ease-out-soft, ease-out) both;
|
|
}
|