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%;
max-width: 1400px;
display: grid;
grid-template-columns: 250px 1fr 380px;
grid-template-columns: 320px 1fr 320px;
grid-template-rows: auto;
gap: 1.5rem;
align-items: start;
@ -1531,7 +1531,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
/* === RESPONSIVE === */
@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); }
.panels-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }

65
index.html
View file

@ -128,6 +128,26 @@
</div>
</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>
@ -202,39 +222,20 @@
</div>
</div>
<!-- Weather + Now Playing -->
<div class="panel hud-data-panel hud-row-panels">
<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>
<!-- Now Playing -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">NOW PLAYING</span>
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
</div>
<div class="hud-mini-panel">
<div class="panel-header">
<span class="panel-title">NOW PLAYING</span>
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
</div>
<div class="panel-content np-display">
<div class="np-track" id="npTrack">---</div>
<div class="np-artist" id="npArtist">---</div>
<div class="np-album" id="npAlbum">---</div>
<div class="np-visualiser">
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span>
</div>
<div class="panel-content np-display">
<div class="np-track" id="npTrack">---</div>
<div class="np-artist" id="npArtist">---</div>
<div class="np-album" id="npAlbum">---</div>
<div class="np-visualiser">
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span>
</div>
</div>
</div>