static/css/style.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

:root {
    --bg-colour: #FAFCFA;
    --fg-colour: #060806;
    --primary-colour: #536E53;
    --secondary-colour: #6E536E;

    --primary-colour-1: #F2F5F2;
    --primary-colour-2: #E5ECE5;
    --primary-colour-3: #D8E2D8;
    --primary-colour-4: #BFCEBF;
    --primary-colour-5: #7E9E7E;
}

@media (prefers-color-scheme: dark) {

    :root {
        --fg-colour: #FAFCFA;
        --bg-colour: #060806;
        --primary-colour: #536E53;
        --secondary-colour: #C3AFC3;

        --primary-colour-1: #2D342D;
        --primary-colour-2: #3B443B;
        --primary-colour-3: #495349;
        --primary-colour-4: #647364;
        --primary-colour-5: #819181;
    }

}

body {
    max-width: 800px;
    margin: auto;
    padding: 1em;
    line-height: 1.5;
    color: var(--fg-colour);
    background-color: var(--bg-colour);
}

/* header and footer areas */
.menu { padding: 0; }
.menu li { display: inline-block; }
.article-meta, .menu a {
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--primary-colour-1);
}
.menu, .article-meta, footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { text-decoration: none; }
hr {
  border-style: dashed;
  color: var(--primary-colour-3);
}

/* code */
pre {
  border: 1px solid var(--primary-colour-3);
  box-shadow: 5px 5px 5px var(--primary-colour-1);
  padding: 1em;
  overflow-x: auto;
}
code {
    padding: 2px;
    border: 0px solid white;
    border-radius: 5px;
    background: var(--primary-colour-2);
}
pre code { background: none; }

/* misc elements */
img, iframe, video { max-width: 100%; }
main { hyphens: auto; }
.menu li { margin-right: 0.5em; }
blockquote {
  background: var(--primary-colour-2);
  border-left: 5px solid var(--primary-colour-4);;
  padding: 3px 1em 3px;
}

table {
  margin: auto;
  border-top: 1px solid var(--primary-colour);
  border-bottom: 1px solid var(--primary-colour);
}
table thead th { border-bottom: 1px solid var(--primary-colour-3); }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: var(--primary-colour-1); }

table.post-list {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

.post-list td {
    background-color: var(--bg-colour);
    border-top: thin solid var(--primary-colour);
    margin: none;
}

.post-list td.date-td {
    text-align: right;
}

a {
    text-decoration: none;
    color: var(--secondary-colour);
}

.transclude-1, .transclude-2, .transclude-3 {
    padding: 0.5em;
    border: 0px solid var(--bg-colour);
    border-radius: 5px;
}

.transclude-1:hover {
    background-color: var(--primary-colour-1);
}

.transclude-2:hover {
    background-color: var(--primary-colour-2);
}

.transclude-3:hover {
    background-color: var(--primary-colour-3);
}