From 04b302625f1fb78034c02b78f756eb6e6a9ba3b2 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sun, 14 Jun 2026 21:50:44 -0400 Subject: [PATCH] Fixed mobile layout --- public/index.html | 111 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 77 insertions(+), 34 deletions(-) diff --git a/public/index.html b/public/index.html index c224d88..3875e70 100644 --- a/public/index.html +++ b/public/index.html @@ -17,6 +17,10 @@ --dark: #202225; --black: #000; --max-w: 1100px; + --theme-primary: var(--red); + --theme-primary-contrast: white; + --theme-accent: var(--red); + --theme-accent-contrast: white; } html, body { @@ -35,17 +39,21 @@ z-index: 100; background: var(--dark); border-bottom: 2px solid var(--red); + } + + nav .inner { display: flex; align-items: center; + flex-wrap: wrap; gap: 0.25rem; - padding: 0 1rem; + padding: 0 2rem; } nav a { color: #aaa; text-decoration: none; - padding: 1rem 1.25rem; - font-size: 0.9rem; + padding: 0.75rem 0.75rem; + font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 3px solid transparent; @@ -61,7 +69,7 @@ .inner { max-width: var(--max-w); margin: 0 auto; - padding: 0 2rem; + padding: 0; } .section-wrap { @@ -120,7 +128,6 @@ /* ── MISSION SET ── */ #mission-set { background: #0a0a0a; } - /* Force 3 cols, drop to 2 then 1 on smaller screens */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -138,7 +145,10 @@ .service-card { background: var(--dark); border-top: 3px solid transparent; - padding: 1.5rem; + padding: 1.25rem; + display: flex; + align-items: flex-start; + gap: 1rem; transition: border-color 0.2s, transform 0.2s; } @@ -147,7 +157,16 @@ transform: translateY(-3px); } - .service-card .icon { font-size: 1.6rem; margin-bottom: 0.5rem; } + .service-card .icon { + font-size: 1.6rem; + flex-shrink: 0; + } + + .service-card .text { + display: flex; + flex-direction: column; + } + .service-card .title { font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; } .service-card .desc { font-size: 0.82rem; color: #888; line-height: 1.5; } @@ -170,14 +189,22 @@ .op-item.upcoming { border-left-color: #4caf50; } .op-item .op-date { + display: flex; + flex-direction: column; + gap: 0.2rem; font-size: 0.75rem; color: #888; white-space: nowrap; padding-top: 0.2rem; - min-width: 90px; + min-width: 110px; font-family: 'Share Tech Mono', monospace; } + .op-item .op-date .op-time { + color: var(--red); + font-size: 0.7rem; + } + .op-item .op-title { font-weight: 500; margin-bottom: 0.25rem; } .op-item .op-desc { font-size: 0.85rem; color: #aaa; } @@ -328,10 +355,12 @@ @@ -359,33 +388,45 @@
🎮
-
Wide Mission Set
-
Solo, Shooters, Strategy and MMO's
+
+
Wide Mission Set
+
Solo, Shooters, Strategy and MMO's
+
📅
-
Weekly Operations
-
Maintain high readiness at all times.
+
+
Weekly Operations
+
Maintain high readiness at all times.
+
🖥️
-
24/7 Servers
-
Requisition servers for any game.
+
+
24/7 Servers
+
Requisition servers for any game.
+
🔒
-
VPN Access
-
Private VPN access for members.
+
+
VPN Access
+
Private VPN access for members.
+
🎬
-
Private Media Server
-
REDACTED
+
+
Private Media Server
+
REDACTED
+
🌎
-
North American
-
EDT timezone — All regions welcome
+
+
North American
+
EDT timezone — All regions welcome
+
@@ -473,7 +514,6 @@ const upcomingDate = (day === 0 && now < todayEnd) ? lastSunday : new Date(lastSunday); if (!(day === 0 && now < todayEnd)) upcomingDate.setDate(lastSunday.getDate() + 7); - // newest first: upcoming, then prev 1, then prev 2 const ops = [ { date: upcomingDate, upcoming: true }, ]; @@ -494,15 +534,18 @@ const item = document.createElement('div'); item.className = 'op-item' + (op.upcoming ? ' upcoming' : ''); item.innerHTML = ` -
${fmtDate(op.date)}
-
-
- Weekly Operation — Sunday Afternoon - ${op.upcoming ? ` Upcoming` : ''} -
-
14:30 – 18:30 EDT | ${op.upcoming ? 'All squads report in, game TBD' : 'Operation Complete'}
-
- `; +
+ ${fmtDate(op.date)} + 14:30 – 18:30 EDT +
+
+
+ Weekly Operation — Sunday Afternoon + ${op.upcoming ? `Upcoming` : ''} +
+
${op.upcoming ? 'All squads report in, game TBD' : 'Operation Complete'}
+
+ `; list.appendChild(item); });