petruspistor/petruspistor.com
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed h1 and nav, h1 pops up from nav but tweak little

Browse Source
This commit is contained in:
petruspistor
2025-08-21 07:49:05 +00:00
parent f6d9b3848c
commit f41fdf6606
1 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
resources/css/index.css
View File

@@ -8,7 +8,8 @@
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { margin:0; padding:0; } html, body { margin: 0; padding: 0; }
body { body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
@@ -16,10 +17,10 @@ body {
} }
/* ========== Sticky Nav ========== */ /* ========== Sticky Nav ========== */
.topnav { .site-nav {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 20;
height: var(--nav-h); height: var(--nav-h);
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@@ -30,29 +31,40 @@ body {
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ring); border-bottom: 1px solid var(--ring);
} }
.topnav a { .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; font-family: 'Iceland', sans-serif;
text-decoration: none; text-decoration: none;
color: #ddd; color: #ddd;
padding: .35rem .6rem; padding: .35rem .6rem;
border-radius: .5rem; border-radius: .5rem;
} }
.topnav a:hover, .topnav a:focus-visible { .site-nav a:hover,
.site-nav a:focus-visible {
background: rgba(255,255,255,.08); background: rgba(255,255,255,.08);
} }
/* ========== Hero Title (pop from nav) ========== */ /* ========== Header + Banner ========== */
.hero { .site-header {
position: relative; position: relative;
padding-top: calc(var(--nav-h) + 2.5rem); /* space for the title */ margin: 0;
padding-bottom: 2.5rem; padding: 0;
text-align: center; }
/* Optional hero background image: .site-header img {
background: url("/resources/img/pb.png") center/cover no-repeat; */ display: block;
width: 100%;
height: auto;
} }
/* The title animates UP from the nav area and settles above it */ /* ========== Title (pops from nav) ========== */
.pop-title { .site-title {
font-family: 'Iceland', sans-serif; font-family: 'Iceland', sans-serif;
font-size: clamp(2.4rem, 6vw, 6rem); font-size: clamp(2.4rem, 6vw, 6rem);
line-height: 1; line-height: 1;
@@ -60,70 +72,62 @@ body {
color: var(--gold); color: var(--gold);
text-shadow: 0 4px 12px rgba(0,0,0,.6); text-shadow: 0 4px 12px rgba(0,0,0,.6);
/* Start as if hidden behind the nav, then pop up */ position: absolute;
left: 50%;
bottom: calc(var(--nav-h) * 0.15);
transform: translate(-50%, 0);
opacity: 0; opacity: 0;
transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards, animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
settleGlow 2400ms ease-out 900ms both; underlineIn 700ms ease-out 650ms forwards;
} }
/* subtle underline that grows in after the pop (classy accent) */ .site-title::after {
.pop-title::after {
content: ""; content: "";
display: block; display: block;
height: 3px; height: 3px;
width: 0%; width: 0%;
margin: .6rem auto 0; margin: .55rem auto 0;
background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b); background: var(--gold);
border-radius: 999px; border-radius: 999px;
animation: underlineGrow 700ms ease-out 600ms forwards;
} }
/* ========== Keyframes ========== */ /* ========== Keyframes ========== */
@keyframes popFromNav { @keyframes popFromNav {
0% { opacity: 0; transform: translateY(calc(-1 * var(--nav-h))) scale(.98); } 0% { opacity: 0; transform: translate(-50%, calc(var(--nav-h) * .6)); }
60% { opacity: 1; transform: translateY(-8px) scale(1.02); } /* overshoot */ 60% { opacity: 1; transform: translate(-50%, -8px); }
100% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translate(-50%, 0); }
} }
@keyframes underlineIn { to { width: 56%; } }
@keyframes underlineGrow { /* ========== Content + Footer ========== */
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 { .content {
max-width: 1000px; max-width: 1000px;
margin: 2rem auto 4rem; margin: 2rem auto 4rem;
padding: 0 1rem; padding: 0 1rem;
} }
.site-footer {
text-align: center;
color: #bdbdbd;
padding: 1.5rem 1rem 3rem;
}
/* ========== Responsive tweaks ========== */ /* ========== Responsive Tweaks ========== */
@media (max-width: 800px) { @media (max-width: 800px) {
:root { --nav-h: 56px; } :root { --nav-h: 56px; }
.pop-title::after { height: 2px; } .site-title::after { height: 2px; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
:root { --nav-h: 52px; } :root { --nav-h: 52px; }
.hero { padding-top: calc(var(--nav-h) + 2rem); } .site-title { font-size: clamp(2rem, 9vw, 3.2rem); }
.pop-title { font-size: clamp(2rem, 9vw, 3.2rem); } .site-title::after { width: 60%; }
.pop-title::after { width: 60%; }
} }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.pop-title, .site-title,
.pop-title::after { .site-title::after {
animation: none !important; animation: none !important;
opacity: 1 !important; opacity: 1 !important;
transform: none !important; transform: translate(-50%, 0) !important;
width: 54%; width: 56%;
} }
} }