Skip to content

Commit fd14bf6

Browse files
gvwilsongvwilson
committed
feat: add some CSS styling for homegrown test pages
1 parent 86f5f55 commit fd14bf6

File tree

4 files changed

+268
-1
lines changed

4 files changed

+268
-1
lines changed

‎Makefile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ stubs: ${SCHEMA}
6868
--pages ${REF_PAGES} \
6969
--schema ${SCHEMA} \
7070
--verbose
71+
cp assets/*.css ${REF_PAGES}
7172

7273
## validate: check the generated HTML
7374
validate:

‎assets/mccole.css

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
/* Style variables */
2+
:root {
3+
--border-thin: solid 1px;
4+
--border-medium: solid 3px;
5+
--color-border: gray;
6+
--color-background: white;
7+
--color-background-code: whitesmoke;
8+
--color-link: #000060;
9+
--color-text: black;
10+
11+
--expand: 120%;
12+
13+
--height-half-line: 0.75ex;
14+
15+
--width-li-adjust: 1rem;
16+
--width-ol-adjust: 0.5rem;
17+
--width-ul-adjust: 0.2rem;
18+
--width-padding: 5px;
19+
--width-page: 72rem;
20+
--width-page-margin: 1rem;
21+
22+
--stamp-blue-dark: #1B2A83;
23+
--stamp-blue-light: #BABDD8;
24+
--stamp-brown-dark: #5F483C;
25+
--stamp-brown-light: #CEC7C3;
26+
--stamp-green-dark: #7F9971;
27+
--stamp-green-light: #A7E0A3;
28+
--stamp-orange-dark: #AD7353;
29+
--stamp-orange-light: #E5D4CB;
30+
--stamp-purple-dark: #7D6E87;
31+
--stamp-purple-light: #D6D2DA;
32+
--stamp-red-dark: #8B000F;
33+
--stamp-red-light: #DAB3B7;
34+
}
35+
36+
/* Generic coloring */
37+
.shaded {
38+
background-color: var(--color-background-code);
39+
}
40+
41+
/* Generic text alignment */
42+
.left { text-align: left; }
43+
.center { text-align: center; }
44+
.right { text-align: right; }
45+
46+
/* Flex grid */
47+
.row {
48+
display: flex;
49+
flex-flow: row wrap;
50+
width: 100%
51+
}
52+
.row > * {
53+
flex: 1; /* allow children to grow when space available */
54+
}
55+
56+
.col-1 { flex-basis: 8.33%; }
57+
.col-2 { flex-basis: 16.66%; }
58+
.col-3 { flex-basis: 25%; }
59+
.col-4 { flex-basis: 33.33%; }
60+
.col-5 { flex-basis: 41.66%; }
61+
.col-6 { flex-basis: 50%; }
62+
.col-7 { flex-basis: 58.33%; }
63+
.col-8 { flex-basis: 66.66%; }
64+
.col-9 { flex-basis: 75%; }
65+
.col-10 { flex-basis: 83.33%; }
66+
.col-11 { flex-basis: 91.66%; }
67+
.col-12 { flex-basis: 100%; }
68+
69+
/* Hyperlinks */
70+
a {
71+
color: var(--color-link);
72+
}
73+
74+
/* Block quotes */
75+
blockquote {
76+
border: var(--border-medium) var(--color-border);
77+
padding-left: var(--width-page-margin);
78+
padding-right: var(--width-page-margin);
79+
}
80+
81+
/* Page body */
82+
body {
83+
background-color: var(--color-background);
84+
color: var(--color-text);
85+
font-family: sans-serif;
86+
font-size: var(--expand);
87+
line-height: var(--expand);
88+
margin: var(--width-page-margin);
89+
max-width: var(--width-page);
90+
}
91+
92+
/* Code snippets */
93+
code {
94+
background-color: var(--color-background-code);
95+
}
96+
97+
/* Definitions in definition lists */
98+
dd {
99+
margin-bottom: var(--height-half-line);
100+
}
101+
dd:last-of-type {
102+
margin-bottom: 0px;
103+
}
104+
105+
/* Figures */
106+
figure {
107+
display: flex;
108+
flex-direction: column;
109+
align-items: center;
110+
text-align: center;
111+
}
112+
113+
figure img {
114+
max-width: 100%;
115+
height: auto;
116+
}
117+
118+
figcaption {
119+
margin-top: var(--height-half-line);
120+
}
121+
122+
/* Footer */
123+
footer {
124+
border-top: var(--border-thin) var(--color-border);
125+
margin-top: var(--height-half-line);
126+
padding-top: var(--height-half-line);
127+
text-align: center;
128+
}
129+
130+
/* Level-1 heading */
131+
h1 {
132+
text-align: center;
133+
}
134+
135+
/* Other headings */
136+
h2, h3, h4, h5, h6 {
137+
font-style: italic;
138+
}
139+
140+
/* Navigation */
141+
nav {
142+
background-color: var(--color-background-code);
143+
}
144+
145+
/* Ordered lists */
146+
ol {
147+
margin-left: var(--width-ol-adjust);
148+
padding-left: var(--width-ol-adjust);
149+
}
150+
ol li {
151+
margin-left: var(--width-li-adjust);
152+
}
153+
ol.appendices {
154+
list-style-type: upper-alpha;
155+
}
156+
ol.chapters {
157+
}
158+
159+
/* Subtitle */
160+
p.subtitle {
161+
font-weight: bold;
162+
font-style: italic;
163+
text-align: center;
164+
}
165+
166+
/* Code blocks */
167+
pre {
168+
border: var(--border-thin) var(--color-border);
169+
padding: var(--width-padding);
170+
background-color: var(--color-background-code);
171+
}
172+
173+
/* Generic output */
174+
pre[class*='language'] {
175+
border-left: var(--border-medium);
176+
border-top: var(--border-thin);
177+
border-bottom: var(--border-thin);
178+
border-right: 0px;
179+
padding-left: var(--width-padding);
180+
}
181+
182+
/* Data files */
183+
pre.language-csv,
184+
pre.language-json,
185+
pre.language-md,
186+
pre.language-toml,
187+
pre.language-yml {
188+
border-color: var(--stamp-orange-light);
189+
}
190+
191+
/* JavaScript */
192+
pre.language-js {
193+
border-color: var(--stamp-blue-light);
194+
}
195+
196+
/* Output */
197+
pre.language-out {
198+
border-color: var(--stamp-brown-light);
199+
font-style: italic;
200+
}
201+
202+
/* Python */
203+
pre.language-py {
204+
border-color: var(--stamp-blue-light);
205+
}
206+
207+
/* Shell */
208+
pre.language-sh {
209+
border-color: var(--stamp-green-light);
210+
}
211+
212+
/* SQL */
213+
pre.language-sql {
214+
border-color: var(--stamp-red-light);
215+
}
216+
217+
/* Transcripts */
218+
pre.language-text {
219+
border-color: var(--stamp-purple-light);
220+
}
221+
222+
223+
/* Tables */
224+
table {
225+
border-collapse: collapse;
226+
caption-side: bottom;
227+
margin-left: auto;
228+
margin-right: auto;
229+
}
230+
th, td {
231+
padding: var(--width-padding);
232+
vertical-align: top;
233+
border: var(--border-thin);
234+
min-width: 8rem;
235+
}
236+
237+
/* Unordered lists */
238+
ul {
239+
list-style-type: disc;
240+
margin-left: var(--width-ul-adjust);
241+
padding-left: var(--width-ul-adjust);
242+
}
243+
ul li {
244+
margin-left: var(--width-li-adjust);
245+
}
246+
247+
.error-message {
248+
color: red;
249+
font-weight: bold;
250+
}
251+
252+
/* Dark mode disabled for now */
253+
/*
254+
@media (prefers-color-scheme: dark) {
255+
:root {
256+
--color-background: #202020;
257+
--color-background-code: #000060;
258+
--color-text: white;
259+
--color-link: lightgray;
260+
}
261+
}
262+
*/

‎mkdocs-vanilla.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ site_dir: docs
88
theme:
99
name: null
1010
custom_dir: theme
11+
extra_css:
12+
- mccole.css
1113

1214
plugins:
1315
- exclude:

‎theme/main.jinja

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html>
33
<head>
44
{% block head_title %}<title>{{page["title"]}}</title>{% endblock %}
5-
{% block head_includes %}{% endblock %}
5+
{% block head_includes %}
6+
<link href="{{base_url}}/mccole.css" rel="stylesheet" type="text/css"/>
7+
{% endblock %}
68
</head>
79
<body>
810
<main>

0 commit comments

Comments
 (0)