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
-
-
+
+
+
- Skip to content
-
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; }
+