feat: responsive for web with sidebar and different styling for test ui on web
This commit is contained in:
@ -22,6 +22,8 @@ const DOTS = [
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.home-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -149,7 +151,7 @@ const STYLES = `
|
||||
}
|
||||
.h-tab-btn.active { color:#1e1b4b; border-bottom-color:#a855f7; }
|
||||
|
||||
/* ── Practice sheet card ── */
|
||||
/* ── Practice sheet ── */
|
||||
.h-sheet-grid {
|
||||
display:grid; gap:0.85rem;
|
||||
grid-template-columns: 1fr;
|
||||
@ -241,6 +243,18 @@ const STYLES = `
|
||||
.h-anim-3 { animation-delay:0.15s; }
|
||||
.h-anim-4 { animation-delay:0.2s; }
|
||||
.h-anim-5 { animation-delay:0.25s; }
|
||||
|
||||
/* Desktop / wide tweaks */
|
||||
@media (min-width: 900px) {
|
||||
.home-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
||||
.h-sheet-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
||||
|
||||
/* nudge blobs so they align visually with the centered container */
|
||||
.h-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||
.h-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.h-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.h-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Sheet card ───────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user