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 c7f0183956
commit e7db0a5d31
15 changed files with 8267 additions and 251 deletions

View File

@ -18,6 +18,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; }
.ls-screen {
min-height: 100vh;
background: #fffbf4;
@ -137,6 +139,19 @@ const STYLES = `
/* Skeleton shimmer override */
.ls-skeleton-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media(min-width: 480px) { .ls-skeleton-grid { grid-template-columns: 1fr 1fr; } }
/* Desktop / wide layout tweaks */
@media (min-width: 900px) {
.ls-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
.ls-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ls-skeleton-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* nudge blobs closer to the centered content container */
.ls-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
.ls-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
.ls-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
.ls-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
}
`;
export const Lessons = () => {