fix: service-grid repeat(3) fixed columns, clock weight/color explicit
service-grid: auto-fill was creating 6 columns at wide viewports (1920px+) putting all cards in one row. Changed to repeat(3,1fr) for always 3-column 2-row layout regardless of screen width. station.html clock: font-weight 300→400, explicit color:var(--text) to ensure visibility against dark background.
This commit is contained in:
parent
c2c70b35e5
commit
790bdd6a9b
|
|
@ -115,7 +115,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:12px;font-weight:600; }
|
.service-name { font-size:12px;font-weight:600; }
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
#status-dot.off { background:var(--text3);box-shadow:none; }
|
#status-dot.off { background:var(--text3);box-shadow:none; }
|
||||||
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.35} }
|
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.35} }
|
||||||
#clock-area { text-align:center; }
|
#clock-area { text-align:center; }
|
||||||
#clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:300;letter-spacing:-0.03em;line-height:1; }
|
#clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--text); }
|
||||||
#date { font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.06em; }
|
#date { font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.06em; }
|
||||||
#last-checked { text-align:right;font-size:11px;color:var(--text3); }
|
#last-checked { text-align:right;font-size:11px;color:var(--text3); }
|
||||||
|
|
||||||
|
|
@ -125,7 +125,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:13px;font-weight:500; }
|
.service-name { font-size:13px;font-weight:500; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue