css/main.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
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

$mainFont:    "Montserrat", "sans-serif";
$specialFont: "Raleway", "sans-serif";
$codeFont:    "Fira Mono", "Martian Mono", "monospace";

$contentWidth:   72rem;
$padding:        1rem;
$separatorWidth: 0.25rem;

$shadowColour: color-mix(in srgb, black, transparent 50%);

@mixin separator {
	background-color: var(--highlightColour);
	border-radius:    calc($separatorWidth / 3);
	content:          "";
	display:          block;
	height:           $separatorWidth;
	width:            100%;
}

:root {
	font-family: $mainFont;

	scroll-behavior: smooth;
}

* {
	margin:  0;
	padding: 0;

	box-sizing: border-box;
}

body {
	--backgroundColour: oklch( 25% 0 0);
	--foregroundColour: oklch( 20% 0 0);
	--textColour:       oklch(100% 0 0);
	--highlightColour:  var(--textColour);

	background-color: var(--backgroundColour);
	color:            var(--textColour);
	z-index:          -1;

	// Default.
	//&.dark { }

	&.light {
		--backgroundColour: oklch(96.875% 0 0);
		--foregroundColour: oklch(93.750% 0 0);
		--textColour:       oklch(33.333% 0 0);
		--highlightColour:  oklch(25%     0 0);
	}
}

a, a:visited {
	color:  var(--highlightColour);
	cursor: pointer;
}

h1 {
	color: var(--highlightColour);
}

code {
	font-family: $codeFont;
}

img {
	// Set the `color` property so that alternative
	// text uses the correct colour.

	color: var(--highlightColour);
}

ul {
	list-style: none;

	li p::before {
		content: "\2022\0020";
	}
}

@import "header.scss";
@import "page.scss";
@import "footer.scss";