From f6d9b3848c759a88873265bdd0bb0d7006122240 Mon Sep 17 00:00:00 2001 From: petruspistor Date: Thu, 21 Aug 2025 07:30:19 +0000 Subject: [PATCH] changed h1 and nav into one, and messed up. --- resources/css/index.css | 212 ++++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 108 deletions(-) diff --git a/resources/css/index.css b/resources/css/index.css index f274211..03b7855 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,133 +1,129 @@ -/* Reset */ +/* ========== Base ========== */ +:root { + --nav-h: 64px; /* tweak nav height */ + --bg: #0e0e10; /* page background */ + --text: #eaeaea; /* body text color */ + --gold: #ffd700; /* title gold */ + --ring: rgba(255,255,255,.08); /* nav border */ +} + * { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } - -/* Base */ +html, body { margin:0; padding:0; } body { - font-family: 'Iceland', sans-serif; - color: #BF8915; /* dark yellowish gold text color for body */ - background: #1c1c1c; /* slate/charcoal background */ - line-height: 1.5; + background: var(--bg); + color: var(--text); + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } -/* Full-bleed banner */ -.site-header { - position: relative; /* allows overlay title */ - margin: 0; - padding: 0; -} -.site-header img { - display: block; /* removes inline image gap */ - width: 100%; - height: auto; -} - -/* Readability overlay for bright images (subtle) */ -.site-header::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%); - pointer-events: none; -} - -/* Overlay title on the banner (desktop defaults) */ -.site-title { - font-family: 'Iceland', sans-serif; - font-size: clamp(3rem, 6vw, 6rem); /* ~48px–96px */ - text-align: center; - color: #ffd700; /* gold */ - margin: 0; - text-shadow: 0 4px 12px rgba(0,0,0,0.6); /* elegant shadow for depth */ - - /* overlay positioning */ - position: absolute; - left: 35%; /* your desktop tweak */ - bottom: 3%; /* your desktop tweak */ - transform: translateX(-50%); - z-index: 1; - - /* fade-in animation */ - opacity: 0; - animation: fadeIn 1s ease-out forwards; -} - -/* Absolute-positioned slide uses combined translate */ -@keyframes fadeIn { - from { opacity: 0; transform: translate(-50%, -10px); } - to { opacity: 1; transform: translate(-50%, 0); } -} - -/* Sticky nav under header */ -.site-nav { +/* ========== Sticky Nav ========== */ +.topnav { position: sticky; top: 0; - background: rgba(20,20,20,.75); - backdrop-filter: blur(6px); - border-top: 1px solid rgba(255,255,255,.07); - border-bottom: 1px solid rgba(255,255,255,.07); -} -.site-nav ul { - margin: 0 auto; - padding: .5rem 1rem; - list-style: none; + z-index: 10; + height: var(--nav-h); display: flex; gap: 1rem; + align-items: center; justify-content: center; - max-width: 1000px; + padding: 0 1rem; + background: rgba(14,14,16,.7); + backdrop-filter: blur(6px); + border-bottom: 1px solid var(--ring); } -.site-nav a { - color: #efefef; +.topnav a { + font-family: 'Iceland', sans-serif; text-decoration: none; - padding: .5rem .75rem; + color: #ddd; + padding: .35rem .6rem; border-radius: .5rem; } -.site-nav a:hover, .site-nav a:focus-visible { +.topnav a:hover, .topnav a:focus-visible { background: rgba(255,255,255,.08); } -/* Content + footer */ -.content { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 3rem; } -.site-footer { text-align: center; color: #bdbdbd; padding: 1.5rem 1rem 3rem; } - -/* ---------------------------- */ -/* Responsive title adjustments */ -/* ---------------------------- */ - -/* Tablet */ -@media (max-width: 1024px) { - .site-title { - left: 50%; /* center on tablet */ - bottom: 8%; - font-size: clamp(2.5rem, 6vw, 5rem); - } +/* ========== Hero Title (pop from nav) ========== */ +.hero { + position: relative; + padding-top: calc(var(--nav-h) + 2.5rem); /* space for the title */ + padding-bottom: 2.5rem; + text-align: center; + /* Optional hero background image: + background: url("/resources/img/pb.png") center/cover no-repeat; */ } -/* Mobile */ -@media (max-width: 640px) { - .site-title { - left: 50%; /* center on mobile */ - bottom: 12%; /* lift it for safe spacing */ - font-size: clamp(2rem, 8vw, 3.25rem); - line-height: 1.05; - padding: 0 .25rem; /* avoid edge clipping */ - } +/* The title animates UP from the nav area and settles above it */ +.pop-title { + font-family: 'Iceland', sans-serif; + font-size: clamp(2.4rem, 6vw, 6rem); + line-height: 1; + margin: 0; + color: var(--gold); + text-shadow: 0 4px 12px rgba(0,0,0,.6); - /* Optional: ensure banner has enough vertical room on short screens */ - .site-header { - min-height: 40vh; - } + /* Start as if hidden behind the nav, then pop up */ + opacity: 0; + transform: translateY(calc(-1 * var(--nav-h))) scale(.98); + animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards, + settleGlow 2400ms ease-out 900ms both; } -/* Very small phones */ -@media (max-width: 380px) { - .site-title { - bottom: 14%; - font-size: clamp(1.8rem, 9vw, 2.8rem); - } +/* subtle underline that grows in after the pop (classy accent) */ +.pop-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 600ms forwards; } -/* Respect reduced motion preferences */ +/* ========== Keyframes ========== */ +@keyframes popFromNav { + 0% { opacity: 0; transform: translateY(calc(-1 * var(--nav-h))) scale(.98); } + 60% { opacity: 1; transform: translateY(-8px) scale(1.02); } /* overshoot */ + 100% { opacity: 1; transform: translateY(0) scale(1); } +} + +@keyframes underlineGrow { + to { width: 54%; } +} + +/* very subtle radiance after settling (no cheesy shimmer loop) */ +@keyframes settleGlow { + 0% { text-shadow: 0 4px 12px rgba(0,0,0,.6); } + 50% { text-shadow: 0 6px 18px rgba(0,0,0,.7); } + 100% { text-shadow: 0 4px 12px rgba(0,0,0,.6); } +} + +/* ========== Content container ========== */ +.content { + max-width: 1000px; + margin: 2rem auto 4rem; + padding: 0 1rem; +} + +/* ========== Responsive tweaks ========== */ +@media (max-width: 800px) { + :root { --nav-h: 56px; } + .pop-title::after { height: 2px; } +} + +@media (max-width: 480px) { + :root { --nav-h: 52px; } + .hero { padding-top: calc(var(--nav-h) + 2rem); } + .pop-title { font-size: clamp(2rem, 9vw, 3.2rem); } + .pop-title::after { width: 60%; } +} + +/* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { - .site-title { animation: none; opacity: 1; transform: translate(-50%, 0); } + .pop-title, + .pop-title::after { + animation: none !important; + opacity: 1 !important; + transform: none !important; + width: 54%; + } }