Skip to content

Commit 50a08ca

Browse files
cwhite911cwhite911
committed
Started to update styles to match Mkdocs styling
1 parent c2c4f0a commit 50a08ca

File tree

2 files changed

+217
-76
lines changed

2 files changed

+217
-76
lines changed

‎_brand.yml‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,55 +8,6 @@ meta:
88
description: |
99
Bringing advanced geospatial technologies to the world
1010
founded: 1984
11-
typography:
12-
fonts:
13-
- family: Open Sans
14-
source: bunny
15-
- family: Fira Code
16-
source: bunny
17-
base:
18-
family: Open Sans
19-
weight: 400
20-
headings:
21-
family: Open Sans
22-
weight: 500
23-
color: dark_grey
24-
link:
25-
weight: 400
26-
color: secondary
27-
monospace: "Fira Code"
28-
29-
30-
# https://posit-dev.github.io/brand-yml/brand/color.html
31-
color:
32-
palette:
33-
green: "#4cb05b"
34-
alt_green: "#6ed079"
35-
light_green: "#87e991"
36-
dark_green: "#088b36"
37-
blue: "#00393f"
38-
alt_blue: "#27575c"
39-
light_blue: " #4a787d"
40-
dark_blue: "#002024"
41-
grey: "#91908f"
42-
alt_grey: "#d8d8d8"
43-
light_grey: "#f0f0f1"
44-
dark_grey: "#757473"
45-
black: "#021905"
46-
white: "#f7f7f7"
47-
support: "#f3398a"
48-
foreground: black
49-
background: white
50-
primary: green
51-
secondary: blue
52-
tertiary: alt_blue
53-
success: dark_green
54-
info: light_green
55-
warning: light_blue
56-
danger: "#dc3545" # bootsrap5 danger
57-
light: white
58-
dark: black
59-
link: dark_blue
6011

6112
# https://posit-dev.github.io/brand-yml/brand/logo.html
6213
# https://sc.edu/about/offices_and_divisions/digital-accessibility/toolbox/best_practices/alternative_text/logo-alt-text/index.php
@@ -108,15 +59,4 @@ logo:
10859
light: logo-large-no-text-light
10960
dark: logo-large-no-text-dark
11061

111-
defaults:
112-
bootstrap:
113-
# List of theme variables to override
114-
# https://quarto.org/docs/output-formats/html-themes.html
115-
defaults:
116-
navbar-fg: white
117-
navbar-hl: "$brand-alt-blue"
118-
sidebar-fg: "$blue"
119-
sidebar-hl: "$brand-alt-blue"
120-
footer-bg: "$brand-green"
121-
footer-fg: "$brand-white"
12262

‎theme.scss‎

Lines changed: 217 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,221 @@
1+
// GRASS Theme
2+
/* GRASS Variables
3+
Use these variables to customize the GRASS theme.
4+
----------------------------------------------------------------------------- */
5+
/* GRASS Font */
6+
$gs-grass-font: 'Fira Sans Regular', sans-serif;
7+
$gs-grass-font--medium: 'Fira Sans Medium', sans-serif;
8+
$gs-grass-font--bold: 'Fira Sans Bold', sans-serif;
9+
$gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif;
10+
$gs-grass-font--mono: 'Fira Mono', monospace;
11+
12+
/* Primary Color */
13+
$gs-primary-color: rgb(76, 176, 91);
14+
$gs-primary-color--light: rgba(76, 176, 91, 0.541);
15+
$gs-primary-color--lighter: rgba(76, 176, 91, 0.322);
16+
$gs-primary-color--lightest: rgba(76, 176, 91, 0.071);
17+
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 */
108+
$gs-grass-logo-white-simple: url('images/logos/small/[email protected]');
109+
1110
//-- scss:defaults --*/
2-
$grass-font: "Fira Sans", sans-serif;
111+
$primary: $gs-primary-color;
112+
$secondary: $gs-secondary-color;
3113

4-
/*-- scss:rules --*/
5114

