custom.css
... ...
@@ -1,30 +1,33 @@
1
-/* Akret Wiki – minimal monospace theme
2
- Goals: tiny CSS, readable, print-friendly, dark-mode aware, no layout JS. */
1
+/* Akret Wiki — dark-first monospace theme
2
+ Goals: tiny, fast, readable; no layout JS; print-friendly. */
3 3
4
-/* 1) Base layout */
4
+/* --------- Variables (dark default) --------- */
5 5
:root{
6
- --bg: #fff;
7
- --fg: #111;
8
- --muted:#666;
9
- --link:#0044cc;
10
- --link-visited:#5a2ea6;
11
- --accent:#0a84ff;
12
- --border:#ddd;
13
- --code-bg:#f6f8fa;
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;
14 14
}
15
-@media (prefers-color-scheme: dark){
15
+
16
+/* Light scheme override for users who prefer it */
17
+@media (prefers-color-scheme: light){
16 18
:root{
17
- --bg:#0c0c0c;
18
- --fg:#e6e6e6;
19
- --muted:#9a9a9a;
20
- --link:#7aa2ff;
21
- --link-visited:#b58cff;
22
- --accent:#5aa3ff;
23
- --border:#2a2a2a;
24
- --code-bg:#16181a;
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;
25 27
}
26 28
}
27 29
30
+/* --------- Base --------- */
28 31
html { font-size: 16px; }
29 32
body{
30 33
margin:0; padding:0;
... ...
@@ -32,83 +35,75 @@ body{
32 35
font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
33 36
}
34 37
35
-/* center a narrow, readable column */
38
+/* Layout: centered, narrow column for readability */
36 39
#container, .markdown-body, .gollum-site, main, .page{
37
- max-width: 72ch; /* readable line length */
40
+ max-width: 72ch;
38 41
padding: 2rem 1rem 6rem;
39 42
margin: 0 auto;
40 43
}
41 44
42
-/* 2) Headings */
45
+/* --------- Headings --------- */
43 46
h1,h2,h3,h4,h5,h6{
44
- margin: 2rem 0 0.75rem;
45
- line-height:1.25;
47
+ margin: 2rem 0 .75rem;
48
+ line-height: 1.25;
46 49
font-weight: 700;
47 50
}
48
-h1{ font-size: 1.75rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
49
-h2{ font-size: 1.35rem; }
50
-h3{ font-size: 1.15rem; color: var(--muted); }
51
-h4,h5,h6{ font-size: 1rem; color: var(--muted); }
52
-
53
-/* Gollum often renders a page title area; keep it clean */
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); }
54 55
header, .header, .gollum-header { border:0; background:none; }
55 56
56
-/* 3) Text, links, lists */
57
+/* --------- Text & Links --------- */
57 58
p, ul, ol, blockquote, pre, table { margin: 1rem 0; }
58 59
li { margin: .25rem 0; }
59 60
a{
60
- color: var(--link);
61
+ color:var(--link);
61 62
text-decoration: underline;
62 63
text-underline-offset: 2px;
63 64
}
64
-a:visited{ color: var(--link-visited); }
65
-a:hover, a:focus{ outline: none; text-decoration-thickness: 2px; }
65
+a:visited{ color:var(--link-visited); }
66
+a:hover,a:focus{ text-decoration-thickness:2px; outline:none; }
66 67
67
-/* 4) Code & pre */
68
-code, kbd, samp{ background: var(--code-bg); padding: .1rem .25rem; border-radius: 4px; }
68
+/* --------- Code --------- */
69
+code,kbd,samp{ background:var(--code-bg); padding:.12rem .3rem; border-radius:4px; }
69 70
pre{
70
- background: var(--code-bg);
71
- padding: 1rem; overflow: auto; border-radius: 6px;
71
+ background:var(--code-bg);
72
+ padding:1rem; border-radius:6px; overflow:auto;
72 73
}
73
-pre code{ background: transparent; padding: 0; }
74
+pre code{ background:transparent; padding:0; }
74 75
75
-/* 5) Images & media */
76
-img, video{ max-width: 100%; height: auto; border-radius: 4px; }
77
-figure{ margin: 1.25rem 0; }
78
-figcaption{ color: var(--muted); font-size: .9rem; margin-top: .25rem; }
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; }
79 80
80
-/* 6) Tables */
81
-table{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
82
-th, td{ border: 1px solid var(--border); padding: .5rem .6rem; vertical-align: top; }
83
-thead th{ background: color-mix(in srgb, var(--code-bg) 80%, transparent); }
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); }
84 85
85
-/* 7) Blockquotes */
86
+/* --------- Blockquotes --------- */
86 87
blockquote{
87
- margin: 1rem 0; padding: .5rem 1rem;
88
- border-left: 3px solid var(--border);
89
- color: var(--muted);
88
+ margin:1rem 0; padding:.5rem 1rem;
89
+ border-left:3px solid var(--border);
90
+ color:var(--muted);
90 91
}
91 92
92
-/* 8) Utility bits */
93
-hr{ border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
94
-sup, sub{ line-height: 0; }
95
-mark{ background: #fffb91; color: inherit; }
96
-
97
-/* 9) Gollum-specific chrome (light touch) */
98
-.gollum-edit-form textarea{
99
- font: inherit; /* keep monospace */
100
- line-height: 1.5;
101
-}
102
-.gollum-footer, .footer, nav, .actions{ color:var(--muted); }
103
-#searchbar, .searchbar, form input[type=search]{
104
- font: inherit; padding: .4rem .6rem; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--fg);
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);
105 100
}
106 101
107
-/* 10) Print (nice for handouts) */
102
+/* --------- Print: white page for handouts --------- */
108 103
@media print{
109 104
body{ background:#fff; color:#000; }
110
- a{ color:#000; text-decoration: underline; }
111
- pre, code{ background:#fff; }
112
- #container, .markdown-body, .gollum-site, main, .page{ max-width:none; padding:0; }
113
- header, nav, .gollum-footer, .actions{ display:none !important; }
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; }
114 109
}