jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: move weather panel to left column, widen both columns to 320px equal

Browse source
This commit is contained in:
jae 2026-04-01 04:59:32 +00:00
parent 3c31a18cb9
commit 40486ee03f
2 changed files with 35 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -324,7 +324,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
width: 100%; width: 100%;
max-width: 1400px; max-width: 1400px;
display: grid; display: grid;
grid-template-columns: 250px 1fr 380px; grid-template-columns: 320px 1fr 320px;
grid-template-rows: auto; grid-template-rows: auto;
gap: 1.5rem; gap: 1.5rem;
align-items: start; align-items: start;
@ -1531,7 +1531,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
/* === RESPONSIVE === */ /* === RESPONSIVE === */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.hero-hud-grid { grid-template-columns: 200px 1fr 300px; gap: 1rem; max-width: 1000px; } .hero-hud-grid { grid-template-columns: 280px 1fr 280px; gap: 1rem; max-width: 1000px; }
.blog-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); }
.panels-grid { grid-template-columns: 1fr; } .panels-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; }

43
index.html
View file

@ -131,6 +131,26 @@
</div> </div>
</div> </div>
<!-- Weather Panel -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">WEATHER</span>
<span class="panel-status-dot status-green">● LIVE</span>
</div>
<div class="panel-content weather-display">
<div class="weather-main">
<span class="weather-temp" id="weatherTemp">--°C</span>
<span class="weather-cond" id="weatherCond">LOADING...</span>
</div>
<div class="weather-details">
<span class="weather-detail" id="weatherFeels">FEELS --°C</span>
<span class="weather-detail" id="weatherWind">-- KPH</span>
<span class="weather-detail" id="weatherHumidity">--% RH</span>
</div>
</div>
</div>
</div>
<!-- Middle Column: Identity --> <!-- Middle Column: Identity -->
<div class="hud-col-center"> <div class="hud-col-center">
<div class="hud-identity"> <div class="hud-identity">
@ -202,26 +222,8 @@
</div> </div>
</div> </div>
<!-- Weather + Now Playing --> <!-- Now Playing -->
<div class="panel hud-data-panel hud-row-panels"> <div class="panel hud-data-panel">
<div class="hud-mini-panel">
<div class="panel-header">
<span class="panel-title">WEATHER</span>
<span class="panel-status-dot status-green">● LIVE</span>
</div>
<div class="panel-content weather-display">
<div class="weather-main">
<span class="weather-temp" id="weatherTemp">--°C</span>
<span class="weather-cond" id="weatherCond">LOADING...</span>
</div>
<div class="weather-details">
<span class="weather-detail" id="weatherFeels">FEELS --°C</span>
<span class="weather-detail" id="weatherWind">-- KPH</span>
<span class="weather-detail" id="weatherHumidity">--% RH</span>
</div>
</div>
</div>
<div class="hud-mini-panel">
<div class="panel-header"> <div class="panel-header">
<span class="panel-title">NOW PLAYING</span> <span class="panel-title">NOW PLAYING</span>
<span class="panel-status-dot" id="npStatus">● STREAMING</span> <span class="panel-status-dot" id="npStatus">● STREAMING</span>
@ -237,7 +239,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Network Graph --> <!-- Network Graph -->