From 6e8af0e0558c1affe0ecd812d175f23668815ed0 Mon Sep 17 00:00:00 2001 From: "Minh (Mark) Pham" <99457952+MarkPhamm@users.noreply.github.com> Date: Thu, 12 Nov 2026 15:55:17 +0700 Subject: [PATCH] Website layout: keep header links on narrow screens, move cards off the screenshots, Back to top in a corner. - Header: below 960px only GitHub drops out (it is in the drawer and footer); Docs, Demos and Quick start stay, then fall away on phones. The home page has no nav drawer, so its menu button (an empty overlay) is hidden there. - Back to top sits bottom-right instead of over the text at the top centre. - Hero: the callout and title block sit under the screenshot; dbt demo repo is a text link so the CTAs fit on one row. - PR section: the github-actions comment sits under the diff screenshot. - Home: no prev/next pager, a smaller gap above the closing CTA, FAQ rows span the content width. --- docs/index.md | 1 + docs/stylesheets/extra.css | 21 +++++++++++++++++++-- docs/stylesheets/home.css | 25 ++++++++++++++----------- overrides/home.html | 22 ++++++++++++---------- overrides/partials/header.html | 2 +- 5 files changed, 47 insertions(+), 24 deletions(-) diff --git a/docs/index.md b/docs/index.md index 16d17ab..0a6f7df 100644 --- a/docs/index.md +++ b/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). diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 27bb7b4..d06d2cc 100644 --- a/docs/stylesheets/extra.css +++ b/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); } } diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css index 880d908..5cb4d76 100644 --- a/docs/stylesheets/home.css +++ b/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 */ diff --git a/overrides/home.html b/overrides/home.html index 8aacd1a..48bc679 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -32,7 +32,7 @@

Database diagrams that live in git, readable at 200+ tablesQuick start See live demos - dbt demo repo + dbt demo repo →
$ @@ -65,17 +65,19 @@

Database diagrams that live in git, readable at 200+ tables 26 cols

- -
-
FactInternetSalesTry it live
-
26 columns, 8 foreign keys
-
Column docs, keys and join paths in every page qdbd builds
+
+
+
FactInternetSalesTry it live
+
26 columns, 8 foreign keys
+
Column docs, keys and join paths in every page qdbd builds
+
+
diff --git a/overrides/partials/header.html b/overrides/partials/header.html index 351ef5c..679a9ed 100644 --- a/overrides/partials/header.html +++ b/overrides/partials/header.html @@ -8,7 +8,7 @@ v{{ config.extra.version }} Docs - Demos + Demos
GitHub