components load
This commit is contained in:
samantha42
@@ -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>
|
||||
@@ -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>
|
||||
+4
-51
@@ -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>
|
||||
|
||||
+1
-624
File diff suppressed because one or more lines are too long
@@ -18,4 +18,5 @@ exec "./$BIN" --input static/input.css \
|
||||
--config tailwind.config.js \
|
||||
--content "./static/**/*.html" \
|
||||
--output static/output.css \
|
||||
--minify \
|
||||
--watch
|
||||
Reference in New Issue
Block a user