From ed359ec0182398c266f1c8d447bdd2ef35c37345 Mon Sep 17 00:00:00 2001 From: petruspistor Date: Fri, 22 Aug 2025 00:54:40 +0000 Subject: [PATCH] Started over again from scratch, added Icon --- index.html | 42 +++++------------------------------ resources/css/index.css | 49 ++++++++++++++++++++++------------------- 2 files changed, 31 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index e4e5118..a96a0e1 100755 --- a/index.html +++ b/index.html @@ -1,47 +1,15 @@ - + + - - - - - - - - - - + + Peter Baker - - - - - - -
- -
- + diff --git a/resources/css/index.css b/resources/css/index.css index b1d8fb6..71e7133 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -83,49 +83,50 @@ height:auto } .site-title { -font-family:"Iceland",sans-serif; -font-size:clamp(2.4rem,6vw,6rem); -line-height:1; -margin:.75rem 0 0; -color: #FFD700; -text-align:center; -text-shadow:0 4px 12px rgba(0,0,0,.6); -opacity:0; -transform:translateY(calc(-1*var(--nav-h))) scale(.98); -animation:popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards, -underlineDelay 1ms linear 900ms forwards; +opacity: 1; +transform: none; } -.site-title::after{ - content:""; display:block; height:3px; width:0%; - margin:.6rem auto 0; - background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b); - border-radius:999px; - animation:underlineGrow 700ms ease-out 1200ms forwards; +/* Animate only when motion is allowed */ +@media (prefers-reduced-motion: no-preference) { + .site-title { + opacity: 0; + transform: translateY(calc(-1 * var(--nav-h))) scale(.98); + animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards; + } + .site-title::after { + content: ""; + display: block; + height: 3px; + width: 0; + margin: .6rem auto 0; + animation: underlineGrow 700ms ease-out 1200ms forwards; + } } - /* ===== Keyframes ===== */ @keyframes popFromNav { 0% { opacity:0; transform:translateY(calc(-1*var(--nav-h))) scale(.98) + } } + 60% { opacity:1; transform:translateY(-8px) scale(1.02) } + 100% { opacity:1; transform:translateY(0) scale(1) } -@keyframes underlineGrow{ -to -{ +@keyframes underlineGrow { +to { width:54% + } } - @keyframes underlineDelay{} /* just to offset ::after timing */ /* ===== Content container ===== */ @@ -141,6 +142,7 @@ padding:0 1rem @media (max-width:800px){ :root { --nav-h:56px + } } .site-title::after { height:2px @@ -163,5 +165,6 @@ width:60% animation:none !important; opacity:1 !important; transform:none !important + } } -} +