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