Skip to content

Commit 8131c8d

Browse files
kvlongekvlonge
authored
docs(website): add SQLStack parent-brand attribution (#27)
Add the approved linked SQLStack byline, balanced 80px header, and family footer to the homepage and docs. Preserve SQLClean styling, docs offsets and pagination. Keep product README promotion out of scope.
1 parent aed227a commit 8131c8d

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)