Skip to content

Commit 8d3187a

Browse files
cwhite911cwhite911
authored
docs: Synchronize MkDocs styles with brand (#5586)
1 parent 79c4769 commit 8d3187a

File tree

2 files changed

+239
-86
lines changed

2 files changed

+239
-86
lines changed

‎man/mkdocs/grassdocs.css

Lines changed: 239 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,110 @@
1-
:root > * {
1+
:root>* {
22

33
/* GRASS Variables
44
Use these variables to customize the GRASS theme.
55
----------------------------------------------------------------------------- */
6-
--gs-osgeo-blue: rgb(0, 58, 64); /* OSGeo Blue */
7-
--gs-support-color: rgb(243, 57, 138); /* Pink */
8-
--gs-support-color--dark: rgba(243, 57, 138, 0.541);
9-
--gs-support-color--light: rgba(243, 57, 138, 0.322);
10-
--gs-white-color: rgb(255, 255, 255); /* White */
11-
--gs-white-color--light: rgba(255, 255, 255, 0.541);
12-
--gs-white-color--lighter: rgba(255, 255, 255, 0.322);
13-
--gs-white-color--lightest: rgba(255, 255, 255, 0.071);
14-
--gs-black-color: rgb(0, 0, 0); /* Black */
6+
/* GRASS Font */
7+
--gs-grass-font: 'Fira Sans Regular', sans-serif;
8+
--gs-grass-font--medium: 'Fira Sans Medium', sans-serif;
9+
--gs-grass-font--bold: 'Fira Sans Bold', sans-serif;
10+
--gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif;
1511

16-
--gs-primary-color: rgb(76, 176, 91); /* Dark green */
12+
/* Primary Color */
13+
--gs-primary-color: rgb(76, 176, 91);
1714
--gs-primary-color--light: rgba(76, 176, 91, 0.541);
1815
--gs-primary-color--lighter: rgba(76, 176, 91, 0.322);
1916
--gs-primary-color--lightest: rgba(76, 176, 91, 0.071);
20-
--gs-primary-color-light: rgba(158, 210, 156, 1); /* Light green */
21-
--gs-primary-color-light--light: rgba(158, 210, 156, 0.541);
22-
--gs-primary-color-light--lighter: rgba(158, 210, 156, 0.322);
23-
--gs-primary-color-light--lightest: rgba(158, 210, 156, 0.071);
24-
--gs-primary-color-dark: rgba(8, 139, 54, 1); /* Dark green */
25-
--gs-secondary-color: var(--gs-osgeo-blue); /* OSGeo Blue */
26-
--gs-secondary-color--light: rgba(0, 58, 64, 0.541);
27-
--gs-secondary-color--lighter: rgba(0, 58, 64, 0.322);
28-
--gs-secondary-color--lightest: rgba(0, 58, 64, 0.071);
29-
--gs-primary-bg-color: var(--gs-white-color); /* White */
30-
--gs-primary-bg-color-dark: rgba(135, 135, 135, 0.1);
3117

18+
/* Primary Alt Color */
19+
--gs-primary-alt-color: rgb(110, 208, 121);
20+
--gs-primary-alt-color--light: rgba(110, 208, 121, 0.541);
21+
--gs-primary-alt-color--lighter: rgba(110, 208, 121, 0.322);
22+
--gs-primary-alt-color--lightest: rgba(110, 208, 121, 0.071);
23+
24+
/* Primary Light Color */
25+
--gs-primary-light-color: rgb(135, 233, 145);
26+
--gs-primary-light-color--light: rgba(135, 233, 145, 0.541);
27+
--gs-primary-light-color--lighter: rgba(138, 233, 145, 0.322);
28+
--gs-primary-light-color--lightest: rgba(138, 233, 145, 0.071);
29+
30+
/* Primary Dark Color */
31+
--gs-primary-dark-color: rgb(8, 139, 54);
32+
--gs-primary-dark-color--light: rgba(8, 139, 54, 0.541);
33+
--gs-primary-dark-color--lighter: rgba(8, 139, 54, 0.322);
34+
--gs-primary-dark-color--lightest: rgba(8, 139, 54, 0.071);
35+
36+
/* Secondary Color */
37+
--gs-secondary-color: rgb(0, 57, 63);
38+
--gs-secondary-color--light: rgba(0, 57, 63, 0.541);
39+
--gs-secondary-color--lighter: rgba(0, 57, 63, 0.322);
40+
--gs-secondary-color--lightest: rgba(0, 57, 63, 0.071);
41+
42+
/* Secondary Alt Color */
43+
--gs-secondary-alt-color: rgb(39, 87, 92);
44+
--gs-secondary-alt-color--light: rgba(39, 87, 92, 0.541);
45+
--gs-secondary-alt-color--lighter: rgba(39, 87, 92, 0.322);
46+
--gs-secondary-alt-color--lightest: rgba(39, 87, 92, 0.071);
47+
48+
/* Secondary Light Color */
49+
--gs-secondary-light-color: rgb(74, 120, 125);
50+
--gs-secondary-light-color--light: rgba(74, 121, 127, 0.541);
51+
--gs-secondary-light-color--lighter: rgba(74, 121, 127, 0.322);
52+
--gs-secondary-light-color--lightest: rgba(74, 121, 127, 0.071);
53+
54+
/* Secondary Dark Color */
55+
--gs-secondary-dark-color: rgb(0, 32, 36);
56+
--gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541);
57+
--gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322);
58+
--gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071);
59+
60+
/* Special Colors */
61+
--gs-support-color: rgb(243, 57, 138);
62+
--gs-support-color--dark: rgba(243, 57, 138, 0.541);
63+
--gs-support-color--light: rgba(243, 57, 138, 0.322);
64+
--gs-yard-sign-color: rgb(116, 93, 2);
65+
66+
/* White */
67+
--gs-white-base-color: rgb(255, 255, 255);
68+
--gs-white-color: rgb(247, 247, 247);
69+
--gs-white-color--light: rgba(247, 247, 247, 0.541);
70+
--gs-white-color--lighter: rgba(247, 247, 247, 0.322);
71+
--gs-white-color--lightest: rgba(247, 247, 247, 0.071);
72+
73+
/* Black */
74+
--gs-black-base-color: rgb(0, 0, 0);
75+
--gs-black-color: rgb(2, 25, 5);
76+
--gs-black-color--light: rgba(2, 25, 5, 0.541);
77+
--gs-black-color--lighter: rgba(2, 25, 5, 0.322);
78+
--gs-black-color--lightest: rgba(2, 25, 5, 0.071);
79+
80+
/* Grey */
81+
--gs-grey-color: rgb(145, 144, 143);
82+
--gs-grey-color-light: rgba(145, 144, 143, 0.541);
83+
--gs-grey-color-lighter: rgba(145, 144, 143, 0.322);
84+
--gs-grey-color-lightest: rgba(145, 144, 143, 0.071);
85+
86+
/* Grey Alt */
87+
--gs-grey-alt-color: rgb(216, 216, 216);
88+
--gs-grey-alt-color--light: rgba(216, 216, 216, 0.541);
89+
--gs-grey-alt-color--lighter: rgba(216, 216, 216, 0.322);
90+
--gs-grey-alt-color--lightest: rgba(216, 216, 216, 0.071);
91+
92+
/* Grey Light */
93+
--gs-grey-light-color: rgb(240, 240, 241);
94+
--gs-grey-light-color--light: rgba(240, 240, 241, 0.541);
95+
--gs-grey-light-color--lighter: rgba(240, 240, 241, 0.322);
96+
--gs-grey-light-color--lightest: rgba(240, 240, 241, 0.071);
97+
98+
/* Grey Dark */
99+
--gs-grey-dark-color: rgb(78, 77, 76);
100+
--gs-grey-dark-color--light: rgba(78, 77, 76, 0.541);
101+
--gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322);
102+
--gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071);
103+
104+
/* Images */
105+
--gs-grass-background-image: url("/images/logos/banner.jpg");
106+
107+
/* Icons */
32108
--md-admonition-icon--grass-icon: url('grass_logo.svg');
33109

