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>