Skip to content

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

Merged
MarkPhamm merged 1 commit into
mainfrom
fix/100-101-site-layout
Nov 12, 2026
Merged

MarkPhamm merged 1 commit into
mainfrom
fix/100-101-site-layout

Conversation

@MarkPhamm

@MarkPhamm MarkPhamm commented Nov 12, 2026 •

Copy link
Copy Markdown
Owner

Fixes #100
Fixes #101

Changes

  • Header (extra.css, partials/header.html):
    • Below 960px only GitHub drops out, since it's in the drawer and the footer.
    • Docs, Demos and Quick start stay; Demos goes below 544px, Docs below 480px, and Quick start below 360px.
    • The home page has no nav drawer, so its hamburger (an empty overlay) is hidden there. It stays on docs pages from 960px to 1220px, where it opens the docs nav.
  • Back to top: bottom-right instead of top-centre. It needs top: auto !important because Material sets top inline.
  • Hero:
    • The FactInternetSales callout and the drawing/tables/rev title block sit in a row under the screenshot instead of on it.
    • dbt demo repo is a text link, so the three CTAs fit on one row at 1126px and wider. Between 961px and about 1100px, and on phones, the link wraps under the two buttons instead of a lone button.
  • PR section: the github-actions comment is under the diff screenshot at every width.
  • Home page footer: hide: footer drops the Next → Guide pager.
  • Home page spacing: the closing CTA's top padding goes from 136px to 96px. FAQ rows span the content width; answers stay at 820px for line length.

Verified. Playwright, system Chrome, local mkdocs build --strict:

width header overflow (home / guide) hero CTA rows
320 0 / 0 px 2 (phone)
375 0 / 0 px 2 (phone)
740 0 / 0 px 1
900 0 / 0 px 1
1126 0 / 0 px 1 (was 2)

Screenshots checked at 375, 740, 1126 and 1440: callout, title block and PR comment no longer cover the images; Back to top is in the corner; no pager on the home page.

Not changed

…he 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.
@github-actions

Copy link
Copy Markdown

Schema changes: origin/main → working tree

No schema changes.

Interactive diagram with changes highlighted: download the erd artifact from this run. Generated by qdbd.

@MarkPhamm
MarkPhamm merged commit 005da7c into main Nov 12, 2026
13 checks passed
@MarkPhamm
MarkPhamm deleted the fix/100-101-site-layout branch November 12, 2026 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Website: header, hero button and footer layout polish Website: floating cards and 'Back to top' pill cover content

1 participant