Website: header on narrow screens, cards off screenshots, Back to top in a corner

docs/index.md

@@ -4,6 +4,7 @@ template: home.html
 hide:
   - navigation
   - toc
+  - footer
 ---
 
 The home page is rendered by `overrides/home.html`; the guide starts at [Guide](guide.md).

docs/stylesheets/extra.css

@@ -213,11 +213,28 @@ iframe.demo { width: 100%; height: 620px; border: 1px solid var(--bp-rule-strong
   .md-sidebar--primary .md-sidebar__inner { padding-right: 0; }
   .md-nav--primary .md-nav__list { padding-right: .6rem; }
 }
+/* narrow screens keep Docs, Demos and Quick start in the header; GitHub is in the drawer and the footer */
 @media screen and (max-width: 59.984em) {
-  .qd-navlink, .qd-navbtn { display: none; }
+  .qd-github { display: none; }
   .qd-brand { margin-right: .5rem; }
-  .qd-header__title { border-left: 0; }
 }
+@media screen and (max-width: 44.984em) {
+  .qd-version { display: none; }
+  .qd-navlink { padding: 0 .7rem; }
+  .qd-navbtn { margin: 0 .4rem 0 .6rem; }
+}
+@media screen and (max-width: 33.984em) { .qd-demos { display: none; } }
+@media screen and (max-width: 29.984em) {
+  .qd-navlink { display: none; }
+  .qd-navbtn { font-size: .65rem; padding: .4rem .6rem; margin-left: auto; }
+}
+@media screen and (max-width: 22.484em) { .qd-navbtn { display: none; } }
+/* the home page has no nav drawer, so its menu button would open an empty overlay */
+body:has(.qh) .qd-drawer { display: none; }
+
+/* Back to top: a bottom-right corner, not the top centre over the text (Material sets top inline) */
+.md-top { top: auto !important; bottom: 1.2rem; right: 1.2rem; margin: 0; transform: none; }
+.md-top[hidden] { transform: translateY(.2rem); }
 .md-nav--primary .md-nav__source { background: var(--bp-sheet); color: var(--bp-ink); border-bottom: 1px solid var(--bp-rule); }
 @media screen and (max-width: 76.234em) { .md-sidebar--primary { background: var(--qd-side); } }
 

docs/stylesheets/home.css

@@ -67,6 +67,9 @@
 .qh-lead { font-size: 18px; color: var(--qd-muted); margin: 0 0 28px; max-width: 34em; }
 .qh-cta { display: flex; flex-wrap: wrap; gap: 12px; }
 .qh-cta--center { justify-content: center; }
+.qh-hero .qh-cta { column-gap: 8px; }
+.qh-textlink { align-self: center; padding: 0; color: var(--bp-accent) !important; font-weight: 500; white-space: nowrap; }
+.qh-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
 .qh-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px;
   border: 1px solid var(--bp-rule-strong); color: var(--bp-ink) !important; font-weight: 500; background: var(--bp-sheet);
   transition: background-color var(--bp-t-hover) linear, border-color var(--bp-t-hover) linear, transform var(--bp-t-press) var(--bp-ease-out); }
@@ -99,7 +102,9 @@
 .qh-frame__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--bp-sheet);
   border-bottom: 1px solid var(--bp-rule); font: 12px var(--bp-mono); color: var(--qd-label); }
 .qh-frame img { display: block; width: 100%; height: auto; }
