From a282d477fc904fa6f7e61f146aa847f2504f036f Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Sun, 11 Aug 2024 14:02:09 +0300
Subject: [PATCH] docs: make documentation mobile-friendly

---
 docs/blocks/demo/index.module.css             | 10 ++++-
 docs/blocks/footer/index.module.css           |  5 ---
 docs/blocks/footer/index.tsx                  | 16 +++-----
 docs/blocks/header/index.module.css           |  8 +++-
 docs/blocks/icons/index.module.css            | 29 +++++++++----
 docs/blocks/themes/index.module.css           | 20 ++++++++-
 docs/blocks/themes/index.tsx                  |  2 +-
 .../illustration-icons/index.module.css       |  1 +
 .../illustration-theme/index.module.css       |  1 +
 docs/elements/netlify/index.module.css        | 15 -------
 docs/elements/netlify/index.tsx               | 41 -------------------
 docs/elements/theme-dropdown/index.module.css | 16 ++++++--
 docs/elements/theme-select/index.module.css   |  2 +
 docs/elements/theme-select/index.tsx          |  9 ++--
 docs/styles/base.css                          |  4 +-
 package.json                                  |  2 +-
 16 files changed, 88 insertions(+), 93 deletions(-)
 delete mode 100644 docs/elements/netlify/index.module.css
 delete mode 100644 docs/elements/netlify/index.tsx

diff --git a/docs/blocks/demo/index.module.css b/docs/blocks/demo/index.module.css
index 4656345..97dacb1 100644
--- a/docs/blocks/demo/index.module.css
+++ b/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 {
diff --git a/docs/blocks/footer/index.module.css b/docs/blocks/footer/index.module.css
index 9edf810..3584e12 100644
--- a/docs/blocks/footer/index.module.css
+++ b/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;
-}
diff --git a/docs/blocks/footer/index.tsx b/docs/blocks/footer/index.tsx
index 1cb95c8..a4e941b 100644
--- a/docs/blocks/footer/index.tsx
+++ b/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>
 ))
diff --git a/docs/blocks/header/index.module.css b/docs/blocks/header/index.module.css
index 3c64ff6..3d5398e 100644
--- a/docs/blocks/header/index.module.css
+++ b/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);
+  }
 }
diff --git a/docs/blocks/icons/index.module.css b/docs/blocks/icons/index.module.css
index 688540b..b12f5ee 100644
--- a/docs/blocks/icons/index.module.css
+++ b/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;
+    }
+  }
 }
diff --git a/docs/blocks/themes/index.module.css b/docs/blocks/themes/index.module.css
index 26f3970..46ed113 100644
--- a/docs/blocks/themes/index.module.css
+++ b/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;
+    }
+  }
 }
diff --git a/docs/blocks/themes/index.tsx b/docs/blocks/themes/index.tsx
index 88e0054..7eb5954 100644
--- a/docs/blocks/themes/index.tsx
+++ b/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>
diff --git a/docs/elements/illustration-icons/index.module.css b/docs/elements/illustration-icons/index.module.css
index a4ccd6b..021b737 100644
--- a/docs/elements/illustration-icons/index.module.css
+++ b/docs/elements/illustration-icons/index.module.css
@@ -1,3 +1,4 @@
 .illustration {
+  max-inline-size: 100%;
   block-size: 200px;
 }
diff --git a/docs/elements/illustration-theme/index.module.css b/docs/elements/illustration-theme/index.module.css
index be061e9..f2fa7dc 100644
--- a/docs/elements/illustration-theme/index.module.css
+++ b/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);
 }
