custom.css
... ...
@@ -1,109 +1,104 @@
1
-/* Akret Wiki — dark-first monospace theme
2
- Goals: tiny, fast, readable; no layout JS; print-friendly. */
1
+/* Akret Wiki — dark-first, monospace
2
+ Goals: simple, legible, fast, durable. */
3 3
4
-/* --------- Variables (dark default) --------- */
5
-:root{
6
- --bg:#0c0c0c;
7
- --fg:#e6e6e6;
8
- --muted:#a2a2a2;
9
- --link:#9bb6ff;
10
- --link-visited:#c7a0ff;
11
- --accent:#66a3ff;
12
- --border:#262626;
13
- --code-bg:#131517;
4
+/* ----- Colors (dark default) ----- */
5
+:root {
6
+ --bg: #111; /* soft black */
7
+ --fg: #e0e0e0; /* warm gray */
8
+ --muted: #999;
9
+ --link: #9bb6ff;
10
+ --link-visited: #c5a3ff;
11
+ --border: #333;
12
+ --code-bg: #1a1a1a;
14 13
}
15 14
16
-/* Light scheme override for users who prefer it */
17
-@media (prefers-color-scheme: light){
18
- :root{
19
- --bg:#ffffff;
20
- --fg:#111111;
21
- --muted:#666666;
22
- --link:#0044cc;
23
- --link-visited:#6a35b1;
24
- --accent:#0a84ff;
25
- --border:#e2e2e2;
26
- --code-bg:#f6f8fa;
15
+/* Light override for prefers-color-scheme: light */
16
+@media (prefers-color-scheme: light) {
17
+ :root {
18
+ --bg: #fff;
19
+ --fg: #111;
20
+ --muted: #555;
21
+ --link: #0044cc;
22
+ --link-visited: #6a35b1;
23
+ --border: #ddd;
24
+ --code-bg: #f6f8fa;
27 25
}
28 26
}
29 27
30
-/* --------- Base --------- */
28
+/* ----- Base layout ----- */
31 29
html { font-size: 16px; }
32
-body{
33
- margin:0; padding:0;
34
- background:var(--bg); color:var(--fg);
35
- font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
30
+body {
31
+ margin: 0;
32
+ padding: 0;
33
+ background: var(--bg);
34
+ color: var(--fg);
35
+ font: 16px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
36 36
}
37 37
38
-/* Layout: centered, narrow column for readability */
39
-#container, .markdown-body, .gollum-site, main, .page{
40
- max-width: 72ch;
41
- padding: 2rem 1rem 6rem;
38
+/* Centered narrow column, slightly wider */
39
+#container, .markdown-body, .gollum-site, main, .page {
40
+ max-width: 80ch;
41
+ padding: 2.5rem 1rem 6rem;
42 42
margin: 0 auto;
43 43
}
44 44
45
-/* --------- Headings --------- */
46
-h1,h2,h3,h4,h5,h6{
47
- margin: 2rem 0 .75rem;
45
+/* ----- Headings ----- */
46
+h1, h2, h3, h4, h5, h6 {
47
+ margin: 2.5rem 0 1rem;
48 48
line-height: 1.25;
49 49
font-weight: 700;
50 50
}
51
-h1{ font-size:1.75rem; border-bottom:1px solid var(--border); padding-bottom:.25rem; }
52
-h2{ font-size:1.35rem; }
53
-h3{ font-size:1.15rem; color:var(--muted); }
54
-h4,h5,h6{ font-size:1rem; color:var(--muted); }
55
-header, .header, .gollum-header { border:0; background:none; }
56
-
57
-/* --------- Text & Links --------- */
58
-p, ul, ol, blockquote, pre, table { margin: 1rem 0; }
59
-li { margin: .25rem 0; }
60
-a{
61
- color:var(--link);
62
- text-decoration: underline;
63
- text-underline-offset: 2px;
51
+h1 {
52
+ font-size: 1.9rem;
53
+ border-bottom: 1px solid var(--border);
54
+ padding-bottom: .3rem;
64 55
}
65
-a:visited{ color:var(--link-visited); }
66
-a:hover,a:focus{ text-decoration-thickness:2px; outline:none; }
56
+h2 { font-size: 1.4rem; }
57
+h3 { font-size: 1.2rem; color: var(--muted); }
58
+h4, h5, h6 { font-size: 1rem; color: var(--muted); }
67 59
68
-/* --------- Code --------- */
69
-code,kbd,samp{ background:var(--code-bg); padding:.12rem .3rem; border-radius:4px; }
70
-pre{
71
- background:var(--code-bg);
72
- padding:1rem; border-radius:6px; overflow:auto;
73
-}
74
-pre code{ background:transparent; padding:0; }
60
+header, .header, .gollum-header { border: 0; background: none; }
75 61
76
-/* --------- Media --------- */
77
-img,video{ max-width:100%; height:auto; border-radius:4px; }
78
-figure{ margin:1.25rem 0; }
79
-figcaption{ color:var(--muted); font-size:.9rem; margin-top:.35rem; }
62
+/* ----- Text & links ----- */
63
+p, ul, ol, blockquote, pre, table { margin: 1.25rem 0; }
64
+li { margin: .4rem 0; }
80 65
81
-/* --------- Tables --------- */
82
-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
83
-th,td{ border:1px solid var(--border); padding:.55rem .6rem; vertical-align:top; }
84
-thead th{ background: color-mix(in srgb, var(--code-bg) 85%, transparent); }
85
-
86
-/* --------- Blockquotes --------- */
87
-blockquote{
88
- margin:1rem 0; padding:.5rem 1rem;
89
- border-left:3px solid var(--border);
90
- color:var(--muted);
66
+a {
67
+ color: var(--link);
68
+ text-decoration: underline;
69
+ text-underline-offset: 3px;
70
+}
71
+a:visited { color: var(--link-visited); }
72
+a:hover, a:focus {
73
+ text-decoration-thickness: 2px;
74
+ outline: none;
91 75
}
92 76
93
-/* --------- UI odds & ends --------- */
94
-hr{ border:0; border-top:1px solid var(--border); margin:2rem 0; }
95
-.gollum-edit-form textarea{ font:inherit; line-height:1.5; }
96
-.gollum-footer,.footer,nav,.actions{ color:var(--muted); }
97
-#searchbar,.searchbar,input[type=search]{
98
- font:inherit; padding:.4rem .6rem; border:1px solid var(--border);
99
- border-radius:4px; background:var(--bg); color:var(--fg);
77
+/* ----- Code ----- */
78
+code, kbd, samp {
79
+ background: var(--code-bg);
80
+ padding: .15rem .35rem;
81
+ border-radius: 4px;
82
+}
83
+pre {
84
+ background: var(--code-bg);
85
+ padding: 1rem 1.2rem;
86
+ border-radius: 6px;
87
+ overflow: auto;
100 88
}
89
+pre code { background: transparent; padding: 0; }
101 90
102
-/* --------- Print: white page for handouts --------- */
103
-@media print{
104
- body{ background:#fff; color:#000; }
105
- a{ color:#000; text-decoration:underline; }
106
- pre,code{ background:#fff; }
107
- #container,.markdown-body,.gollum-site,main,.page{ max-width:none; padding:0; }
108
- header,nav,.gollum-footer,.actions{ display:none !important; }
91
+/* ----- Media ----- */
92
+img, video {
93
+ max-width: 100%;
94
+ height: auto;
95
+ border-radius: 3px;
109 96
}
97
+figure { margin: 1.5rem 0; }
98
+figcaption {
99
+ color: var(--muted);
100
+ font-size: .9rem;
101
+ margin-top: .4rem;
102
+}
103
+
104
+/* -*