34110

@@ -43,36 +119,60 @@
43119

44120
/* Default Colors */
45121
/* ----------------------------------------------------------------------------- */
46-
--md-default-fg-weight: 800;
122+
--md-text-font-family: var(--gs-grass-font);
123+
--md-text-font: var(--gs-grass-font);
124+
--md-code-font: var(--gs-grass-font);
125+
--md-default-fg-weight: 400;
126+
127+
--md-hue: 225deg;
128+
--md-default-fg-color: var(--gs-black-color);
129+
--md-default-fg-color--light: var(--gs-black-color--light);
130+
--md-default-fg-color--lighter: var(--gs-black-color--lighter);
131+
--md-default-fg-color--lightest: var(--gs-black-color--lightest);
132+
133+
--md-default-bg-color: var(--gs-white-color);
134+
--md-default-bg-color--light: var(--gs-white-color--light);
135+
--md-default-bg-color--lighter: var(--gs-white-color--lighter);
136+
--md-default-bg-color--lightest: var(--gs-white-color--lightest);
47137

48138
/* Primary color shades */
49139
/* ----------------------------------------------------------------------------- */
50-
--md-primary-fg-color: var(--gs-primary-color); /* Dark green */
51-
--md-primary-fg-color--light: var(--gs-primary-color--light);
52-
--md-primary-fg-color--dark: var(--gs-primary-color-dark);
53-
--md-primary-bg-color: var(--gs-white-color); /* Includes color for the navbar text */
54-
--md-primary-bg-color--light: var(--gs-white-color--light);
140+
--md-primary-fg-color: var(--gs-primary-color);
141+
--md-primary-fg-color--light: var(--gs-primary-color--light);
142+
--md-primary-fg-color--dark: var(--gs-primary-dark-color);
143+
--md-primary-bg-color: var(--gs-white-color);
144+
/* Includes color for the navbar text */
145+
--md-primary-bg-color--light: var(--gs-white-color--light);
55146

