diff --git a/index.html b/index.html index 0502790..19e0594 100755 --- a/index.html +++ b/index.html @@ -1,20 +1,28 @@ - - - Peter Baker + + + + + + - - - + + + -
- Portrait of Peter Baker + + - - -
-

Peter Baker

+
+
+

Social

+
-
- -
+
+

Projects

+ +
+ +
+

Contact

+ +
+
diff --git a/resources/css/index.css b/resources/css/index.css index fb407b9..f32d265 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,103 +1,84 @@ -/* ========== 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 */ -} - +/* style.css (minimal baseline) */ +:root { --bg:#0e0e10; --text:#eaeaea; --accent:#ffd700; } * { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } - +html, body { margin:0; padding:0; } body { background: var(--bg); color: var(--text); - font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Iceland", sans-serif; + line-height: 1.5; +} +header { text-align:center; padding:2rem 1rem; } +h1, h3 { font-family: "Iceland", sans-serif; letter-spacing:.5px; } +nav ul { list-style:none; display:flex; gap:1rem; justify-content:center; padding:0; margin:0 0 2rem; } +nav a, nav li { text-decoration:none; color:#ddd; padding:.4rem .6rem; border-radius:.5rem; } +nav a:hover, nav li:hover { background:rgba(255,255,255,.08); } +main { max-width: 900px; margin: 0 auto; padding: 0 1rem 3rem; } + +/* Normalize nav list look */ +.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; justify-content: center; } -/* ========== Sticky Nav ========== */ -.site-nav { - position: sticky; - top: 0; - z-index: 20; - height: var(--nav-h); - display: flex; - gap: 1rem; - align-items: center; - justify-content: center; - padding: 0 1rem; - background: rgba(14,14,16,.7); - backdrop-filter: blur(6px); - border-bottom: 1px solid var(--ring); -} -.site-nav ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - gap: 1rem; - align-items: center; -} -.site-nav a { - font-family: 'Iceland', sans-serif; - text-decoration: none; - color: #ddd; - padding: .35rem .6rem; - border-radius: .5rem; -} -.site-nav a:hover, -.site-nav a:focus-visible { - background: rgba(255,255,255,.08); +.site-nav a { text-decoration: none; } -/* ========== Title (pops from nav) ========== */ -.site-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); - - position: absolute; - left: 50%; - bottom: calc(var(--nav-h) * 0.15); - transform: translate(-50%, 0); - - opacity: 0; - animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards, - underlineIn 700ms ease-out 650ms forwards; +.site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } -/* ========== Content + Footer ========== */ -.content { - max-width: 1000px; - margin: 2rem auto 4rem; - padding: 0 1rem; +/* Skip link utility */ +.skip-link { + position: absolute; left: -9999px; top: 0; } -.site-footer { - text-align: center; - color: #bdbdbd; - padding: 1.5rem 1rem 3rem; +.skip-link:focus { + left: 1rem; top: 1rem; z-index: 1000; + background: #000; color: #fff; padding: .5rem .75rem; border-radius: .5rem; } -/* ========== Responsive Tweaks ========== */ -@media (max-width: 800px) { - :root { --nav-h: 56px; } - .site-title::after { height: 2px; } +/* ===== Header & title (pop from nav) ===== */ +.site-header img{display:block;width:100%;height:auto } -@media (max-width: 480px) { - :root { --nav-h: 52px; } - .site-title { font-size: clamp(2rem, 9vw, 3.2rem); } - .site-title::after { width: 60%; } +.site-title{ + font-family:"Iceland",sans-serif; + font-size:clamp(2.4rem,6vw,6rem); + line-height:1; margin:.75rem 0 0; + color:var(--gold); 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; } -@media (prefers-reduced-motion: reduce) { - .site-title, - .site-title::after { - animation: none !important; - opacity: 1 !important; - transform: translate(-50%, 0) !important; - width: 56%; - } +.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; +} + +/* ===== 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{width:54%}} +@keyframes underlineDelay{} /* just to offset ::after timing */ + +/* ===== Content container ===== */ +.content{max-width:1000px; margin:2rem auto 4rem; padding:0 1rem} + +/* ===== Responsive ===== */ +@media (max-width:800px){ + :root{--nav-h:56px} + .site-title::after{height:2px} +} +@media (max-width:480px){ + :root{--nav-h:52px} + .site-title{font-size:clamp(2rem,9vw,3.2rem)} + .site-title::after{width:60%} +} + +/* Respect reduced motion */ +@media (prefers-reduced-motion:reduce){ + .site-title,.site-title::after{animation:none !important; opacity:1 !important; transform:none !important} }