-
Notifications
You must be signed in to change notification settings - Fork 0
/
moose-mapping-theme.css
193 lines (177 loc) · 6.06 KB
/
moose-mapping-theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
@import url('https://fonts.googleapis.com/css2?family=Alata&family=Fira+Code&family=Source+Serif+Pro&display=swap');
/* First serif font was computer modern, thanks https://github.com/vsalvino/computer-modern */
/*@import url("https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css");*/
html {
/*-- Main font sizes --*/
--title-size: 40px; /* edit */
--body-size: 1rem; /* edit */
--code-size: 0.8rem; /* edit */
--aside-size: 12px;
--fig-cap-size: 13px;
/*-- Main font colors --*/
--title-color: #000000;
--header-color: rgba(0, 0, 0, 0.8);
--body-color: rgba(0, 0, 0, 0.96); /* edit */
--aside-color: rgba(0, 0, 0, 0.84); /* edit */
--fig-cap-color: rgba(0, 0, 0, 0.84); /* edit */
/*-- Specify custom fonts ~~~ must be imported above --*/
--heading-font: "Alata", sans-serif;
--mono-font: "Fira Code", monospace;
/*--body-font: "Computer Modern Serif", serif;*/
--body-font: "Source Serif Pro", serif;
--navbar-font: "Alata", sans-serif;
/* Other vars */
--line-height: 1.5;
}
/*-- ARTICLE METADATA --*/
d-byline {
--heading-size: 0.6rem;
--heading-color: rgba(0, 0, 0, 0.5);
--body-size: 0.8rem;
--body-color: rgba(0, 0, 0, 0.8);
}
/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
--heading-size: 18px;
--contents-size: 13px;
}
/*-- ARTICLE APPENDIX --*/
d-appendix {
--heading-size: 15px;
--heading-color: rgba(0, 0, 0, 0.65);
--text-size: 0.8em;
--text-color: var(--body-color); /* edit */
}
/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs */
.distill-site-header {
--title-size: 18px;
--text-size: 15px;
--text-color: #fff; /* edit */
--hover-color: yellow; /* edit */
--bkgd-color: #000; /* edit */
}
/*.distill-site-footer {
--text-color: rgba(255, 255, 255, 0.8);
--text-size: 15px;
--hover-color: white;
--bkgd-color: #0F2E3D;
}*/
/*-- Additional custom styles --*/
/* Trimming whitespace (line height, margins, padding) */
d-article, d-article h2, d-article h3, d-title h1, d-title p {
line-height: 1;
}
d-article pre, d-article p, d-article ul, d-article ol {
line-height: var(--line-height);
}
d-title {
padding: 6rem 0 1.5rem 0;
}
d-title p, d-article li {
margin: 0;
}
d-article {
padding-top: 1.5rem;
}
d-article h2, d-article h3 {
margin: 0 0 1.5rem 0;
}
.pagedtable th { /* Mirrors padding on the footer */
padding-top: 5px;
padding-bottom: 4px;
}
div.sourceCode, div.figure {
margin: 0 0 1em 0;
}
.layout-chunk { /* Div creates a faux margin for the first heading when there is a TOC */
display: none;
}
blockquote p { /* Remove double margin in nested element */
margin-bottom: 0;
}
.html-widget { /* Fix spacing for htmlwidgets (e.g. Leaflet) when they're in a figure (e.g. have a caption) */
margin-bottom: 1em;
}
/* Leaflet formatting */
.leaflet { /* Increase height */
height: 80vh !important; /* https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths */
}
.leaflet-control:nth-child(2), .leaflet-control .slider { /* Increase width of Playback slider */
width: 50vw;
}
/* Pad all sides of shaded figures */
.shaded {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px 20px 0 20px;
margin-bottom: 1em;
}
/* Set correct background color for shaded figures (e.g. for captions in a shaded figure) */
.shaded .shaded-content {
background-color: rgb(247, 247, 247);
}
/* Fonts: header font in Table of Contents */
.d-contents ul {
font-family: var(--heading-font);
}
/* Fonts: relative header sizing (Distill doesn't theme h1) */
d-article h2 {
font-size: 2em;
}
d-article h3 {
font-size: 1.3em;
}
/* Fonts: apply cusom monotype font for <code> */
code {
font-family: var(--mono-font);
}
/* Fonts: make all standard article text the same size! (E.g. lists were larger than paragraphs) */
d-article {
font-size: var(--body-size);
}
/* Dataframes i.e. pagedtables */
.pagedtable {
font-family: var(--mono-font);
}
.pagedtable table th, .pagedtable table td, .pagedtable .pagedtable-footer {
font-size: var(--code-size);
}
.l-body { /* Don't let pagedtables overflow */
max-width: 100%;
}
/* Colors: correctly color dropdowns in the nav bar */
.nav-dropdown .nav-dropbtn, .nav-dropdown-content a {
color: var(--text-color);
}
.nav-dropdown .nav-dropbtn:hover {
color: var(--hover-color);
}
.nav-dropdown-content {
background-color: var(--bkgd-color);
}
.nav-dropdown-content a:hover {
background-color: var(--bkgd-color);
}
/* Colors: blue links for higher contrast */
d-article p a {
color: blue;
}
/* Increase width of page content */
@media screen and (min-width: 768px) {
.base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, distill-appendix, d-byline, d-footnote-list, d-citation-list, distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] repeat(8, 60px) [ kicker-end text-end gutter-start] 30px [middle-end] 30px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 16px;
}
}
@media screen and (min-width: 1000px) {
.base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, distill-appendix, d-byline, d-footnote-list, d-citation-list, distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 80px [middle-start] 50px [text-start kicker-end] repeat(8, 70px) [text-end gutter-start] 55px [middle-end] 55px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 16px;
}
}
@media screen and (min-width: 1180px) {
.base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, distill-appendix, d-byline, d-footnote-list, d-citation-list, distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 65px [middle-start] 65px [text-start kicker-end] repeat(8, 92px) [text-end gutter-start] 65px [middle-end] 65px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 16px;
}
}