feat: responsive for web with sidebar and different styling for test ui on web

This commit is contained in:
2026-02-27 02:36:54 +06:00
parent 79fc2eacdc
commit c35f328e30
15 changed files with 8254 additions and 251 deletions

View File

@ -24,6 +24,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; }
.dr-screen {
min-height: 100vh;
background: #fffbf4;
@ -213,14 +215,31 @@ const STYLES = `
/* CTA bar */
.dr-cta-bar {
position:fixed;bottom:96px;left:0;right:0;z-index:10;
padding:0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
position: fixed;
bottom: 96px;
left: 0;
right: 0;
z-index: 5;
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
}
.dr-cta-inner {
max-width:560px;margin:0 auto;
display:flex;gap:0.75rem;align-items:center;
max-width: 560px;
margin: 0 auto;
display: flex;
gap: 0.75rem;
align-items: center;
}
@media (min-width: 900px) {
.dr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
.dr-topic-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.dr-cta-bar { left: var(--sidebar-width); right: 0; }
/* Align decorative blobs relative to the centered content container */
.dr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
.dr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
.dr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
.dr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
}
.dr-next-btn {