56147
/* Accent Colors */
57148
/* ----------------------------------------------------------------------------- */
58-
--md-accent-fg-color: var(--gs-secondary-color); /* Link color on hover */
59-
--md-accent-fg-color--transparent: var(--gs-secondary-color--light);
60-
--md-accent-bg-color: var(--gs-white-color);
61-
--md-accent-bg-color--light: var(--gs-primary-color--light);
149+
--md-accent-fg-color: var(--gs-primary-dark-color); /* Link color on hover */
150+
--md-accent-fg-color--transparent: var(--gs-primary-alt-color--light);
151+
--md-accent-bg-color: var(--gs-white-color);
152+
--md-accent-bg-color--light: var(--gs-primary-color--light);
62153

63154
/* Footer */
64155
/* ----------------------------------------------------------------------------- */
65-
--md-footer-fg-color: var(--gs-secondary-color);
66-
--md-footer-fg-color--light: var(--gs-white-color);
67-
--md-footer-fg-color--lighter: var(--gs-white-color);
68-
--md-footer-bg-color: var(--gs-primary-color-light--lightest);;
69-
--md-footer-bg-color--light: var(--gs-primary-color-light--light);
70-
--md-footer-bg-color--dark: var(--gs-primary-color);
156+
--md-footer-fg-color: var(--gs-white-color--light);
157+
--md-footer-fg-color--light: var(--gs-white-color);
158+
--md-footer-fg-color--lighter: var(--gs-white-color);
159+
--md-footer-bg-color: var(--gs-primary-light-color--lightest);
160+
--md-footer-bg-color--light: var(--gs-primary-light-color--light);
161+
--md-footer-bg-color--dark: var(--gs-secondary-color);
71162

72163
/* Typeset Colors */
73164
/* ----------------------------------------------------------------------------- */
74-
--md-typeset-a-color: var(--gs-secondary-color); /* Link color */
75-
--md-typeset-a-color--hover: var(--gs-secondary-color--light); /* Not sure */
165+
--md-typeset-a-color: var(--gs-primary-color);
166+
--md-typeset-a-color--hover: var(--gs-primary-alt-color);
167+
--md-typeset-color: var(--md-default-fg-color);
168+
--md-typeset-del-color: #f5503d26;
169+
--md-typeset-ins-color: #0bd57026;
170+
--md-typeset-kbd-color: #fafafa;
171+
--md-typeset-kbd-accent-color: #fff;
172+
--md-typeset-kbd-border-color: #b8b8b8;
173+
--md-typeset-mark-color: #ffff0080;
174+
--md-typeset-table-color: var(--gs-grey-alt-color);
175+
--md-typeset-table-color--light: var(--gs-grey-alt-color--light);
76176

