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

components load

Browse Source
This commit is contained in:
samantha42
2026-05-30 16:49:18 +02:00
parent e005bba7d2
commit 0bff5f349a
5 changed files with 59 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/components/games.html
+33 -26
View File
@@ -1,26 +1,33 @@
<div class="flex justify-center flex-wrap gap-6 p-5">
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/minecraft.webp" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">Minecraft</p>
</div>
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/Tombraider.png" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">Rise of the Tomb Raider</p>
</div>
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/planetzoo.webp" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">Planet Zoo</p>
</div>
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/gtav.webp" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">GTA V</p>
</div>
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/factorio.jpg" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">Factorio</p>
</div>
<div class="flex flex-col items-center gap-2">
<img src="/static/gamesbanners/detroitbecomehuman.jpg" class="w-42 h-20 object-cover rounded-lg">
<p class="text-xs text-center">Detroit: Become Human</p>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Minecraft</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Planet Zoo</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">GTA V</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Factorio</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Detroit: Become Human</p>
</div>
</div>
static/components/themetoggle.html
+20
View File
@@ -0,0 +1,20 @@
<div class="row">
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
aria-label="Toggle day/night mode">
<div class="track day" id="track">
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="knob day" id="knob">
<div class="sun-rays" id="rays"></div>
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
</div>
</div>
</div>
static/index.html
+4 -51
View File
@@ -31,25 +31,8 @@
<div class="shell">
<aside>
<div class="row">
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
aria-label="Toggle day/night mode">
<div class="track day" id="track">
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="knob day" id="knob">
<div class="sun-rays" id="rays"></div>
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
</div>
</div>
<div hx-get="/static/components/themetoggle.html" hx-trigger="load" hx-swap="outerHTML">
<span class="spinner">Loading toggle...</span>
</div>
<div>
<p class="sidebar-label">navigate</p>
@@ -385,38 +368,8 @@
<h2>Games</h2>
</div>
<p class="exp-body" >Game i will play in my free time to wind down.</p>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Minecraft</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Planet Zoo</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">GTA V</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Factorio</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Detroit: Become Human</p>
</div>
<div hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML">
<span class="spinner">Loading stats…</span>
</div>
</div>
</section>
static/output.css
+1 -624
View File
File diff suppressed because one or more lines are too long
tailwind.sh
+1
View File
@@ -18,4 +18,5 @@ exec "./$BIN" --input static/input.css \
--config tailwind.config.js \
--content "./static/**/*.html" \
--output static/output.css \
--minify \
--watch