samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new html design

Browse Source
This commit is contained in:
samantha42
2026-05-19 22:11:44 +02:00
parent 4569f35d11
commit 393f6de5b6
8 changed files with 100 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/about.html
+47 -44
View File
@@ -6,7 +6,7 @@
<title>Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles2.css" />
<link rel="stylesheet" href="/static/styles2.css" />
</head>
<body>
@@ -149,56 +149,59 @@
<div class="section-head"><h2>Movie/Show Top list</h2></div>
<div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')">
Top 5 Movies <span class="toplist-toggle-icon">▾</span>
</button>
<h3>Top 5 Movies</h3>
<div class="toplist-body">
<ol class="toplist-ranked">
<li>
Blade Runner 2049
<img src="/static/posters/bladerunner2049.jpg">
</li>
<li>A Cure of Wellness
<img src="/static/posters/AcureForWellness.jpg">
</li>
<li>Fight Club
<img src="/static/posters/Fightclub.jpg">
</li>
<li>Dracula: A Love Tale
<img src="/static/posters/Dracula.webp">
</li>
<li>Girl with a Dragon Tattoo
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp">
</li>
</ol>
<div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<p>Blade Runner 2049</p>
</div>
<div class="poster-item">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
<div class="poster-item">
<img src="/static/posters/Fightclub.jpg" alt="Fight Club">
<p>Fight Club</p>
</div>
<div class="poster-item">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
<p>Dracula: A Love Tale</p>
</div>
<div class="poster-item">
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
<p>Girl with a Dragon Tattoo</p>
</div>
</div>
</div>
<div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')">
Top 5 Shows <span class="toplist-toggle-icon">▾</span>
</button>
<div class="toplist-body">
<ol class="toplist-ranked">
<li>Chernobyl
<img src="/static/posters/Chernobyl.webp">
</li>
<li>Succession
<img src="/static/posters/Succession.webp">
</li>
<li>Breaking Bad
<img src="/static/posters/Breaking Bad.webp">
</li>
<li>Avatar: The Last Airbender
<img src="/static/posters/Avatar.webp">
</li>
<li>Adolescence
<img src="/static/posters/Adolescence.webp">
</li>
</ol>
<h3>Top 5 Shows</h3>
<div class="toplist-body">
<div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
<p>Chernobyl</p>
</div>
<div class="poster-item">
<img src="/static/posters/Succession.webp" alt="Succession">
<p>Succession</p>
</div>
<div class="poster-item">
<img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
<p>Breaking Bad</p>
</div>
<div class="poster-item">
<img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
<p>Avatar: The Last Airbender</p>
</div>
<div class="poster-item">
<img src="/static/posters/Adolescence.webp" alt="Adolescence">
<p>Adolescence</p>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
static/cinema.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="container--narrow">
static/cyber.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="container--narrow">
static/engine.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>FP&amp;A Budgeting Engine — Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Libre+Caslon+Text:wght@400;700;800&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/static/styles.css" />
<style>
/* ── Page-specific layout ── */
header { padding: 2.4rem 0 2rem; }
static/finance.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="container--narrow">
static/infra.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/static/styles.css"/>
</head>
<body>
<div class="container">
static/styles2.css
+35 -21
View File
@@ -247,27 +247,6 @@ footer{
}
.toplist-group{
display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.2rem 1.4rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.toplist-body { display: none; }
.collapsed .toplist-body { display: block; }
.collapsed .toplist-toggle-icon { transform: rotate(-90deg); }
.toplist-toggle-icon { display: inline-block; transition: transform 0.2s; }
.toplist-ranked {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.toplist-ranked li {
display: flex;
align-items: center;
@@ -294,4 +273,39 @@ footer{
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.toplist-toggle {
display: block;
width: 100%;
text-align: center;
}
.poster-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.poster-item {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
}
.poster-item img {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 6px;
}
.poster-item p {
margin-top: 8px;
font-size: 12px;
text-align: center;
line-height: 1.4;
}