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

deleted h1, and pops-title shows up in the sectionunder nav

Browse Source
This commit is contained in:
petruspistor
2025-08-21 18:54:29 +00:00
parent f41fdf6606
commit 5200e5f421
2 changed files with 22 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@@ -1,19 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Peter the Baker</title>
<title>Peter Baker</title>
<!-- Optional: system fonts for speed; swap later if you like -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/resources/css/index.css" />
</head>
<body>
<header class="site-header">
<img src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="1280" height="372"/>
<h1 class="site-title">Peter Baker</h1>
</header>
<nav class="site-nav" aria-label="Primary">
@@ -24,15 +22,13 @@
</ul>
</nav>
<main id="main" class="content">
<!-- Hero title that pops up from the top of nav -->
<section class="hero">
<h1 class="pop-title">Peter&nbsp;Baker</h1>
</section>
<main class="content" id="main">
<!-- your sections -->
</main>
<footer class="site-footer">
<small>© <span id="year"></span> Peter Baker</small>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>

30
resources/css/index.css
View File

@@ -51,18 +51,6 @@ body {
background: rgba(255,255,255,.08);
}
/* ========== Header + Banner ========== */
.site-header {
position: relative;
margin: 0;
padding: 0;
}
.site-header img {
display: block;
width: 100%;
height: auto;
}
/* ========== Title (pops from nav) ========== */
.site-title {
font-family: 'Iceland', sans-serif;
@@ -82,24 +70,6 @@ body {
underlineIn 700ms ease-out 650ms forwards;
}
.site-title::after {
content: "";
display: block;
height: 3px;
width: 0%;
margin: .55rem auto 0;
background: var(--gold);
border-radius: 999px;
}
/* ========== Keyframes ========== */
@keyframes popFromNav {
0% { opacity: 0; transform: translate(-50%, calc(var(--nav-h) * .6)); }
60% { opacity: 1; transform: translate(-50%, -8px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes underlineIn { to { width: 56%; } }
/* ========== Content + Footer ========== */
.content {
max-width: 1000px;