From 0fae62068b296a8466e627fd6817a2f86d924a35 Mon Sep 17 00:00:00 2001 From: Shihaam Abdul Rahman Date: Tue, 24 Mar 2026 01:07:46 +0500 Subject: [PATCH] better desktop mode --- index.html | 83 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 84e71c4..66ae504 100644 --- a/index.html +++ b/index.html @@ -101,14 +101,33 @@ .container { width: 100%; - max-width: 800px; + max-width: 1400px; + } + + .main-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + align-items: start; + } + + .main-layout > .left-column, + .main-layout > .right-column { + display: flex; + flex-direction: column; + gap: 20px; + } + + @media (max-width: 1024px) { + .main-layout { + grid-template-columns: 1fr; + } } .card { background-color: var(--bg-card); border: 2px solid var(--border); padding: 28px; - margin-bottom: 20px; } .header { @@ -773,10 +792,11 @@ .emergency-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 12px; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 16px; } + .emergency-card { display: flex; align-items: center; @@ -840,6 +860,7 @@ .emergency-section { margin-top: 20px; border: 2px solid var(--border); + height: fit-content; } .emergency-section summary { @@ -863,16 +884,20 @@ } .emergency-section summary::after { - content: 'expand_more'; - font-family: 'Material Icons'; - font-size: 24px; + content: '▼'; + font-size: 12px; transition: transform 0.2s ease; + opacity: 0.5; } .emergency-section[open] summary::after { transform: rotate(180deg); } + .emergency-section summary:hover::after { + opacity: 1; + } + .emergency-section summary:hover { color: var(--orange); background-color: var(--bg-card); @@ -885,18 +910,20 @@
-
-
-