Skip to content

Commit 434a0f3

Browse files
shenxianpengshenxianpeng
committed
docs: move the site's look into the shared styles
The home page redesign put the paper and ink colors, the light header and the fonts in extra.css, which only this site loads. The product docs sites load shared.css, so they kept Material's default indigo header and Roboto and no longer look like the hub they link back to. Move those rules into shared.css unchanged, and import the fonts there so a site gets them without a template of its own. extra.css keeps the rules only this site uses: the merch grid, the readable width for pages without a left navigation, and the comparison and size-chart tables.
1 parent 909b023 commit 434a0f3

4 files changed

Lines changed: 227 additions & 217 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,6 @@ without updating those repositories:
3838

3939
- `docs/stylesheets/shared.css`, served at <https://cpp-linter.github.io/stylesheets/shared.css>,
4040
is loaded by the docs sites of cpp-linter-action, cpp-linter, clang-tools-pip and cpp-linter-rs.
41+
It carries the site's look (colors, header, fonts), so a change to it changes all of them.
4142
- `docs/install-wheel.sh`, served at <https://cpp-linter.github.io/install-wheel.sh>, is used by
4243
the clang-tools-wheel README and its release workflow.

‎docs/overrides/main.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
{#-
44
The site's fonts, loaded on every page: Instrument Sans for text,
55
JetBrains Mono for code and Bricolage Grotesque for headings. theme.font is
6-
false in mkdocs.yml, so Material loads nothing itself; extra.css points
7-
Material's font variables at these.
6+
false in mkdocs.yml, so Material loads nothing itself; shared.css points
7+
Material's font variables at these. shared.css imports the same URL for the
8+
other docs sites; linking it here too lets the home page fetch the fonts
9+
without waiting for that stylesheet.
810
-#}
911

1012
{% block extrahead %}

‎docs/stylesheets/extra.css‎

Lines changed: 0 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -20,69 +20,6 @@
2020
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
2121
}
2222

