Merge pull request #113 from zoosky/fix/site-mobile-layout

Fit the site to a phone, and show the build in the footer

Author: zoosky

docs/themes/sass/assets/css/main.scss

@@ -248,8 +248,48 @@ code, kbd, samp, pre { font-family: var(--mono); }
   }
 }
 
+.site-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+// A phone cannot hold the wordmark, six links and two buttons on one 60px row:
+// at 390px the row ran to 521px and every page scrolled sideways. So the
+// header wraps into two rows. The buttons stay beside the wordmark, and the
+// links take a full-width row of their own that scrolls sideways when it does
+// not fit, rather than hiding links to make the rest fit.
 @media (max-width: 640px) {
-  .site-nav .hide-sm { display: none; }
+  // The sticky header is taller here, so in-page links need a larger offset.
+  html { scroll-padding-top: 7.5rem; }
+
+  .site-header > .container {
+    flex-wrap: wrap;
+    height: auto;
+    column-gap: 0.75rem;
+    row-gap: 0.15rem;
+    padding-top: 0.6rem;
+  }
+
+  .site-tools { margin-left: auto; }
+
+  .site-nav {
+    order: 3;
+    flex: 1 0 100%;
+    // Full-bleed, so the row scrolls to the screen edges; the inner padding
+    // lines the first link's text up with the wordmark above it.
+    margin: 0 -1.5rem;
+    padding: 0 1.5rem 0.55rem 0.9rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+
+    a {
+      flex: none;
+      white-space: nowrap;
+    }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -841,8 +881,72 @@ code, kbd, samp, pre { font-family: var(--mono); }
 
   @media (max-width: 940px) {
     position: static;
-    padding-bottom: 1.25rem;
-    border-bottom: 1px solid var(--border);
+  }
+
+  // Beside the page the menu is always open and needs no control, so its
+  // summary is hidden. Above the page it is a one-line disclosure naming the
+  // page you are on; see the note in docs.html.jinja.
+  .docs-nav-menu > summary { display: none; }
+
+  @media (max-width: 940px) {
+    .docs-nav-menu {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      background: var(--surface);
+    }
+
+    .docs-nav-menu > summary {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.7rem 0.9rem;
+      cursor: pointer;
+      list-style: none;
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--text-faint);
+
+      &::-webkit-details-marker { display: none; }
+
+      // A chevron drawn with two borders, pointing down while closed and up
+      // while open.
+      &::after {
+        content: "";
+        flex: none;
+        width: 0.45rem;
+        height: 0.45rem;
+        margin: 0 0.2rem 0.2rem 0;
+        border-right: 1.5px solid currentColor;
+        border-bottom: 1.5px solid currentColor;
+        transform: rotate(45deg);
+      }
+    }
+
+    .docs-nav-menu[open] > summary::after {
+      margin: 0.2rem 0.2rem 0 0;
+      transform: rotate(-135deg);
+    }
+
+    .docs-nav-current {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: right;
+      font-family: var(--font);
+      font-size: 0.9rem;
+      letter-spacing: 0;
+      text-transform: none;
+      color: var(--text);
+    }
+
+    .docs-nav-lists {
+      padding: 0.9rem 0.6rem 0.2rem;
+      border-top: 1px solid var(--border);
+    }
   }
 
   .nav-title {
@@ -980,6 +1084,13 @@ code, kbd, samp, pre { font-family: var(--mono); }
     font-size: 0.83rem;
     color: var(--text-faint);
   }
+
+  .build-info {
+    margin: 0.5rem 0 0;
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    color: var(--text-faint);
+  }
 }
 
 // ---------------------------------------------------------------------------

docs/themes/sass/templates/base.html.jinja

@@ -54,14 +54,21 @@
     <div class="container">
       <a class="wordmark" href="{{ url('/') }}">accent<span class="mark">-</span>sass</a>
 
