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

@ -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 {