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

Update index to re-flow flex items based on max-width

Browse source
This commit is contained in:
badblocks 2026-07-18 02:50:59 -07:00
parent dbc7cb105a
commit 5fdc947bcd
Signed by: badblocks
SSH key fingerprint: SHA256:hEcM6BP4hKm9F7WsomNuXSBpPn2BSDnFzPSl3y1NerQ
3 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -25,7 +25,7 @@
"@types/alpinejs": "^3.13.11", "@types/alpinejs": "^3.13.11",
"alpinejs": "^3.15.12", "alpinejs": "^3.15.12",
"android-sms-gateway": "^3.0.0", "android-sms-gateway": "^3.0.0",
"astro": "^7.0.7", "astro": "7.0.8",
"iconify-icon": "^3.0.2", "iconify-icon": "^3.0.2",
"ofetch": "^1.5.1", "ofetch": "^1.5.1",
"otplib": "12.0.1", "otplib": "12.0.1",

16
src/pages/index.astro
View file

@ -254,8 +254,11 @@ import Layout from "@layouts/BaseLayout.astro";
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.sided > div { @media (max-width: 768px) {
flex: auto; .sided {
text-align: center;
flex-direction: column;
}
} }
</style> </style>
<Fragment slot="main"> <Fragment slot="main">
@ -263,9 +266,9 @@ import Layout from "@layouts/BaseLayout.astro";
id="hero" id="hero"
x-data="{ x-data="{
themes: [ themes: [
{ value: 'winternight', label: 'Winternight' }, { value: 'winternight', label: 'Winternight Valley' },
{ value: 'sunnyvale-forest', label: 'SunnyVale' }, { value: 'sunnyvale-forest', label: 'Sunnyvale' },
{ value: 'city-destroyed', label: 'Apocalypse' }, { value: 'city-destroyed', label: 'Apocalyptia' },
], ],
index: 0, index: 0,
get theme() { return this.themes[this.index].value }, get theme() { return this.themes[this.index].value },
@ -276,7 +279,8 @@ import Layout from "@layouts/BaseLayout.astro";
<div> <div>
<h2>Hi, I'm badblocks!</h2> <h2>Hi, I'm badblocks!</h2>
<p>I ♥ building websites and making things!</p> <p>I ♥ building websites and making things!</p>
</div><div class="desktop"> </div>
<div class="desktop">
<div class="desktop-monitor"> <div class="desktop-monitor">
<div class="desktop-audio"></div> <div class="desktop-audio"></div>
<div class="desktop-screen" @click="next()"> <div class="desktop-screen" @click="next()">