115+
116+
$body-bg: $gs-white-color;
117+
$body-color: $gs-black-color;
118+
$link-color: $primary;
119+
120+
$navbar-fg: $gs-white-color;
121+
$navbar-hl: $gs-secondary-alt-color;
122+
123+
$footer-bg: $gs-secondary-color;
124+
$footer-fg: $gs-white-color--light;
125+
126+
$input-bg: $gs-white-base-color;
127+
$popover-bg: $body-bg;
128+
$font-family-sans-serif: $gs-grass-font;
129+
$font-family-monospace: $gs-grass-font--mono;
130+
$font-size-root: 16px;
131+
$toc-font-size: 1rem;
132+
133+
$code-bg: $gs-grey-light-color;
134+
$code-block-bg: $gs-grey-light-color;
135+
136+
// bootstrap
137+
$callout-color-note: $gs-primary-light-color;
138+
139+
main.content > header {
140+
h1 {
141+
color: $gs-secondary-alt-color;
142+
font-family: $gs-grass-font--bold;
143+
font-weight: bold;
144+
font-size: 2.25em;
145+
line-height: 1.3;
146+
margin: 0 0 1em;
147+
}
148+
}
149+
150+
main.content > section {
151+
h2 {
152+
font-family: $gs-grass-font--light;
153+
color: $gs-secondary-light-color;
154+
font-size: 2em;
155+
text-transform: capitalize;
156+
line-height: 1.4;
157+
margin: .64em 0 .64em;
158+
}
159+
}
160+
161+
h3 {
162+
color: $gs-secondary-light-color;
163+
font-size: 1.25em;
164+
font-weight: 600;
165+
letter-spacing: -.01em;
166+
line-height: 1.5;
167+
margin: 1.6em 0 .8em;
168+
}
169+
170+
/*-- scss:rules --*/
6171
ul.pagination li.disabled a,
7172
ul.pagination li.active a {
8-
background-color: $brand-dark-green !important;
9-
color: $brand-white !important;
173+
background-color: $gs-primary-color !important;
174+
color: $gs-white-base-color !important;
175+
}
176+
177+
#quarto-margin-sidebar .quarto-listing-category-title {
178+
color: $gs-secondary-alt-color;
179+
}
180+
181+
.sidebar nav[role=doc-toc]>h2 {
182+
color: $gs-secondary-alt-color;
183+
font-weight: 700;
184+
}
185+
186+
.card {
187+
.card-body {
188+
background-color: $gs-white-base-color;
189+
}
190+
}
191+
192+
.input-group-text {
193+
background-color: $gs-primary-color;
194+
color: $gs-white-base-color;
195+
font-weight: 700;
196+
}
197+
198+
.callout {
199+
&.callout-style-default {
200+
box-shadow: 0 0.2rem 0.5rem $gs-black-color--light,
201+
0 0 0.05rem $gs-black-color--lightest;
202+
transition: box-shadow 125ms;
203+
border-radius: .2rem;
204+
205+
>div.callout-header {
206+
font-weight: 700;
207+
}
208+
209+
.callout-note {
210+
border-color: $gs-primary-light-color;
211+
212+
&.callout-titled {
213+
.callout-icon::before {
214+
background-image: $gs-grass-logo-white-simple;
215+
}
216+
}
217+
}
218+
}
10219
}
11220

12221
.highlight {
@@ -36,26 +245,18 @@ ul.pagination li.active a {
36245
width: 100%;
37246
height: 100%;
38247
border-radius: 60%;
39-
background: linear-gradient(to bottom, $brand-white, $brand-dark-green);
248+
background: linear-gradient(to bottom, $gs-white-color, $gs-primary-dark-color);
40249
opacity: 1;
41250
z-index: -1;
42251
}
43252

44-
.quarto-title-banner {
45-
background-color: $brand-light-green !important;
46-
color: $brand-black !important;
47-
h1 {
48-
color: $brand-black !important;
49-
}
50-
}
51-
52253
.reveal {
53254
h3 {
54-
color: $brand-black !important;
255+
color: $gs-black-color !important;
55256
}
56257
.columns {
57258
.column {
58-
background-color: $brand-grey !important;
259+
background-color: $gs-grey-color !important;
59260
}
60261

61262
}
@@ -69,7 +270,7 @@ ul.pagination li.active a {
69270
}
70271

71272
.text-white {
72-
color: $brand-white !important;
273+
color: $gs-white-color !important;
73274
}
74275

75276
.text-center {

0 commit comments

Comments
 (0)