docs: make documentation mobile-friendly

docs/blocks/demo/index.module.css

@@ -11,6 +11,7 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-xl);
+  container-type: inline-size;
 
   @container (inline-size >= 980px) {
     grid-template-columns: 1fr 460px;
@@ -24,9 +25,14 @@
 
 .selection {
   display: grid;
-  grid-template-columns: minmax(auto, 400px) auto;
-  gap: var(--space-m);
+  grid-template-columns: 1fr;
+  gap: var(--space-xl);
   align-items: end;
+
+  @container (inline-size >= 560px) {
+    grid-template-columns: minmax(auto, 400px) auto;
+    gap: var(--space-m);
+  }
 }
 
 .code-example {

docs/blocks/footer/index.module.css

@@ -2,8 +2,3 @@
   padding-block: var(--space-xl) calc(var(--space-l) * 2);
   background: var(--color-background-primary);
 }
-
-.container {
-  display: flex;
-  justify-content: space-between;
-}

docs/blocks/footer/index.tsx

@@ -2,21 +2,17 @@ import { component$ } from '@builder.io/qwik'
 
 import { Typography } from '../../elements/typography'
 import { Container } from '../../elements/container'
-import { Netlify } from '../../elements/netlify'
 import styles from './index.module.css'
 
 export let Footer = component$(() => (
   <footer class={styles.footer}>
     <Container class={styles.container}>
-      <div>
-        <Typography mbe="2xs" size="s">
-          Released under the MIT License
-        </Typography>
-        <Typography size="s">
-          Copyright © 2024 Azat S. & Contributors
-        </Typography>
-      </div>
-      <Netlify />
+      <Typography align="center" mbe="2xs" size="s">
+        Released under the MIT License
+      </Typography>
+      <Typography align="center" size="s">
+        Copyright © 2024 Azat S. & Contributors
+      </Typography>
     </Container>
   </footer>
 ))

docs/blocks/header/index.module.css

@@ -13,8 +13,14 @@
 
 .buttons {
   display: flex;
-  gap: var(--space-s);
+  flex-direction: column;
+  gap: var(--space-l);
   align-items: center;
   justify-content: center;
   margin: var(--space-l) auto;
+
+  @container (inline-size >= 400px) {
+    flex-direction: row;
+    gap: var(--space-s);
+  }
 }

docs/blocks/icons/index.module.css

@@ -1,16 +1,31 @@
 .icons {
   padding-block: calc(var(--space-l) * 3);
   background: var(--color-background-primary);
-}
-
-.container {
-  display: grid;
-  grid-template-columns: 5fr 7fr;
-  gap: var(--space-l);
+  container-type: inline-size;
 }
 
 .illustration {
   display: flex;
   align-items: center;
-  justify-content: end;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-xl);
+
+  .illustration {
+    justify-content: start;
+    margin-block-start: var(--space-l);
+  }
+
+  @container (inline-size >= 768px) {
+    grid-template-columns: 5fr 7fr;
+    gap: var(--space-l);
+
+    .illustration {
+      justify-content: end;
+      margin-block-start: 0;
+    }
+  }
 }

docs/blocks/themes/index.module.css

@@ -5,11 +5,27 @@
     var(--color-background-primary) 85%,
     var(--color-background-secondary)
   );
+  container-type: inline-size;
 }
 
 .container {
   display: grid;
-  grid-template-columns: 7fr 5fr;
-  gap: var(--space-l);
+  grid-template-columns: 1fr;
+  gap: var(--space-xl);
   align-items: center;
+
+  .illustration {
+    order: 1;
+    margin-block-start: var(--space-l);
+  }
+
+  @container (inline-size >= 768px) {
+    grid-template-columns: 7fr 5fr;
+    gap: var(--space-l);
+
+    .illustration {
+      order: 0;
+      margin-block-start: 0;
+    }
+  }
 }

docs/blocks/themes/index.tsx