23-
/* Code block enhancements */
24-
.md-typeset pre > code {
25-
border-radius: 0.5rem;
26-
}
27-
28-
/* Fonts: loaded in overrides/main.html (theme.font is false) */
29-
:root {
30-
--md-text-font: "Instrument Sans";
31-
--md-code-font: "JetBrains Mono";
32-
}
33-
34-
.md-typeset h1,
35-
.md-typeset h2,
36-
.md-typeset h3,
37-
.md-header__topic:first-child {
38-
font-family: "Bricolage Grotesque", var(--md-text-font-family);
39-
letter-spacing: -0.01em;
40-
}
41-
42-
.md-typeset h1 {
43-
color: var(--md-default-fg-color);
44-
font-weight: 760;
45-
}
46-
47-
.md-typeset h2,
48-
.md-typeset h3 {
49-
font-weight: 700;
50-
}
51-
52-
/* Buttons in the shape and colors of the home page buttons */
53-
.md-typeset .md-button {
54-
padding: 0.6em 1.3em;
55-
background-color: var(--cl-button-bg);
56-
border: 1px solid var(--cl-button-line);
57-
border-radius: 12px;
58-
color: var(--cl-button-fg);
59-
font-weight: 600;
60-
transition: background-color 0.2s, border-color 0.2s;
61-
}
62-
63-
.md-typeset .md-button:focus,
64-
.md-typeset .md-button:hover {
65-
background-color: var(--cl-button-bg);
66-
border-color: var(--cl-button-line-hover);
67-
color: var(--cl-button-fg);
68-
}
69-
70-
.md-typeset .md-button--primary,
71-
.md-typeset .md-button--primary:focus,
72-
.md-typeset .md-button--primary:hover {
73-
border-color: transparent;
74-
color: #fff;
75-
}
76-
77-
.md-typeset .md-button--primary {
78-
background-color: #4051b5;
79-
}
80-
81-
.md-typeset .md-button--primary:focus,
82-
.md-typeset .md-button--primary:hover {
83-
background-color: var(--cl-button-primary-hover);
84-
}
85-
8623
/* Pages without the left navigation keep their text at a readable width */
8724
@media screen and (min-width: 76.25em) {
8825
.md-sidebar--primary[hidden] ~ .md-content {
@@ -109,155 +46,3 @@
10946
.md-typeset .compare table:not([class]) td:first-child {
11047
font-weight: 600;
11148
}
112-
113-
/*
114-
* Light scheme: the paper, ink and light header of the home page.
115-
*/
116-
[data-md-color-scheme="default"] {
117-
--md-default-fg-color: #171a2ede;
118-
--md-default-fg-color--light: #171a2e8f;
119-
--md-default-fg-color--lighter: #171a2e52;
120-
--md-default-fg-color--lightest: #171a2e12;
121-
--md-default-bg-color: #f7f5ef;
122-
--md-code-bg-color: #eeeae0;
123-
--md-code-bg-color--light: #eeeae0b3;
124-
--md-code-bg-color--lighter: #eeeae04d;
125-
--md-footer-bg-color: #171a2e;
126-
--md-footer-bg-color--dark: #10131f;
127-
--md-accent-fg-color: #2b3685;
128-
--md-accent-fg-color--transparent: #2b36851a;
129-
--cl-button-bg: #fff;
130-
--cl-button-line: #d8d3c4;
131-
--cl-button-line-hover: #bdb6a2;
132-
--cl-button-fg: #171a2e;
133-
--cl-button-primary-hover: #2b3685;
134-
}
135-
136-
[data-md-color-scheme="default"] .md-header,
137-
[data-md-color-scheme="default"] .md-tabs {
138-
background-color: #f7f5ef;
139-
color: #171a2e;
140-
}
141-
142-
[data-md-color-scheme="default"] .md-header {
143-
border-bottom: 1px solid #e3dfd3;
144-
}
145-
146-
[data-md-color-scheme="default"] .md-tabs__link {
147-
color: #454a63;
148-
opacity: 1;
149-
}
150-
151-
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link,
152-
[data-md-color-scheme="default"] .md-tabs__link:hover {
153-
color: #171a2e;
154-
}
155-
156-
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
157-
font-weight: 700;
158-
}
159-
160-
[data-md-color-scheme="default"] .md-nav--primary .md-nav__title[for="__drawer"] {
161-
background-color: #f7f5ef;
162-
color: #171a2e;
163-
}
164-
165-
[data-md-color-scheme="default"] .md-nav__source {
166-
background-color: #171a2e;
167-
}
168-
169-
@media screen and (min-width: 60em) {
170-
[data-md-color-scheme="default"] .md-search__form,
171-
[data-md-color-scheme="default"] .md-search__form:hover {
172-
background-color: #fff;
173-
border: 1px solid #d8d3c4;
174-
border-radius: 0.4rem;
175-
}
176-
177-
[data-md-color-scheme="default"] .md-search__input::placeholder {
178-
color: #62677f;
179-
}
180-
181-
[data-md-color-scheme="default"] .md-search__input + .md-search__icon {
182-
color: #454a63;
183-
}
184-
}
185-
186-
/* Dark scheme: the same layout in the ink tones of the home page */
187-
[data-md-color-scheme="slate"] {
188-
--md-default-fg-color: #ece9e1d6;
189-
--md-default-fg-color--light: #ece9e194;
190-
--md-default-fg-color--lighter: #ece9e152;
191-
--md-default-fg-color--lightest: #ece9e11f;
192-
--md-default-bg-color: #16182a;
193-
--md-default-bg-color--light: #16182a8a;
194-
--md-default-bg-color--lighter: #16182a42;
195-
--md-default-bg-color--lightest: #16182a12;
196-
--md-code-bg-color: #1f2237;
197-
--md-code-bg-color--light: #1f2237e6;
198-
--md-code-bg-color--lighter: #1f22378a;
199-
--md-typeset-kbd-border-color: #16182a;
200-
--md-footer-bg-color: #10121f;
201-
--md-footer-bg-color--dark: #0b0d17;
202-
--md-accent-fg-color: #aab5ff;
203-
--md-accent-fg-color--transparent: #aab5ff1a;
204-
--cl-button-bg: #1f2237;
205-
--cl-button-line: #34385a;
206-
--cl-button-line-hover: #565b80;
207-
--cl-button-fg: #ece9e1;
208-
--cl-button-primary-hover: #5465c9;
209-
}
210-
211-
[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
212-
--md-typeset-a-color: #8e9cf5;
213-
}
214-
215-
[data-md-color-scheme="slate"] .md-header,
216-
[data-md-color-scheme="slate"] .md-tabs {
217-
background-color: #16182a;
218-
color: #ece9e1;
219-
}
220-
221-
[data-md-color-scheme="slate"] .md-header {
222-
border-bottom: 1px solid #2b2e45;
223-
}
224-
225-
[data-md-color-scheme="slate"] .md-tabs__link {
226-
color: #b3b6c9;
227-
opacity: 1;
228-
}
229-
230-
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
231-
[data-md-color-scheme="slate"] .md-tabs__link:hover {
232-
color: #fff;
233-
}
234-
235-
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
236-
font-weight: 700;
237-
}
238-
239-
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] {
240-
background-color: #16182a;
241-
color: #ece9e1;
242-
}
243-
244-
[data-md-color-scheme="slate"] .md-nav__source {
245-
background-color: #10121f;
246-
}
247-
248-
@media screen and (min-width: 60em) {
249-
[data-md-color-scheme="slate"] .md-search__form,
250-
[data-md-color-scheme="slate"] .md-search__form:hover {
251-
background-color: #1f2237;
252-
border: 1px solid #2b2e45;
253-
border-radius: 0.4rem;
254-
}
255-
256-
[data-md-color-scheme="slate"] .md-search__input::placeholder {
257-
color: #9b9eb3;
258-
}
259-
260-
[data-md-color-scheme="slate"] .md-search__input + .md-search__icon {
261-
color: #b3b6c9;
262-
}
263-
}

0 commit comments

Comments
 (0)