css/root.scss


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

$monospaceFont:"Source Code Pro","monospace";
$sansSerifFont:"Helvetica","sans-serif";
$serifFont:    "Liberation Serif","serif";

:root {
	--black:    #1B1A1A; //  7/32
	--darkgrey: #232121; //  8/32
	--lightgrey:#ECEAEA; // 30/32
	--white:    #F6F4F4; // 31/32
	--blue:     #5F7C9C; // oklch(62.5% 0.118 259.065)

	--bodyColour:      var(--black);
	--backgroundColour:var(--darkgrey);
	--foregroundColour:var(--white);
	--colour:          var(--blue);

	--minimumPageWidth:10rem; // 12rem including body padding.
	--maximumPageWidth:74rem;

	font-family:$serifFont;
	font-size:  calc(1000mm / 1728 * 8);
}

* {
	box-sizing:border-box;
	margin:    0;
	padding:   0;
}

body {
	background-color:var(--bodyColour);
	color:           var(--foregroundColour);
	padding:         1rem;
}

p {
	line-height:1em;
}

@mixin invertedTheme {
	background-color:var(--foregroundColour);
	border-color:    var(--foregroundColour);
	color:           var(--backgroundColour);
}