-.qh-callout { position: absolute; z-index: 2; left: -32px; bottom: -30px; width: 270px; padding: 12px 14px; border-radius: 8px;
+/* the callout and the title block sit under the screenshot, so they never hide part of it */
+.qh-hero__under { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 14px 0 0 22px; }
+.qh-callout { width: 270px; padding: 12px 14px; border-radius: 8px;
   background: var(--bp-sheet); color: var(--bp-ink); border: 1px solid var(--bp-rule-strong); box-shadow: var(--bp-e2);
   font-size: 13px; line-height: 1.45; }
 .qh-callout__head { display: flex; justify-content: space-between; gap: 8px; font: 600 12.5px var(--bp-mono); margin-bottom: 6px; }
@@ -121,7 +126,7 @@
 .qh-sheet__marks path { fill: none; stroke: var(--bp-accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 1 0; }
 .qh-sheet__marks span { position: absolute; transform: translateY(-50%); padding: 1px 5px; border-radius: 3px; white-space: nowrap;
   background: var(--bp-wash); color: var(--bp-accent-press); font: 500 10.5px var(--bp-mono); }
-.qh-sheet__title { position: absolute; right: 10px; bottom: 10px; display: grid; grid-template-columns: auto auto; margin: 0;
+.qh-sheet__title { display: grid; grid-template-columns: auto auto; margin: 0;
   border: 1px solid var(--bp-ink-3); border-radius: 4px; overflow: hidden; background: var(--bp-sheet); font: 10px/1 var(--bp-mono); }
 .qh-sheet__title dt, .qh-sheet__title dd { margin: 0; padding: 5px 8px; border-top: 1px solid var(--bp-rule-strong); }
 .qh-sheet__title dt { color: var(--bp-ink-3); border-right: 1px solid var(--bp-rule-strong); }
@@ -206,7 +211,7 @@
 .qh-comment__body th { color: var(--qd-text); background: var(--bp-paper); font-weight: 600; }
 
 .qh-faq h2 { margin-bottom: 20px; }
-.qh-faq details { border-bottom: 1px solid var(--bp-rule-strong); padding: 16px 0; max-width: 820px; }
+.qh-faq details { border-bottom: 1px solid var(--bp-rule-strong); padding: 16px 0; }
 .qh-faq summary { cursor: pointer; font-weight: 500; font-size: 17px; color: var(--qd-text); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
 .qh-faq summary::-webkit-details-marker { display: none; }
 .qh-faq summary::after { content: "+"; color: var(--qd-mint); font: 400 22px/1 var(--bp-mono); }
@@ -216,10 +221,10 @@
 .qh-faq summary:hover { color: var(--qd-mint); }
 /* answers fade in as they open */
 .qh-faq details[open] > p { animation: qh-panel .22s var(--bp-ease-out); }
-.qh-faq details p { color: var(--qd-muted); margin: 10px 0 0; }
+.qh-faq details p { color: var(--qd-muted); margin: 10px 0 0; max-width: 820px; }
 
 /* the closing CTA sits on a patch of drafting grid that fades out towards the edges */
-.qh-final { isolation: isolate; text-align: center; padding-top: 136px; padding-bottom: 32px;
+.qh-final { isolation: isolate; text-align: center; padding-top: 96px; padding-bottom: 32px;
   background: radial-gradient(48% 70% at 50% 50%, transparent 0, var(--bp-paper) 100%),
     linear-gradient(var(--bp-grid-major) 1px, transparent 1px) 50% 0 / 120px 120px, linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px) 50% 0 / 120px 120px,
     linear-gradient(var(--bp-grid-minor) 1px, transparent 1px) 50% 0 / 24px 24px, linear-gradient(90deg, var(--bp-grid-minor) 1px, transparent 1px) 50% 0 / 24px 24px; }
@@ -298,7 +303,6 @@
 @media (max-width: 960px) {
   .qh-hero, .qh-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
   .qh-hero { padding-top: 40px; }
-  .qh-callout { left: auto; right: 8px; bottom: -22px; }
   .qh-compare, .qh-steps3 { grid-template-columns: minmax(0, 1fr); }
   .qh-flow { grid-template-columns: minmax(0, 1fr); }
   .qh-flow__arrow { transform: rotate(90deg); justify-self: center; }
@@ -312,7 +316,8 @@
   .qh-dbt__points { grid-template-columns: minmax(0, 1fr); }
   .qh-dbt__files .qh-code { font-size: 12.5px; }
   .qh-steps4, .qh-gallery { grid-template-columns: minmax(0, 1fr); }
-  .qh-callout { position: static; width: auto; margin-top: 12px; }
+  .qh-hero__under { margin-left: 16px; }
+  .qh-callout { width: auto; }
   .qh-lead, .qh-sub { font-size: 16px; }
   .qh-sheet { padding: 16px 0 0 16px; }
   .qh-sheet__zones { font-size: 9px; }
@@ -470,12 +475,11 @@ q-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 1px;
 @media (max-width: 1120px) { .qh-steps4__track { display: none; } }
 @media (min-width: 601px) and (max-width: 1120px) { .qh-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
-/* PR review: three points in a row, one wide screenshot, the PR comment floating on its corner */
+/* PR review: three points in a row, one wide screenshot, the PR comment under it (on top it hid the diagram) */
 .qh-pr .qh-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 28px 0 0; }
 .qh-pr .qh-list li { margin: 0; }
 .qh-pr__stage { position: relative; }
-.qh-pr__stage .qh-comment { position: absolute; left: 24px; bottom: 24px; width: min(460px, 44%); z-index: 2; background: var(--bp-sheet);
-  box-shadow: var(--bp-e2); }
+.qh-pr__stage .qh-comment { width: min(560px, 100%); margin-top: 16px; background: var(--bp-sheet); box-shadow: var(--bp-e2); }
 .qh-pr__stage.qh-anim .qh-comment { opacity: 0; transform: translateY(16px); transition: opacity .32s linear, transform .42s var(--bp-ease-pop); }
 .qh-pr__stage.qh-in .qh-comment { opacity: 1; transform: none; }
 .qh-pr__stage.qh-anim .qh-comment tr + tr { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s;
@@ -489,7 +493,6 @@ q-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 1px;
 }
 @media (max-width: 960px) {
   .qh-pr .qh-list { grid-template-columns: minmax(0, 1fr); }
-  .qh-pr__stage .qh-comment { position: relative; left: auto; bottom: auto; width: auto; margin-top: 16px; }
 }
 
 /* path to SQL: the join chain, the lit path, the SQL qdbd writes */

overrides/home.html

@@ -32,7 +32,7 @@ <h1>Database diagrams that live in git, <span>readable at 200+&nbsp;tables</span
         <a class="qh-btn qh-btn--primary" href="{{ 'getting-started/' | url }}">Quick start
           <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3 1.4-1.4Z"/></svg></a>
         <a class="qh-btn" href="{{ 'demo/' | url }}">See live demos</a>
-        <a class="qh-btn" href="https://github.com/MarkPhamm/qdbd-dbt-demo">dbt demo repo</a>
+        <a class="qh-textlink" href="https://github.com/MarkPhamm/qdbd-dbt-demo">dbt demo repo →</a>
       </div>
       <div class="qh-install">
         <span class="qh-install__prompt">$</span>
@@ -65,17 +65,19 @@ <h1>Database diagrams that live in git, <span>readable at 200+&nbsp;tables</span
             <svg viewBox="0 0 1440 860" preserveAspectRatio="none"><path pathLength="1" d="M756 183h14M763 183V579M756 579h14M751 191l24-16M751 587l24-16"/></svg>
             <span style="left: 53.6%; top: 46%">26 cols</span>
           </div>
-          <dl class="qh-sheet__title" aria-hidden="true">
-            <dt>drawing</dt><dd>adventureworks-dw</dd>
-            <dt>tables</dt><dd>28</dd>
-            <dt>rev</dt><dd>v{{ config.extra.version }}</dd>
-          </dl>
         </div>
       </div>
-      <div class="qh-callout">
-        <div class="qh-callout__head"><span>FactInternetSales</span><a href="{{ 'demo/adventureworks-dw/' | url }}#t=FactInternetSales">Try it live</a></div>
-        <div class="qh-callout__row"><b>26</b> columns, <b>8</b> foreign keys</div>
-        <div class="qh-callout__foot">Column docs, keys and join paths in every page qdbd builds</div>
+      <div class="qh-hero__under">
+        <div class="qh-callout">
+          <div class="qh-callout__head"><span>FactInternetSales</span><a href="{{ 'demo/adventureworks-dw/' | url }}#t=FactInternetSales">Try it live</a></div>
+          <div class="qh-callout__row"><b>26</b> columns, <b>8</b> foreign keys</div>
+          <div class="qh-callout__foot">Column docs, keys and join paths in every page qdbd builds</div>
+        </div>
+        <dl class="qh-sheet__title" aria-hidden="true">
+          <dt>drawing</dt><dd>adventureworks-dw</dd>
+          <dt>tables</dt><dd>28</dd>
+          <dt>rev</dt><dd>v{{ config.extra.version }}</dd>
+        </dl>
       </div>
     </div>
   </section>

overrides/partials/header.html

@@ -8,7 +8,7 @@
     <a class="qd-version" href="{{ config.repo_url }}/releases/tag/v{{ config.extra.version }}" target="_blank" rel="noopener"
        title="Release notes for v{{ config.extra.version }}">v{{ config.extra.version }}</a>
     <a class="qd-navlink" href="{{ 'guide/' | url }}">Docs</a>
-    <a class="qd-navlink" href="{{ 'demo/' | url }}">Demos</a>
+    <a class="qd-navlink qd-demos" href="{{ 'demo/' | url }}">Demos</a>
     <div class="md-header__title qd-header__title" data-md-component="header-title"></div>
     <a class="qd-navlink qd-github" href="{{ config.repo_url }}" target="_blank" rel="noopener">GitHub
       <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z"/></svg>