fix the layout on phones

The code sample pushed the page wider than the screen: a grid item will not
shrink below its content, so one long URL in the snippet was enough. The grid
children may shrink now, and the snippet wraps instead of scrolling on the
narrowest screens.

The counters read as one block on a phone — two columns, no separators, and the
fifth item alone in a row. Below 640 px they become a list: a label and its
number per row, with a hairline between them.

The tracker has been 1.6 KB for a while; the page still said 1.3 KB.

Author: plotbird

assets/style.css

@@ -746,3 +746,58 @@ td strong {
         grid-template-columns: repeat(2, 1fr);
     }
 }
+
+/* Mobile -------------------------------------------------------------------
+   Grid items refuse to shrink below their content unless told otherwise, and a
+   long unbreakable line in the code sample was enough to push the whole page
+   wider than the screen. */
+
+.steps > *,
+.cards > *,
+.numbers-inner > * {
+    min-width: 0;
+}
+
+@media (max-width: 559px) {
+    /* Let the snippet wrap instead of scrolling on the narrowest screens. */
+    pre {
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
+}
+
+@media (max-width: 639px) {
+    /* Counters as a list: a value and its label per row, hairlines between. */
+    .numbers-inner {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 10px 0;
+    }
+
+    .numbers-inner .stat {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 13px 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .numbers-inner .stat:last-child {
+        border-bottom: 0;
+    }
+
+    .numbers-inner .stat span {
+        order: 1;
+        margin: 0;
+        font-size: 13.5px;
+        letter-spacing: 0;
+        text-transform: none;
+    }
+
+    .numbers-inner .stat b {
+        order: 2;
+        font-size: 1.15rem;
+        white-space: nowrap;
+    }
+}

index.html

@@ -131,7 +131,7 @@ <h1>Web analytics for sites that only have PHP and MySQL.</h1>
         <a class="btn btn-ghost" href="https://github.com/plotbird/analytics">Read the code</a>
     </div>
     <p class="hero-note">
-        Tracker <code>1.3 KB</code> &middot; dashboard CSS <code>43 KB</code>, pre-compiled &middot;
+        Tracker <code>1.6 KB</code> &middot; dashboard CSS <code>43 KB</code>, pre-compiled &middot;
         MySQL 5.7+ or MariaDB 10.2+
     </p>
 </div>
@@ -194,7 +194,7 @@ <h3>No cookies at all</h3>
                 </div>
                 <h3>Featherweight by design</h3>
                 <p>
-                    1.3 KB of JavaScript, pre-compiled CSS and every library vendored locally, so
+                    1.6 KB of JavaScript, pre-compiled CSS and every library vendored locally, so
                     the dashboard also works on a server without internet access. Schema changes
                     arrive as SQL you apply from the settings page.
                 </p>
@@ -205,7 +205,7 @@ <h3>Featherweight by design</h3>
 
 <section class="numbers" aria-label="Numbers">
     <div class="wrap numbers-inner">
-        <div class="stat"><b>1.3 KB</b><span>tracker</span></div>
+        <div class="stat"><b>1.6 KB</b><span>tracker</span></div>
         <div class="stat"><b>43 KB</b><span>dashboard CSS</span></div>
         <div class="stat"><b>710 834</b><span>IP ranges inside</span></div>
         <div class="stat"><b>256</b><span>end-to-end checks</span></div>

ru/index.html

@@ -130,7 +130,7 @@ <h1>Веб-аналитика для сайтов, у которых есть т
         <a class="btn btn-ghost" href="https://github.com/plotbird/analytics">Посмотреть код</a>
     </div>
     <p class="hero-note">
-        Счётчик <code>1,3 КБ</code> &middot; CSS дашборда <code>43 КБ</code>, без сборщика &middot;
+        Счётчик <code>1,6 КБ</code> &middot; CSS дашборда <code>43 КБ</code>, без сборщика &middot;
         MySQL 5.7+ или MariaDB 10.2+
     </p>
 </div>
@@ -192,7 +192,7 @@ <h3>Без cookie</h3>
                 </div>
                 <h3>Лёгкий по устройству</h3>
                 <p>
-                    1,3 КБ JavaScript, заранее собранный CSS, все библиотеки лежат рядом — дашборд
+                    1,6 КБ JavaScript, заранее собранный CSS, все библиотеки лежат рядом — дашборд
                     работает даже на сервере без доступа в интернет. Изменения схемы приходят
                     обычным SQL и применяются из настроек.
                 </p>
@@ -203,7 +203,7 @@ <h3>Лёгкий по устройству</h3>
 
 <section class="numbers" aria-label="Цифры">
     <div class="wrap numbers-inner">
-        <div class="stat"><b>1,3 КБ</b><span>счётчик</span></div>
+        <div class="stat"><b>1,6 КБ</b><span>счётчик</span></div>
         <div class="stat"><b>43 КБ</b><span>CSS дашборда</span></div>
         <div class="stat"><b>710 834</b><span>диапазона IP внутри</span></div>
         <div class="stat"><b>256</b><span>сквозные проверки</span></div>