77177
/* Mermaid colors */
78178
/* ----------------------------------------------------------------------------- */
@@ -103,49 +203,41 @@
103203
--md-mermaid-sequence-number-bg-color: var(--md-mermaid-node-fg-color);
104204
--md-mermaid-sequence-number-fg-color: var(--md-accent-bg-color);
105205

106-
/* Unset Colors */
206+
207+
/* Code Highlighting */
107208
/* ----------------------------------------------------------------------------- */
108-
--md-hue: 225deg;
109-
--md-default-fg-color: #000000de;
110-
--md-default-fg-color--light: #0000008a;
111-
--md-default-fg-color--lighter: #00000052;
112-
--md-default-fg-color--lightest: #00000012;
113-
--md-default-bg-color: #fff;
114-
--md-default-bg-color--light: #ffffffb3;
115-
--md-default-bg-color--lighter: #ffffff4d;
116-
--md-default-bg-color--lightest: #ffffff1f;
117-
--md-code-fg-color: #36464e;
118-
--md-code-bg-color: #f5f5f5;
119-
--md-code-hl-color: #4287ff;
120-
--md-code-hl-color--light: #4287ff1a;
121-
--md-code-hl-number-color: #d52a2a;
122-
--md-code-hl-special-color: #db1457;
123-
--md-code-hl-function-color: #a846b9;
124-
--md-code-hl-constant-color: #6e59d9;
125-
--md-code-hl-keyword-color: #3f6ec6;
126-
--md-code-hl-string-color: #1c7d4d;
127-
--md-code-hl-name-color: var(--md-code-fg-color);
128-
--md-code-hl-operator-color: var(--md-default-fg-color--light);
209+
--md-code-fg-color: var(--gs-secondary-color);
210+
--md-code-bg-color: var(--gs-grey-light-color);
211+
--md-code-hl-color: var(--gs-secondary-light-color);
212+
--md-code-hl-color--light: var(--gs-grey-dark-color);
213+
--md-code-hl-number-color: var(--gs-primary-dark-color);
214+
--md-code-hl-special-color: var(--gs-secondary-light-color);
215+
--md-code-hl-function-color: var(--gs-secondary-alt-color);
216+
--md-code-hl-keyword-color: var(--gs-primary-color);
217+
--md-code-hl-string-color: var(--gs-primary-color);
218+
--md-code-hl-constant-color: var(--gs-primary-color);
219+
--md-code-hl-name-color: var(--gs-secondary-alt-color);
220+
--md-code-hl-operator-color: var(--gs-secondary-light-color);
129221
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
130-
--md-code-hl-comment-color: var(--md-default-fg-color--light);
222+
--md-code-hl-comment-color: var(--gs-grey-color);
131223
--md-code-hl-generic-color: var(--md-default-fg-color--light);
132-
--md-code-hl-variable-color: var(--md-default-fg-color--light);
133-
--md-typeset-color: var(--md-default-fg-color);
134-
--md-typeset-del-color: #f5503d26;
135-
--md-typeset-ins-color: #0bd57026;
136-
--md-typeset-kbd-color: #fafafa;
137-
--md-typeset-kbd-accent-color: #fff;
138-
--md-typeset-kbd-border-color: #b8b8b8;
139-
--md-typeset-mark-color: #ffff0080;
140-
--md-typeset-table-color: #0000001f;
141-
--md-typeset-table-color--light: rgba(0, 0, 0, .035);
224+
--md-code-hl-variable-color: var(--gs-secondary-alt-color);
225+
226+
/* Admonition Colors */
227+
/* ----------------------------------------------------------------------------- */
142228
--md-admonition-fg-color: var(--md-default-fg-color);
143229
--md-admonition-bg-color: var(--md-default-bg-color);
144-
--md-warning-fg-color: #000000de;
145-
--md-warning-bg-color: #ff9;
146-
--md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a;
147-
--md-shadow-z2: 0 0.2rem 0.5rem #0000001a, 0 0 0.05rem #00000040;
148-
--md-shadow-z3: 0 0.2rem 0.5rem #0003, 0 0 0.05rem #00000059;
230+
231+
/* Warning Colors */
232+
/* ----------------------------------------------------------------------------- */
233+
--md-warning-fg-color: var(--gs-primary-alt-color);
234+
--md-warning-bg-color: var(--gs-primary-alt-color--light);
235+
236+
/* Shadow Colors */
237+
/* ----------------------------------------------------------------------------- */
238+
--md-shadow-z1: 0 0.2rem 0.5rem var(--gs-black-color--light), 0 0 0.05rem var(--gs-black-color--lightest);
239+
--md-shadow-z2: 0 0.2rem 0.5rem var(--gs-black-color--lightest), 0 0 0.05rem var(--gs-black-color--lighter);
240+
--md-shadow-z3: 0 0.2rem 0.5rem var(--gs-black-color--lighter), 0 0 0.05rem var(--gs-black-color--light);
149241
}
150242

