Skip to content

Commit d7abdb1

Browse files
mine-cetinkaya-rundelmine-cetinkaya-rundel
authored
First attemot at enabling dark mode (#348)
1 parent 3cb1285 commit d7abdb1

File tree

2 files changed

+382
-2
lines changed

2 files changed

+382
-2
lines changed

‎_quarto.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ bibliography:
7979
format:
8080
html:
8181
theme:
82-
- cosmo
83-
- scss/ims-style.scss
82+
light: [cosmo, scss/ims-style.scss]
83+
dark: [cosmo, scss/ims-style-dark.scss]
8484
code-link: true
8585
mainfont: Atkinson Hyperlegible
8686
monofont: Source Code Pro

‎scss/ims-style-dark.scss

Lines changed: 380 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,380 @@
1+
/*-- scss:defaults --*/
2+
3+
@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap';
4+
@import 'https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap';
5+
6+
$body-bg: #181818;
7+
$font-family: "Atkinson Hyperlegible", sans-serif;
8+
$font-family-monospace: "Source Code Pro";
9+
$primary: #569BBD !default;
10+
$body-color: #fbfbfb;
11+
12+
/*-- scss:rules --*/
13+
14+
.sidebar-title {
15+
color: #569BBD;
16+
}
17+
18+
div.sidebar-item-container .active {
19+
font-weight: bold;
20+
}
21+
22+
.sidebar nav[role=doc-toc] ul>li>a.active, .sidebar nav[role=doc-toc] ul>li>ul>li>a.active{
23+
font-weight: bold;
24+
}
25+
26+
img.quarto-cover-image {
27+
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
28+
}
29+
30+
/* Headings ------------------------------------------------------ */
31+
32+
h2 {
33+
margin-top: 2rem;
34+
margin-bottom: 1rem;
35+
font-size: 1.5rem;
36+
}
37+
h3 { margin-top: 1.5em; font-size: 1.2rem; }
38+
h4 { margin-top: 1.5em; font-size: 1.1rem; }
39+
h5 { margin-top: 1.5em; font-size: 1rem; }
40+
41+
h1, h2, h3, h4, h5 {
42+
line-height: 1.3;
43+
}
44+
45+
.quarto-section-identifier {
46+
color: #6C6C6C;
47+
font-weight: normal;
48+
}
49+
50+
/* Printing ------------------------------------------------ */
51+
52+
@media print {
53+
:root {
54+
font-size: 11pt;
55+
}
56+
#quarto-sidebar, #TOC, .nav-page {
57+
display: none;
58+
}
59+
.page-columns .content {
60+
grid-column-start: page-start;
61+
}
62+
.fixed-top {
63+
position: relative;
64+
}
65+
.panel-caption, .figure-caption, figcaption {
66+
color: #666;
67+
}
68+
}
69+
70+
/* OpenIntro custom environments --------------------------- */
71+
72+
73+
/* chapterintro */
74+
75+
.chapterintro {
76+
padding: 1em 1em 1em 4em;
77+
margin-bottom: 10px;
78+
background: lighten($body-bg, 10%) 5px center/3em no-repeat;
79+
border-top: 3px solid #569BBD; /* openintro::COL[1,1] */
80+
border-bottom: 3px solid #569BBD; /* openintro::COL[1,1] */
81+
background-image: url("images/_icons/chapterintro.png");
82+
background-position: 0.5em 1.5em;
83+
}
84+
85+
/* guidedpractice */
86+
87+
.guidedpractice {
88+
padding: 1em 1em 1em 4em;
89+
margin-top: 30px;
90+
margin-bottom: 30px;
91+
background: lighten($body-bg, 10%) 5px center/3em no-repeat;
92+
border-top: 1px solid #569BBD; /* openintro::COL[1,1] */
93+
border-bottom: 1px solid #569BBD; /* openintro::COL[1,1] */
94+
background-image: url("images/_icons/guided-practice.png");
95+
background-position: 0.5em 1em;
96+
}
97+
98+
.guidedpractice:before {
99+
content: "Guided practice";
100+
clear: right;
101+
display: block;
102+
font-weight: bold;
103+
font-variant: small-caps;
104+
color: #569BBD;
105+
}
106+
107+
/* workedexample */
108+
109+
.workedexample{
110+
padding: 1em 1em 1em 4em;
111+
margin-top: 30px;
112+
margin-bottom: 30px;
113+
background: lighten($body-bg, 10%) 5px center/3em no-repeat;
114+
border-top: 1px solid #569BBD; /* openintro::COL[1,1] */
115+
border-bottom: 1px solid #569BBD; /* openintro::COL[1,1] */
116+
background-image: url("images/_icons/worked-example.png");
117+
background-position: 0.5em 1em;
118+
}
119+
120+
.workedexample:before {
121+
content: "Example:";
122+
clear: right;
123+
display: block;
124+
font-weight: bold;
125+
font-variant: small-caps;
126+
color: #569BBD;
127+
}
128+
129+
/* important */
130+
131+
.important {
132+
padding: 1em 1em 1em 4em;
133+
margin-top: 30px;
134+
margin-bottom: 30px;
135+
background: lighten($body-bg, 15%) 5px center/3em no-repeat;
136+
border-top: 1px solid #f1a8b1;
137+
border-bottom: 1px solid #f1a8b1;
138+
background-image: url("images/_icons/important.png");
139+
background-position: 0.5em 1em;
140+
}
141+
142+
.important strong {
143+
color: #f1a8b1;
144+
}
145+
146+
/* tip */
147+
148+
.tip {
149+
padding: 1em 1em 1em 4em;
150+
margin-bottom: 10px;
151+
background: lighten($body-bg, 15%) 5px center/3em no-repeat;
152+
border-top: 1px solid #D9D9D9; /* openintro::COL[6,1] */
153+
border-bottom: 1px solid #D9D9D9; /* openintro::COL[6,1] */
154+
background-image: url("images/_icons/tip.png");
155+
background-position: 0.5em 1em;
156+
}
157+
158+
/* cautionbox */
159+
160+
.caution {
161+
padding: 1em 1em 1em 4em;
162+
margin-top: 30px;
163+
margin-bottom: 30px;
164+
background: lighten($body-bg, 15%) 5px center/3em no-repeat;
165+
border-top: 1px solid #f1a8b1;
166+
border-bottom: 1px solid #f1a8b1;
167+
background-image: url("images/_icons/stop-sign.png");
168+
background-position: 0.5em 1em;
169+
}
170+
171+
/* data - datasets in package */
172+
173+
.data {
174+
padding: 1em 1em 1em 4em;
175+
margin-bottom: 10px;
176+
margin-top: 10px;
177+
background: lighten($body-bg, 15%) 5px center/3em no-repeat;
178+
border-top: 1px solid #D9D9D9; /* openintro::COL[6,1] */
179+
border-bottom: 1px solid #D9D9D9; /* openintro::COL[6,1] */
180+
background-image: url("images/_icons/data.png");
181+
}
182+
183+
/* pronunciation - terms and Greek letters */
184+
185+
.pronunciation {
186+
padding: 1em 1em 1em 4em;
187+
margin-bottom: 30px;
188+
margin-top: 30px;
189+
background: lighten($body-bg, 15%) 5px center/3em no-repeat;
190+
border-top: 1px solid #D9D9D9; /* openintro::COL[1,1] */
191+
border-bottom: 1px solid #D9D9D9; /* openintro::COL[1,1] */
192+
background-image: url("images/_icons/pronunciation.png");
193+
}
194+
195+
/* tutorials */
196+
197+
.singletutorial {
198+
padding: 1em 1em 1em 4em;
199+
margin-bottom: 5px;
200+
margin-left: 30px;
201+
background: $body-bg 5px center/3em no-repeat;
202+
background-image: url("images/_icons/singletutorial.png");
203+
}
204+
205+
.alltutorials {
206+
padding: 1em 1em 1em 4em;
207+
margin-bottom: 10px;
208+
background: $body-bg 5px center/3em no-repeat;
209+
background-image: url("images/_icons/alltutorials.png");
210+
}
211+
212+
/* labs */
213+
214+
.singlelab {
215+
padding: 1em 1em 1em 4em;
216+
margin-bottom: 10px;
217+
background: $body-bg 5px center/3em no-repeat;
218+
background-image: url("images/_icons/singlelab.png");
219+
}
220+
221+
/* underconstruction - for chapters under construction */
222+
223+
.underconstruction {
224+
color: $body-bg;
225+
padding: 1em 1em 1em 4em;
226+
margin-bottom: 10px;
227+
font-weight: bold;
228+
background: #F3CED4 5px center/3em no-repeat;
229+
border-top: 1px solid #F05133; /* COL["red", "full"] */
230+
border-bottom: 1px solid #F05133; /* COL["red", "full"] */
231+
background-image: url("images/_icons/under-construction.png");
232+
}
233+
234+
/* todo - REMOVE ALL BEFORE PRINT!!! */
235+
236+
.todo {
237+
padding: 1em 1em 1em 4em;
238+
margin-bottom: 10px;
239+
background: #fffacd 5px center/3em no-repeat;
240+
border-top: 1px solid #f4dc00; /* openintro::COL[6,1] */
241+
border-bottom: 1px solid #f4dc00; /* openintro::COL[6,1] */
242+
background-image: url("images/_icons/to-do.png");
243+
font-weight: bold;
244+
}
245+
246+
.todo:before {
247+
content: "TO DO: ";
248+
}
249+
250+
/* Counting exercises */
251+
252+
.exercises ol ol {
253+
list-style-type: lower-alpha !important;
254+
}
255+
256+
.exercises ol ol ol {
257+
list-style-type: lower-roman !important;
258+
}
259+
260+
.exercises strong {
261+
color: #569BBD; /* openintro::COL[1,1] */
262+
}
263+
264+
/* Counting exercise solutions - odd numbers only */
265+
266+
.exercises-solution ol {
267+
counter-reset: odd-numbers -1;
268+
list-style-type: none !important;
269+
}
270+
.exercises-solution li {
271+
counter-increment: odd-numbers 2;
272+
}
273+
.exercises-solution li:before {
274+
content: counter(odd-numbers) ". ";
275+
}
276+
.exercises-solution p {
277+
display: inline;
278+
}
279+
280+
/* Other formatting */
281+
282+
p.caption {
283+
color: #777;
284+
margin-top: 10px;
285+
text-align: left;
286+
}
287+
p code {
288+
white-space: inherit;
289+
}
290+
pre {
291+
word-break: normal;
292+
word-wrap: normal;
293+
}
294+
pre code {
295+
white-space: inherit;
296+
}
297+
p.flushright {
298+
text-align: right;
299+
}
300+
blockquote > p:last-child {
301+
text-align: right;
302+
}
303+
blockquote > p:first-child {
304+
text-align: inherit;
305+
}
306+
307+
/* Headings */
308+
309+
.header-section-number {
310+
padding-right: .2em;
311+
font-weight: 500;
312+
}
313+
314+
h1, h2, h3, h4, h5, h6 {
315+
font-weight: bold;
316+
color: #569BBD; /* openintro::COL[1,1] */
317+
}
318+
h1.title {
319+
font-weight: 700;
320+
}
321+
h1 {
322+
border-bottom: 3px solid;
323+
border-top: 3px solid;
324+
}
325+
h2 {
326+
border-bottom: 3px solid #e2e2e2;
327+
border-top: 3px solid #e2e2e2;
328+
}
329+
h3 {
330+
border-top: 1px solid #D9D9D9; /* openintro::COL[7,1] */
331+
}
332+
333+
.welcome h1 {
334+
border-bottom: 0px solid;
335+
border-top: 0px solid;
336+
}
337+
338+
.welcome h2 {
339+
border-bottom: 0px solid;
340+
border-top: 0px solid;
341+
}
342+
343+
344+
/* Fonts */
345+
346+
.smallcaps {
347+
font-variant: small-caps;
348+
}
349+
.book .book-body .page-wrapper .page-inner section.normal strong {
350+
font-weight: 600;
351+
}
352+
353+
/* moved this out of Chp 1 but not sure if it's being used anywhere */
354+
355+
.column-left{
356+
float: left;
357+
width: 49%;
358+
text-align: left;
359+
}
360+
.column-right{
361+
float: right;
362+
width: 49%;
363+
text-align: left;
364+
}
365+
366+
/* authorinfo */
367+
368+
.authorinfo {
369+
padding: 0em 0em 0em 0em;
370+
}
371+
372+
/* lightbox captions */
373+
374+
.gslide-description {
375+
font-size: 1.5em
376+
}
377+
378+
/* restart footnote counter at each chapter */
379+
/* https://github.com/rstudio/bookdown/issues/589#issuecomment-701044587 */
380+
/* doesn't work for bs4_book, update when resolved */

0 commit comments

Comments
 (0)