Skip to content

Commit f57754d

Browse files
kvlongekvlonge
committed
docs(website): add SQLStack parent-brand attribution
Amp-Thread-ID: https://ampcode.com/threads/T-01a1970a-5666-76e3-9c02-09c919827520
1 parent aed227a commit f57754d

9 files changed

Lines changed: 172 additions & 10 deletions

File tree

‎website/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ The SQLClean website: the homepage at `/` and the documentation at `/docs/`, bui
1313
- `public/fonts/`: self-hosted fonts, each with its licence.
1414
- `recordings/`: the VHS tapes behind the README demo; see `recordings/README.md`.
1515

16+
The footer's SQLStack symbols (`public/assets/sqlstack.png` and `sqlstack-dark.png`) are unchanged
17+
copies from [`sqlstack-io/sqlstack` at `9b37b9e`](https://github.com/sqlstack-io/sqlstack/tree/9b37b9e128d36930e1fe0c5880606525100b228b/assets/icons).
18+
1619
Search uses Pagefind, and `llms.txt`, `llms-small.txt` and `llms-full.txt` are generated at build
1720
time. The Website workflow builds the site and checks its links on every change; it does not deploy.
1821
Cloudflare Pages deploys it: every push to `main` publishes https://sqlclean.io, and every other

‎website/astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default defineConfig({
3636
SiteTitle: './src/components/SiteTitle.astro',
3737
Pagination: './src/components/Pagination.astro',
3838
ThemeSelect: './src/components/ThemeSelect.astro',
39+
Footer: './src/components/Footer.astro',
3940
},
4041
customCss: ['./src/styles/fonts.css', './src/styles/sqlclean.css'],
4142
expressiveCode: {

‎website/public/assets/sqlstack-dark.png‎

5.24 KB
Loading

‎website/public/assets/sqlstack.png‎

5.09 KB
Loading

‎website/public/index.html‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,13 @@
3333
<body>
3434
<header class="site-header">
3535
<div class="wrap">
36-
<a class="brand" href="/" aria-label="SQLClean home">
37-
<img class="logo-for-light" src="assets/logo-light.png" alt="SQLClean" width="139" height="30" />
38-
<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLClean" width="139" height="30" />
39-
</a>
36+
<div class="brand-lockup">
37+
<a class="brand" href="/" aria-label="SQLClean home">
38+
<img class="logo-for-light" src="assets/logo-light.png" alt="SQLClean" width="139" height="30" />
39+
<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLClean" width="139" height="30" />
40+
</a>
41+
<a class="brand-byline" href="https://sqlstack.io">by SQLStack</a>
42+
</div>
4043
<nav class="nav" aria-label="Main">
4144
<a class="hide-sm" href="#how">How it works</a>
4245
<a href="/docs/">Docs</a>
@@ -447,6 +450,19 @@ <h2>Make clean SQL the default</h2>
447450
<a href="https://pypi.org/project/sqlclean/">PyPI</a>
448451
</span>
449452
</div>
453+
<div class="wrap sqlstack-family">
454+
<a class="sqlstack-parent" href="https://sqlstack.io">
455+
<img class="sqlstack-for-light" src="/assets/sqlstack.png" alt="" width="28" height="23" />
456+
<img class="sqlstack-for-dark" src="/assets/sqlstack-dark.png" alt="" width="28" height="23" />
457+
<span>Part of SQLStack</span>
458+
</a>
459+
<nav class="sqlstack-tools" aria-label="SQLStack tools">
460+
<a href="https://sqlbuild.com">SQLBuild</a>
461+
<a href="/">SQLClean</a>
462+
<a href="https://docs.streambuild.dev">SQLTide</a>
463+
<a href="https://fensu.io">Fensu</a>
464+
</nav>
465+
</div>
450466
</footer>
451467

452468
<script>

‎website/public/styles.css‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@
9696
html {
9797
-webkit-text-size-adjust: 100%;
9898
scroll-behavior: smooth;
99+
scroll-padding-top: 88px;
99100
}
100101

101102
body {
@@ -140,7 +141,24 @@ pre {
140141
display: flex;
141142
align-items: center;
142143
justify-content: space-between;
143-
height: 60px;
144+
height: 80px;
145+
}
146+
147+
.brand-lockup {
148+
display: flex;
149+
flex-direction: column;
150+
flex-shrink: 0;
151+
}
152+
153+
.brand-byline {
154+
display: flex;
155+
align-items: center;
156+
min-height: 24px;
157+
margin-inline-start: 41%;
158+
color: var(--muted-foreground);
159+
font-size: 11px;
160+
line-height: 14px;
161+
white-space: nowrap;
144162
}
145163

146164
.brand {
@@ -657,6 +675,39 @@ footer a {
657675
color: var(--muted-foreground);
658676
}
659677

678+
.sqlstack-family {
679+
align-items: center;
680+
margin-top: 20px;
681+
padding-top: 20px;
682+
border-top: 1px solid var(--inner-line);
683+
}
684+
685+
.sqlstack-parent {
686+
display: inline-flex;
687+
align-items: center;
688+
gap: 10px;
689+
}
690+
691+
.sqlstack-parent img {
692+
width: 28px;
693+
height: auto;
694+
}
695+
696+
.sqlstack-for-dark,
697+
:root[data-theme='dark'] .sqlstack-for-light {
698+
display: none;
699+
}
700+
701+
:root[data-theme='dark'] .sqlstack-for-dark {
702+
display: block;
703+
}
704+
705+
.sqlstack-tools {
706+
display: flex;
707+
flex-wrap: wrap;
708+
gap: 8px 20px;
709+
}
710+
660711
@media (max-width: 880px) {
661712
.problem,
662713
.grid,

‎website/src/components/Footer.astro‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
import DefaultFooter from '@astrojs/starlight/components/Footer.astro';
3+
---
4+
5+
<DefaultFooter />
6+
<div class="sqlstack-family">
7+
<a class="sqlstack-parent" href="https://sqlstack.io">
8+
<img class="sqlstack-for-light" src="/assets/sqlstack.png" alt="" width="28" height="23" />
9+
<img class="sqlstack-for-dark" src="/assets/sqlstack-dark.png" alt="" width="28" height="23" />
10+
<span>Part of SQLStack</span>
11+
</a>
12+
<nav class="sqlstack-tools" aria-label="SQLStack tools">
13+
<a href="https://sqlbuild.com">SQLBuild</a>
14+
<a href="/">SQLClean</a>
15+
<a href="https://docs.streambuild.dev">SQLTide</a>
16+
<a href="https://fensu.io">Fensu</a>
17+
</nav>
18+
</div>
19+
20+
<style>
21+
.sqlstack-family {
22+
display: flex;
23+
flex-wrap: wrap;
24+
align-items: center;
25+
justify-content: space-between;
26+
gap: 16px;
27+
margin-top: 20px;
28+
padding-top: 20px;
29+
border-top: 1px solid var(--sqc-line);
30+
font-size: 13px;
31+
}
32+
33+
a {
34+
color: var(--sqc-muted);
35+
text-decoration: none;
36+
}
37+
38+
a:hover {
39+
color: var(--sqc-primary);
40+
}
41+
42+
.sqlstack-parent {
43+
display: inline-flex;
44+
align-items: center;
45+
gap: 10px;
46+
}
47+
48+
img {
49+
width: 28px;
50+
height: auto;
51+
}
52+
53+
.sqlstack-for-dark,
54+
:global(:root[data-theme='dark']) .sqlstack-for-light {
55+
display: none;
56+
}
57+
58+
:global(:root[data-theme='dark']) .sqlstack-for-dark {
59+
display: block;
60+
}
61+
62+
.sqlstack-tools {
63+
display: flex;
64+
flex-wrap: wrap;
65+
gap: 8px 20px;
66+
}
67+
</style>

‎website/src/components/SiteTitle.astro‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@ import logoLight from '../assets/logo-light.png';
44
---
55

66
<div class="site-title">
7-
<a class="logo" href="/" aria-label="SQLClean home">
8-
<img class="logo-for-light" src={logoLight.src} alt="SQLClean" width={111} height={30} />
9-
<img class="logo-for-dark" src={logoDark.src} alt="SQLClean" width={111} height={30} />
10-
</a>
7+
<div class="brand-lockup">
8+
<a class="logo" href="/" aria-label="SQLClean home">
9+
<img class="logo-for-light" src={logoLight.src} alt="SQLClean" width={111} height={30} />
10+
<img class="logo-for-dark" src={logoDark.src} alt="SQLClean" width={111} height={30} />
11+
</a>
12+
<a class="brand-byline" href="https://sqlstack.io">by SQLStack</a>
13+
</div>
1114
<a class="docs" href="/docs/">Docs</a>
1215
</div>
1316

@@ -20,6 +23,27 @@ import logoLight from '../assets/logo-light.png';
2023
min-width: 0;
2124
}
2225

26+
.brand-lockup {
27+
display: flex;
28+
flex-direction: column;
29+
}
30+
31+
.brand-byline {
32+
display: flex;
33+
align-items: center;
34+
min-height: 24px;
35+
margin-inline-start: 41%;
36+
color: var(--sqc-muted);
37+
font-size: 11px;
38+
line-height: 14px;
39+
text-decoration: none;
40+
white-space: nowrap;
41+
}
42+
43+
.brand-byline:hover {
44+
color: var(--sqc-primary);
45+
}
46+
2347
.logo {
2448
display: flex;
2549
}

‎website/src/styles/sqlclean.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
:root {
33
--sl-font: 'Inter', system-ui, sans-serif;
44
--sl-font-mono: 'IBM Plex Mono', 'SQLClean Box Drawing', ui-monospace, monospace;
5-
--sl-nav-height: 60px;
5+
--sl-nav-height: 80px;
66
--sl-content-width: 50rem;
77
--sl-sidebar-width: 18rem;
88
--sqc-toc-width: 16rem;

0 commit comments

Comments
 (0)