diff --git a/docs/elements/netlify/index.module.css b/docs/elements/netlify/index.module.css
deleted file mode 100644
index 1d6e4ee..0000000
--- a/docs/elements/netlify/index.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.link {
-  display: flex;
-  border-radius: var(--border-radius);
-  outline: 0;
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--color-background-brand);
-  }
-}
-
-.netlify {
-  block-size: 50px;
-  overflow: hidden;
-  border-radius: var(--border-radius);
-}
diff --git a/docs/elements/netlify/index.tsx b/docs/elements/netlify/index.tsx
deleted file mode 100644
index 2f0fbbb..0000000
--- a/docs/elements/netlify/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { component$ } from '@builder.io/qwik'
-
-import styles from './index.module.css'
-
-export let Netlify = component$(() => (
-  <a href="https://www.netlify.com" class={styles.link} target="_blank">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class={styles.netlify}
-      viewBox="0 0 114 50"
-      fill="none"
-    >
-      <g clip-path="url(#a)">
-        <rect
-          fill="var(--color-content-primary)"
-          width="114"
-          height="50"
-          rx="4"
-        />
-        <path fill="var(--color-background-primary)" d="M0 0h114v51H0z" />
-        <g fill="var(--color-content-primary)" clip-path="url(#b)">
-          <path d="M44.445 40.3v-7.694l.153-.16h1.853l.154.16V40.3l-.154.16h-1.853l-.153-.16ZM44.445 17.854V10.16l.153-.16h1.853l.154.16v7.694l-.154.16h-1.853l-.153-.16ZM38.068 34.89h-.254l-1.275-1.322v-.264l2.388-2.482 1.349.002.18.184v1.4l-2.388 2.483ZM36.54 17.226v-.266l1.274-1.321h.254l2.388 2.48v1.397l-.18.19h-1.349l-2.388-2.48ZM28.154 24.106h10.5l.153.16v1.926l-.153.16h-10.5l-.154-.16v-1.926l.154-.16ZM99.844 24.109l.154.16v1.923l-.154.16H89.19l-.153-.16.77-1.924.154-.16h9.883ZM49 29.24h-1.853l-.153-.16v-4.503c0-.802-.303-1.423-1.234-1.443-.48-.012-1.027 0-1.613.025l-.089.093v5.825l-.153.16h-1.853l-.154-.16v-7.694l.154-.16h4.169c1.62 0 2.933 1.363 2.933 3.045v4.81l-.154.159v.002ZM57.974 25.87l-.154.16h-4.79l-.154.16c0 .32.31 1.283 1.546 1.283.463 0 .926-.16 1.082-.481l.154-.16h1.852l.154.16c-.154.962-.926 2.407-3.245 2.407-2.625 0-3.861-1.924-3.861-4.172 0-2.247 1.236-4.17 3.708-4.17 2.472 0 3.708 1.923 3.708 4.17v.643Zm-2.319-1.604c0-.16-.153-1.284-1.39-1.284-1.235 0-1.389 1.124-1.389 1.284l.154.16h2.472l.153-.16ZM62.298 26.832c0 .322.154.481.464.481h1.39l.153.16v1.604l-.154.16h-1.39c-1.389 0-2.625-.643-2.625-2.407V23.3l-.154-.16H58.9l-.154-.159v-1.604l.154-.16h1.082l.154-.16v-1.442l.154-.16h1.852l.154.16v1.443l.154.16h1.699l.153.159v1.604l-.153.16h-1.7l-.153.16v3.528l.002.002ZM68.015 29.24h-1.853l-.153-.16V18.17l.153-.159h1.853l.154.16v10.906l-.154.16v.002ZM72.186 19.935h-1.852l-.154-.16v-1.604l.154-.16h1.852l.154.16v1.604l-.154.16Zm0 9.304h-1.852l-.154-.16V21.38l.154-.16h1.852l.154.16v7.7l-.154.16ZM79.449 18.17v1.605l-.154.16h-1.39c-.309 0-.463.16-.463.48v.644l.154.16h1.546l.153.159v1.604l-.153.16h-1.546l-.154.16v5.773l-.153.16h-1.853l-.154-.16V23.3l-.153-.16h-1.083l-.153-.159v-1.604l.153-.16h1.083l.153-.16v-.642c0-1.764 1.236-2.407 2.626-2.407h1.39l.153.16-.002.002ZM85.163 29.399c-.619 1.604-1.236 2.566-3.398 2.566h-.773l-.154-.16v-1.604l.154-.16h.773c.773 0 .926-.159 1.082-.64v-.16l-2.472-6.256V21.38l.154-.16h1.39l.153.16 1.853 5.455h.153l1.853-5.455.154-.16h1.39l.153.16v1.605L85.156 29.4l.007-.002Z" />
-        </g>
-        <path fill="var(--color-content-primary)" d="M0 0h15v50H0z" />
-        <path
-          d="M5.518 45.367v-.774H10v.774H5.518Zm0-1.746c0-.44.098-.784.294-1.032.196-.248.474-.372.834-.372.348 0 .622.13.822.39.2.26.3.628.3 1.104l-.336.018c.004-.608.114-1.062.33-1.362.212-.3.524-.45.936-.45.424 0 .748.146.972.438.22.288.33.686.33 1.194v1.242h-.738v-1.152c0-.268-.05-.488-.15-.66a.498.498 0 0 0-.462-.258c-.224 0-.39.088-.498.264-.108.172-.162.39-.162.654v1.146h-.738V43.68c0-.192-.04-.36-.12-.504a.426.426 0 0 0-.396-.216c-.192 0-.33.068-.414.204a.955.955 0 0 0-.126.51v1.116h-.678v-1.17Zm0-2.925v-.774H8.17c.256 0 .472-.04.648-.12a.88.88 0 0 0 .39-.336.926.926 0 0 0 .126-.486.926.926 0 0 0-.126-.486.845.845 0 0 0-.39-.33 1.497 1.497 0 0 0-.648-.126H5.518v-.75h2.664c.604 0 1.068.146 1.392.438.324.288.486.71.486 1.266 0 .56-.162.984-.486 1.272-.324.288-.788.432-1.392.432H5.518Zm0-5.048v-.774H10v.774H5.518Zm0-2.475V32.4H10v.774H5.518Zm3.75-.546v-2.412H10v2.412h-.732Zm-3.69-3.903v-.773H10v.773H5.578Zm-.06 1.41v-3.6h.732v3.6h-.732Zm0-6.98v-.827l3.684-1.056v.318L5.518 20.43v-.888l3.684-1.122v.318L5.518 17.64v-.798L10 18.18v.81l-4.086 1.254v-.438L10 21.097v.756l-4.482 1.302Zm0-7.385v-.774H10v.774H5.518Zm.06-3.283v-.774H10v.774H5.578Zm-.06 1.41v-3.6h.732v3.6h-.732Zm0-4.7v-.773H10v.774H5.518Zm1.572-.545V6.179h.732V8.65H7.09ZM5.518 6.407v-.774H10v.774H5.518Z"
-          fill="var(--color-background-primary)"
-        />
-      </g>
-      <rect
-        stroke="var(--color-content-primary)"
-        stroke-width="2"
-        width="112"
-        height="48"
-        rx="3"
-        x="1"
-        y="1"
-      />
-    </svg>
-  </a>
-))
diff --git a/docs/elements/theme-dropdown/index.module.css b/docs/elements/theme-dropdown/index.module.css
index 4ebbe7b..7c04774 100644
--- a/docs/elements/theme-dropdown/index.module.css
+++ b/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 {
diff --git a/docs/elements/theme-select/index.module.css b/docs/elements/theme-select/index.module.css
index dad36e7..5dded71 100644
--- a/docs/elements/theme-select/index.module.css
+++ b/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);
diff --git a/docs/elements/theme-select/index.tsx b/docs/elements/theme-select/index.tsx
index 47fcae0..48b7962 100644
--- a/docs/elements/theme-select/index.tsx
+++ b/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}
diff --git a/docs/styles/base.css b/docs/styles/base.css
index 4be3985..9425315 100644
--- a/docs/styles/base.css
+++ b/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);
diff --git a/package.json b/package.json
index 850e947..a8337a0 100644
--- a/package.json
+++ b/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 })\"",