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

Started over again from scratch, added Icon

Browse Source
This commit is contained in:
petruspistor
2025-08-22 00:54:40 +00:00
parent 1ee6b819b1
commit ed359ec018
2 changed files with 31 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
index.html
View File

@@ -1,47 +1,15 @@
<!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"> <html lang="en">
<head> <head>
<meta name="description" content="Deaf-led community builder & creator advocate. Projects, socials, and contact.">
<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
<link rel="icon" href="/resources/img/pp.jpg" type="image/jpeg"> <link rel="icon" href="/resources/img/pp.jpg" type="image/jpeg">
<meta name="color-scheme" content="dark light"> <meta charset="en">
<meta property="og:title" content="Petrus Pistor — Peter Baker"> <title>Peter Baker</title>
<meta property="og:description" content="Deaf-led community builder & creator advocate.">
<meta property="og:image" content="/resources/img/pb_16_9_under512kb.webp">
<!-- Your stylesheet MUST be inside the head, before <body> -->
<link rel="stylesheet" href="/resources/css/index.css">
</head> </head>
<body> <body>
<header class="site-header" role="banner">
<h1 class="site-title">Peter Baker</h1>
<picture>
<source srcset="/resources/img/pb_16_9_under512kb.webp" type="image/webp">
<img src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="1280" height="372" loading="eager" decoding="async">
</picture>
</header>
<nav class="site-nav" aria-label="Primary">
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#social">Social</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main id="main" class="content">
</main>
</body> </body>
</html> </html>

49
resources/css/index.css
View File

@@ -83,49 +83,50 @@ height:auto
} }
.site-title { .site-title {
font-family:"Iceland",sans-serif; opacity: 1;
font-size:clamp(2.4rem,6vw,6rem); transform: none;
line-height:1;
margin:.75rem 0 0;
color: #FFD700;
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;
} }
.site-title::after{ /* Animate only when motion is allowed */
content:""; display:block; height:3px; width:0%; @media (prefers-reduced-motion: no-preference) {
margin:.6rem auto 0; .site-title {
background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b); opacity: 0;
border-radius:999px; transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
animation:underlineGrow 700ms ease-out 1200ms forwards; animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards;
}
.site-title::after {
content: "";
display: block;
height: 3px;
width: 0;
margin: .6rem auto 0;
animation: underlineGrow 700ms ease-out 1200ms forwards;
}
} }
/* ===== Keyframes ===== */ /* ===== Keyframes ===== */
@keyframes popFromNav { @keyframes popFromNav {
0% { 0% {
opacity:0; opacity:0;
transform:translateY(calc(-1*var(--nav-h))) scale(.98) transform:translateY(calc(-1*var(--nav-h))) scale(.98)
}
} }
60% { 60% {
opacity:1; opacity:1;
transform:translateY(-8px) scale(1.02) transform:translateY(-8px) scale(1.02)
} }
100% { 100% {
opacity:1; opacity:1;
transform:translateY(0) scale(1) transform:translateY(0) scale(1)
} }
@keyframes underlineGrow{ @keyframes underlineGrow {
to to {
{
width:54% width:54%
}
} }
@keyframes underlineDelay{} /* just to offset ::after timing */ @keyframes underlineDelay{} /* just to offset ::after timing */
/* ===== Content container ===== */ /* ===== Content container ===== */
@@ -141,6 +142,7 @@ padding:0 1rem
@media (max-width:800px){ @media (max-width:800px){
:root { :root {
--nav-h:56px --nav-h:56px
}
} }
.site-title::after { .site-title::after {
height:2px height:2px
@@ -163,5 +165,6 @@ width:60%
animation:none !important; animation:none !important;
opacity:1 !important; opacity:1 !important;
transform:none !important transform:none !important
}
} }
}