@@ -9,7 +9,7 @@ import styles from './index.module.css'
 export let Themes = component$(() => (
   <section class={styles.themes}>
     <Container class={styles.container}>
-      <div>
+      <div class={styles.illustration}>
         <IllustrationTheme />
       </div>
       <div>

docs/elements/illustration-icons/index.module.css

@@ -1,3 +1,4 @@
 .illustration {
+  max-inline-size: 100%;
   block-size: 200px;
 }

docs/elements/illustration-theme/index.module.css

@@ -1,4 +1,5 @@
 .illustration {
+  max-inline-size: 100%;
   block-size: 260px;
   padding-block-start: var(--space-l);
 }

docs/elements/theme-dropdown/index.module.css

@@ -4,21 +4,31 @@
   z-index: 1;
   display: grid;
   grid-template-rows: repeat(
-    round(up, calc(var(--total) / var(--columns))),
+    calc((var(--total) + var(--columns) - 1) / var(--columns)),
     1fr
   );
   grid-template-columns: repeat(var(--columns), 1fr);
   grid-auto-flow: column;
   gap: var(--space-s) var(--space-xs);
-  inline-size: 540px;
+  inline-size: min(calc(100vi - var(--space-s) * 2), 540px);
+  max-block-size: 460px;
   padding: var(--space-s) var(--space-xs);
+  overflow: scroll;
   background: var(--color-background-primary);
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--border-radius);
   transform: scaleY(0);
   transform-origin: top center;
   animation: grow-down 250ms ease-in-out forwards;
-  --columns: 3;
+  --columns: 1;
+
+  @media (width >= 400px) {
+    --columns: 2;
+  }
+
+  @media (width >= 600px) {
+    --columns: 3;
+  }
 }
 
 .dropdown-item {

docs/elements/theme-select/index.module.css

@@ -1,5 +1,6 @@
 .wrapper {
   position: relative;
+  container-type: inline-size;
 }
 
 .input-wrapper {
@@ -11,6 +12,7 @@
   inline-size: 100%;
   padding: calc(var(--space-xs) / 2) var(--space-s);
   color: var(--color-content-primary);
+  text-align: start;
   background: var(--color-background-tertiary);
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--border-radius);

docs/elements/theme-select/index.tsx

@@ -20,14 +20,15 @@ export let ThemeSelect = component$(() => {
     <div class={styles.wrapper} ref={ref}>
       <Label for="theme">Select Theme:</Label>
       <div class={styles['input-wrapper']}>
-        <input
-          onFocus$={() => {
+        <button
+          onClick$={() => {
             dropdownVisible.value = true
           }}
-          value={getThemeNameById(theme.value)}
           class={styles.input}
           name="theme"
-        />
+        >
+          {getThemeNameById(theme.value)}
+        </button>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class={styles.icon}

docs/styles/base.css

@@ -17,7 +17,7 @@ html {
 }
 
 body {
-  min-inline-size: 320px;
+  min-inline-size: 300px;
   margin: 0;
   color: var(--color-content-primary);
   background: var(--color-background-primary);
@@ -63,7 +63,9 @@ code {
 }
 
 pre {
+  max-inline-size: calc(100vi - var(--space-s) * 2);
   padding: var(--space-m) var(--space-s);
+  overflow: scroll;
   overflow-inline: scroll;
   border: 1px solid var(--color-border-primary);
   border-radius: var(--border-radius);

package.json

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "build": "vite build --config vite.config.extension.ts",
-    "docs:dev": "vite --open --mode ssr --config vite.config.docs.ts",
+    "docs:dev": "vite --open --host --mode ssr --config vite.config.docs.ts",
     "docs:build": "pnpm run docs:clean && qwik build",
     "docs:clean:dist": "node -e \"fs.rmSync('./docs/dist', { recursive: true, force: true })\"",
     "docs:clean:server": "node -e \"fs.rmSync('./.netlify', { recursive: true, force: true })\"",