From 5cf6f658efd2d6ea865fd1ccbf4291a07e4b3039 Mon Sep 17 00:00:00 2001 From: Mannu Date: Mon, 11 May 2026 10:05:28 +0530 Subject: [PATCH] feat: mobile responsive layout --- index.html | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 009baaa..78486ec 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,28 @@ html,body,#root{min-height:100vh} body{font-family:'DM Sans',sans-serif} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-c)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}} + +/* ── Mobile responsive ───────────────────────────────────────── */ +@media (max-width: 640px) { + .main { padding: 20px 14px 48px !important; } + .hdr { flex-direction: column !important; gap: 16px !important; } + .clock { font-size: 48px !important; letter-spacing: -1px !important; } + .clock-s { font-size: 28px !important; } + .pill { border-radius: 10px !important; align-self: stretch !important; flex-wrap: wrap !important; } + .pill-cell { flex: 1 1 40% !important; padding: 8px 10px !important; } + .pill-div { display: none !important; } + .pill-val { font-size: 14px !important; } + .pill-lbl { font-size: 10px !important; } + .wgrid { grid-template-columns: 1fr 1fr !important; } + .sgrid { grid-template-columns: 1fr 1fr !important; } + .dark-btn { top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; font-size: 15px !important; } + .ts-lbl { top: 17px !important; right: 52px !important; } +} +@media (max-width: 400px) { + .clock { font-size: 38px !important; } + .wgrid { grid-template-columns: 1fr !important; } + .sgrid { grid-template-columns: 1fr !important; } +} @@ -178,10 +200,10 @@ function Markets({data}){ function StatCell({val,lbl}){ const[h,sH]=useState(false); return( -
sH(true)} onMouseLeave={()=>sH(false)} +
sH(true)} onMouseLeave={()=>sH(false)} style={{textAlign:"center",padding:"8px 20px",background:h?"var(--c-accent-faint)":"transparent",transition:"background 0.15s",cursor:"default"}}> -
{val}
-
{lbl}
+
{val}
+
{lbl}
); } @@ -278,7 +300,7 @@ function App(){
{greet(now.getHours())}, Manohar
{String(now.getHours()).padStart(2,"0")}:{String(now.getMinutes()).padStart(2,"0")} - :{String(now.getSeconds()).padStart(2,"0")} + :{String(now.getSeconds()).padStart(2,"0")}
{now.toLocaleDateString("en-US",{weekday:"long"})}