feat: responsive for web with sidebar and different styling for test ui on web
This commit is contained in:
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user