feat: responsive for web with sidebar and different styling for test ui on web
This commit is contained in:
@ -26,6 +26,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; }
|
||||
|
||||
.htm-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -179,16 +181,35 @@ const STYLES = `
|
||||
|
||||
/* CTA bar */
|
||||
.htm-cta-bar {
|
||||
position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
|
||||
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
|
||||
}
|
||||
.htm-cta-bar.hidden {
|
||||
transform: translateY(100%); opacity: 0; pointer-events: none;
|
||||
}
|
||||
.htm-cta-inner {
|
||||
max-width: 560px; margin: 0 auto;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.htm-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
|
||||
.htm-cta-bar { left: var(--sidebar-width); right: 0; }
|
||||
.htm-cta-inner { max-width: var(--content-max); margin: 0 auto; }
|
||||
|
||||
/* align blobs to centered content */
|
||||
.htm-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
|
||||
.htm-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
|
||||
.htm-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
.htm-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
|
||||
/* make module cards slightly wider on desktop */
|
||||
.htm-card { min-height: 220px; }
|
||||
}
|
||||
|
||||
.htm-start-btn {
|
||||
|
||||
Reference in New Issue
Block a user