151243
.md-header {
@@ -170,6 +262,64 @@
170262
height: 3rem;
171263
}
172264

265+
.md-tabs {
266+
background-color: var(--md-primary-fg-color);
267+
color: var(--gs-white-base-color);
268+
display: block;
269+
line-height: 1.3;
270+
overflow: auto;
271+
width: 100%;
272+
z-index: 3;
273+
}
274+
275+
/* Changes the header color of the table of contents */
276+
.md-nav__title {
277+
color: var(--gs-secondary-alt-color);
278+
display: block;
279+
font-weight: 700;
280+
overflow: hidden;
281+
padding: 0 .6rem;
282+
text-overflow: ellipsis;
283+
}
284+
285+
/* Changes the header color of the nav bar */
286+
.md-nav--lifted>.md-nav__list>.md-nav__item>[for] {
287+
color: var(--gs-secondary-alt-color);
288+
}
289+
290+
/* Typesets */
291+
.md-typeset h1 {
292+
color: var(--gs-secondary-alt-color);
293+
font-family: var(--gs-grass-font--bold);
294+
font-weight: bold;
295+
font-size: 2.25em;
296+
line-height: 1.3;
297+
margin: 0 0 1em;
298+
}
299+
300+
.md-typeset h2 {
301+
font-family: var(--gs-grass-font--light);
302+
color: var(--gs-secondary-light-color);
303+
font-size: 2em;
304+
text-transform: capitalize;
305+
line-height: 1.4;
306+
margin: .64em 0 .64em;
307+
}
308+
309+
.md-typeset h3 {
310+
color: var(--gs-secondary-light-color);
311+
font-size: 1.25em;
312+
font-weight: 600;
313+
letter-spacing: -.01em;
314+
line-height: 1.5;
315+
margin: 1.6em 0 .8em;
316+
}
317+
318+
.md-typeset a:focus,
319+
.md-typeset a:hover {
320+
color: var(--md-accent-fg-color);
321+
}
322+
173323
.md-typeset table:not([class]) tbody tr:hover {
174324
background-color: transparent;
175325
}
@@ -185,9 +335,11 @@
185335
/* Custom GRASS support button style: */
186336
.md-button.gs-support-button {
187337
color: var(--gs-support-color);
338+
margin: 0 0.25rem;
188339
}
189340

190-
.md-button.gs-support-button:focus, .md-button.gs-support-button:hover {
341+
.md-button.gs-support-button:focus,
342+
.md-button.gs-support-button:hover {
191343
background-color: var(--gs-support-color);
192344
border-color: var(--gs-support-color);
193345
color: var(--gs-white-color);
@@ -196,15 +348,17 @@
196348
/* Custom GRASS admonition (callout) style: */
197349
.md-typeset .admonition.grass-tip,
198350
.md-typeset details.grass-tip {
199-
border-color: var(--gs-primary-color-light);
351+
border-color: var(--gs-primary-light-color);
200352
}
201-
.md-typeset .grass-tip > .admonition-title,
202-
.md-typeset .grass-tip > summary {
353+
354+
.md-typeset .grass-tip>.admonition-title,
355+
.md-typeset .grass-tip>summary {
203356
background-color: var(--gs-primary-color--lightest);
204357
}
205-
.md-typeset .grass-tip > .admonition-title::before,
206-
.md-typeset .grass-tip > summary::before {
358+
359+
.md-typeset .grass-tip>.admonition-title::before,
360+
.md-typeset .grass-tip>summary::before {
207361
background-color: var(--gs-primary-color);
208362
-webkit-mask-image: var(--md-admonition-icon--grass-icon);
209-
mask-image: var(--md-admonition-icon--grass-icon);
363+
mask-image: var(--md-admonition-icon--grass-icon);
210364
}

0 commit comments

Comments
 (0)