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

added dark gold animation on h1

Browse Source
This commit is contained in:
petruspistor
2025-08-21 06:07:20 +00:00
parent c482a91015
commit 779c77bf66
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/css/index.css
View File

@@ -1,44 +1,44 @@
/* Reset the default 8px body margin so the image can touch the edges */ /* Reset */
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; }
/* Optional base text */ /* Base */
body { body {
font-family: 'Iceland'; font-family: 'Iceland', sans-serif;
color: #BF8915; color: #BF8915; /* dark yellowish gold text color for body */
background: #1c1c1c; background: #1c1c1c; /* slate/charcoal background */
line-height: 1.5; line-height: 1.5;
} }
/* Full-bleed banner at the very top */ /* Full-bleed banner */
.site-header { .site-header {
position: relative; /* allows overlay title */ position: relative; /* allows overlay title */
margin: 0; margin: 0;
padding: 0; padding: 0;
/* line-height: 0; /* removes stray gap under inline images */ /* Do NOT set line-height:0 here or the H1 may vanish */
} }
.site-header img { .site-header img {
display: block; /* removes inline whitespace */ display: block; /* removes inline image gap */
width: 100%; /* full width */ width: 100%;
height: auto; /* keep aspect ratio */ height: auto;
} }
/* Overlay title on the banner (optional; keep if you like this look) */ /* Overlay title on the banner */
.site-title { .site-title {
line-height: 1; /* restore readable line height */ font-size: clamp(2rem, 4vw + 1rem, 6rem);
position: absolute; /* overlay on the banner */ line-height: 1;
position: absolute;
left: 50%; left: 50%;
bottom: 8%; bottom: 10%; /* nudge higher/lower as needed */
transform: translateX(-50%); transform: translateX(-50%);
margin: 0; margin: 0;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
/* animations */ /* start hidden; animate in and stay */
opacity: 1; opacity: 0;
animation: fadeSlideIn 2s ease-out forwards, goldShine 4s ease-in-out infinite; animation: fadeSlideIn 1.2s ease-out forwards, goldShine 4s ease-in-out infinite;
animation-delay: 0s, 2s; animation-delay: 0s, 1.2s;
/* gold shine */ /* gold shine */
background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b); background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
@@ -46,12 +46,21 @@ body {
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
-webkit-text-fill-color: transparent; /* extra safety for WebKit */ -webkit-text-fill-color: transparent;
text-shadow: 0 1px 2px rgba(0,0,0,.35); /* subtle contrast on light banner zones */
} }
/* Keyframes */
@keyframes fadeSlideIn {
0% { opacity: 0; transform: translate(-50%, -16px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes goldShine {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* Sticky nav under header */
/* Horizontal nav under header */
.site-nav { .site-nav {
position: sticky; position: sticky;
top: 0; top: 0;