From c482a91015714ecdc4253e1be1db0d8b71d1dcde Mon Sep 17 00:00:00 2001 From: petruspistor Date: Thu, 21 Aug 2025 05:55:33 +0000 Subject: [PATCH] deleted avatar, modified header img as bkg, added animation on header h1 --- index.html | 9 ++-- resources/css/index.css | 114 ++++++++++++++++++---------------------- 2 files changed, 56 insertions(+), 67 deletions(-) diff --git a/index.html b/index.html index c8417b4..3ad649a 100755 --- a/index.html +++ b/index.html @@ -6,14 +6,13 @@ Peter the Baker - - + + + - -
- Portrait of Peter Baker + Portrait of Peter Baker

Peter Baker

diff --git a/resources/css/index.css b/resources/css/index.css index 3921665..70fa586 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,52 +1,62 @@ -/* Basic reset & layout */ +/* Reset the default 8px body margin so the image can touch the edges */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } + +/* Optional base text */ body { - font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; - color: #efefef; - background: #2c2c2c; + font-family: 'Iceland'; + color: #BF8915; + background: #1c1c1c; line-height: 1.5; } -/* Accessibility: visible focus */ -:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; } -.skip-link { - position: absolute; left: -9999px; top: -9999px; -} -.skip-link:focus { left: 1rem; top: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; } - -/* Header with centered image at the very top */ +/* Full-bleed banner at the very top */ .site-header { - display: grid; - place-items: center; - padding: 3rem 1rem 2rem; - gap: .5rem; - background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); -} -.site-header .avatar { - display: block; - border-radius: 50%; - border: 4px solid rgba(255,255,255,.15); - max-width: 40vw; /* keeps it reasonable on mobile */ - height: auto; -} -.site-title { - margin: .25rem 0 0; - font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); - letter-spacing: .5px; -} -.site-tagline { + position: relative; /* allows overlay title */ margin: 0; - color: #cfcfcf; - font-size: clamp(.95rem, .5vw + .8rem, 1.1rem); + padding: 0; +/* line-height: 0; /* removes stray gap under inline images */ } +.site-header img { + display: block; /* removes inline whitespace */ + width: 100%; /* full width */ + height: auto; /* keep aspect ratio */ +} + +/* Overlay title on the banner (optional; keep if you like this look) */ + +.site-title { + line-height: 1; /* restore readable line height */ + position: absolute; /* overlay on the banner */ + left: 50%; + bottom: 8%; + transform: translateX(-50%); + margin: 0; + text-align: center; + z-index: 1; + + /* animations */ + opacity: 1; + animation: fadeSlideIn 2s ease-out forwards, goldShine 4s ease-in-out infinite; + animation-delay: 0s, 2s; + + /* gold shine */ + background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b); + background-size: 200% auto; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; /* extra safety for WebKit */ +} + + /* Horizontal nav under header */ .site-nav { - position: sticky; /* optional: keeps it visible on scroll */ + position: sticky; top: 0; + background: rgba(20,20,20,.75); backdrop-filter: blur(6px); - background: rgba(20,20,20,.7); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); } @@ -57,38 +67,18 @@ body { display: flex; gap: 1rem; justify-content: center; - max-width: 900px; + max-width: 1000px; } .site-nav a { - display: inline-block; - padding: .5rem .75rem; - border-radius: .5rem; color: #efefef; text-decoration: none; + padding: .5rem .75rem; + border-radius: .5rem; } -.site-nav a:hover, -.site-nav a:focus-visible { +.site-nav a:hover, .site-nav a:focus-visible { background: rgba(255,255,255,.08); } -/* Content */ -.content { - max-width: 900px; - margin: 2rem auto; - padding: 0 1rem 3rem; -} -.content h2 { margin-top: 2rem; font-size: 1.35rem; } - -/* Footer */ -.site-footer { - border-top: 1px solid rgba(255,255,255,.07); - color: #bdbdbd; - padding: 1.5rem 1rem 3rem; - text-align: center; -} - -/* Responsive tweaks */ -@media (min-width: 768px) { - .site-header { padding: 4rem 1rem 2.25rem; } - .site-nav ul { gap: 1.25rem; } -} +/* 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; }