+      {# The links and the two buttons are separate groups so a narrow screen
+         can lay them out differently: the buttons stay beside the wordmark,
+         and the links take a row of their own that scrolls sideways. Every
+         link stays reachable on a phone that way, where hiding some did not
+         make the rest fit. #}
       <nav class="site-nav" aria-label="Main">
         <a href="{{ url('/guide') }}" {% if page.url and '/guide' in page.url %}class="active"{% endif %}>Guide</a>
         <a href="{{ url('/reference') }}" {% if page.url and '/reference' in page.url %}class="active"{% endif %}>Reference</a>
         <a href="{{ url('/demo/') }}" {% if page.url and '/demo' in page.url %}class="active"{% endif %}>Demo</a>
-        <a class="hide-sm{% if page.url and '/changelog' in page.url %} active{% endif %}" href="{{ url('/changelog') }}">Changelog</a>
-        <a class="ext hide-sm" href="https://docs.rs/accent-sass">API</a>
+        <a href="{{ url('/changelog') }}" {% if page.url and '/changelog' in page.url %}class="active"{% endif %}>Changelog</a>
+        <a class="ext" href="https://docs.rs/accent-sass">API</a>
         <a class="ext" href="https://github.com/zoosky/accent-sass">GitHub</a>
+      </nav>
 
+      <div class="site-tools">
         <button type="button" class="icon-btn search-trigger" id="search-trigger"
                 aria-label="Search" aria-expanded="false" aria-controls="search-overlay">
           <svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
@@ -76,7 +83,7 @@
           <svg class="icon-sun" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3.2"/><path d="M8 .8v1.8M8 13.4v1.8M15.2 8h-1.8M2.6 8H.8M13.09 2.91l-1.27 1.27M4.18 11.82l-1.27 1.27M13.09 13.09l-1.27-1.27M4.18 4.18 2.91 2.91"/></svg>
           <svg class="icon-moon" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 9.6A5.8 5.8 0 0 1 6.4 2.5a5.8 5.8 0 1 0 7.1 7.1Z"/></svg>
         </button>
-      </nav>
+      </div>
     </div>
   </header>
 
@@ -159,6 +166,26 @@
         accent-sass. The <a href="{{ url('/demo/') }}">demo</a> runs the same
         compiler in your browser.
       </p>
+
+      {# Which build a reader is looking at. `accent.version_string` names the
+         Accent binary that rendered the page and its git hash, for example
+         `0.25.1 (abc1234)`. The date is when the site was built, which here is
+         when a change was last deployed: the Pages workflow rebuilds on every
+         change to the docs, the theme, the compiler or CHANGELOG.md. File
+         modification dates are not used, because a CI checkout gives every
+         file the time of the checkout.
+
+         `site.built_at` is an ISO 8601 timestamp such as `2026-09-13T16:00:14Z`.
+         The `date` filter passes it through unformatted, so the date is its
+         first ten characters, which reads the same under every Accent release.
+         v0.25.1, the release the workflow pins, renders `site.built_at` though
+         its documentation only lists it from v0.26; `site.last_modified` is the
+         fallback if a release ever omits it. #}
+      {% set updated = site.built_at or site.last_modified %}
+      <p class="build-info">
+        Built with Accent CMS {{ accent.version_string }}{% if updated %} · Last updated
+        <time datetime="{{ updated }}">{{ updated[:10] }}</time>{% endif %}
+      </p>
     </div>
   </footer>
   <script src="{{ url('/_search/search.js') }}" defer></script>

docs/themes/sass/templates/docs.html.jinja

@@ -32,6 +32,14 @@
 {% block body %}
 <div class="container docs-layout">
   <nav class="docs-nav" aria-label="Documentation">
+    {# A disclosure, so a narrow screen -- where this sits above the page
+       rather than beside it -- can collapse the twenty links to one line and
+       show the content first. It ships open, which is what a reader without
+       JavaScript gets on any screen; the script below closes it on a narrow
+       screen before the page below it renders. #}
+    <details class="docs-nav-menu" open>
+      <summary>Pages<span class="docs-nav-current">{{ page.title }}</span></summary>
+      <div class="docs-nav-lists">
     <p class="nav-title">Usage guide</p>
     <ul>
       <li>
@@ -69,6 +77,21 @@
       <li><a href="https://sass-lang.com/documentation/">Sass language</a></li>
       <li><a href="https://github.com/zoosky/accent-sass">Source</a></li>
     </ul>
+      </div>
+    </details>
+    {# Inline and synchronous rather than in the deferred chrome.js: a deferred
+       script closes the menu after first paint, so a phone would show the
+       whole list and then jump. The width matches the stacking breakpoint in
+       main.scss, and crossing it -- a rotated tablet -- resets the state. #}
+    <script>
+      (function () {
+        var menu = document.currentScript.previousElementSibling;
+        var narrow = window.matchMedia("(max-width: 940px)");
+        function sync() { menu.open = !narrow.matches; }
+        sync();
+        narrow.addEventListener("change", sync);
+      })();
+    </script>
   </nav>
 
   <article class="docs-main">

docs/themes/sass/templates/home.html.jinja

@@ -54,7 +54,7 @@
 
 <span class="tok-cm">// No Node, no libsass, no subprocess. The same</span>
 <span class="tok-cm">// compiler runs in a browser:</span>
-<span class="tok-cm">//   import { compileString } from "accent-sass";</span></code></pre>
+<span class="tok-cm">//   import { compileString } from "@zoosky/accent-sass";</span></code></pre>
       </div>
     </div>
   </div>