main.scss -rw-r--r-- 2.5 KiB
1:root {
2 --accent: #b1675d;
3 --light-gray: #eee;
4 --dark-gray: #c2c2c2;
5 --white: #f8f9fa;
6 --black: #2d2d2d;
7 --border-width: 5px;
8}
9
10table {
11 text-align: justify;
12 width: 100%;
13 border-collapse: collapse;
14 margin-bottom: 2rem;
15}
16
17td, th {
18 padding: 0.5em;
19 border-bottom: 1px solid #4a4a4a;
20}
21
22html, body {
23 box-sizing: border-box;
24 font-size: 16px;
25 /*font-family: monospace;*/
26 height: 100%;
27 margin: 0;
28 padding: 0;
29 max-width: 800px;
30}
31
32section {
33 height: 100%;
34}
35
36.wrapper {
37 min-height: 100%;
38 display: grid;
39 grid-template-rows: auto 1fr auto;
40}
41
42.page-body {
43 padding: 20px;
44}
45
46footer.page-footer {
47}
48
49*,
50*:before,
51*:after {
52 box-sizing: inherit;
53}
54
55ol,
56ul {
57 list-style: none;
58}
59
60p {
61 padding: 1px;
62 margin: 10px;
63}
64
65span {
66 background: white;
67 border: 1px solid black;
68}
69
70pre {
71 background: #e2e2e2;
72 font-family: monospace;
73}
74
75img.me {
76 border-radius: 2em;
77 max-width: 350px;
78}
79
80@media (prefers-color-scheme: dark) {
81 :root {
82 background-color: #2c2c2c;
83 color: white;
84 }
85
86 pre {
87 color: white;
88 background: #3f3f3f;
89 }
90
91 a:link {
92 color: white;
93 text-decoration: underline;
94 }
95
96 a:visited {
97 color: white;
98 text-decoration: none;
99 }
100
101 .notice {
102 border-color: white;
103 }
104}
105
106@media (prefers-color-scheme: light) {
107 :root {
108 background-color: #f5f5f5;
109 color: black;
110 }
111
112 pre {
113 color: black;
114 background: #e2e2e2;
115 }
116
117 a:link {
118 color: black;
119 text-decoration: underline;
120 }
121
122 a:visited {
123 color: black;
124 text-decoration: none;
125 }
126
127 .notice {
128 border-color: black;
129 }
130}
131
132
133
134/*
135 Tree structure using CSS:
136 http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
137*/
138
139.tree,
140.tree ul {
141 font-size: 18px;
142 font: normal normal 14px/20px Helvetica, Arial, sans-serif;
143 list-style-type: none;
144 margin-left: 0 0 0 10px;
145 padding: 0;
146 position: relative;
147 overflow: hidden;
148}
149
150.tree li {
151 margin: 0;
152 padding: 0 12px;
153 position: relative;
154}
155
156.tree li::before,
157.tree li::after {
158 content: "";
159 position: absolute;
160 left: 0;
161}
162
163/* horizontal line on inner list items */
164.tree li::before {
165 border-top: 2px solid #999;
166 top: 10px;
167 width: 10px;
168 height: 0;
169}
170
171/* vertical line on list items */
172.tree li:after {
173 border-left: 2px solid #999;
174 height: 100%;
175 width: 0px;
176 top: -10px;
177}
178
179/* lower line on list items from the first level because they don't have parents */
180.tree > li::after {
181 top: 10px;
182}
183
184/* hide line from the last of the first level list items */
185.tree > li:last-child::after {
186 display: none;
187}