cab0597d71a22ce331865adb839cc2bdfdffb95a
[~bandali/bndl.org] / source / style.css
1 html, body {
2 margin: 0;
3 height: 100%;
4 }
5
6 body {
7 font-family: "Liberation Sans", "Arial", sans-serif;
8 color: #232323;
9 }
10
11 main {
12 margin: 0 auto;
13 max-width: 34em;
14 padding: 1em;
15 }
16
17 /* Header and Footer */
18
19 #aminb { font-size: 0.9em; }
20
21 #preamble,
22 #postamble {
23 color: #888888;
24 padding: 1em;
25 margin: 0 auto 2em;
26 max-width: 34em;
27 }
28
29 #preamble { padding: 2em 1em 0em 1em; }
30
31 #preamble h2 { display: inline; }
32
33 #preamble a { border: none !important; color: #888 !important; }
34
35 #preamble h2 a { color: #3a89c9 !important; }
36
37 #preamble .bar {
38 color: #ccc;
39 font-size: 12pt;
40 vertical-align: bottom;
41 padding-left: 1px;
42 padding-right: 1px;
43 }
44
45 #postamble a {
46 color: #888888 !important;
47 border-bottom: 1px solid #cccccc !important;
48 }
49
50 /* Content */
51
52 #content {
53 line-height: 1.6em;
54 }
55
56 #content h1, #content h2 {
57 line-height: 1em;
58 font-weight: 700;
59 letter-spacing: -0.03em;
60 word-spacing: -0.03em;
61 }
62
63 #content h1 { font-size: 1.6em; }
64
65 #content h2 {
66 font-size: 1.2em;
67 padding: 0.25em 0;
68 }
69
70 #content p {
71 margin: 1em 0;
72 }
73
74 #content code {
75 background-color: #f5f5f5;
76 padding: 1px 3px;
77 }
78
79 #content code,
80 #content pre {
81 font-family: "DejaVu Sans Mono", monospace;
82 font-size: 0.9em;
83 line-height: 1.5em;
84 margin: 0;
85 }
86
87 #content pre {
88 background-color: #f5f5f5;
89 color: #232323;
90 margin: 0 -1em;
91 overflow-x: auto;
92 padding: 1em;
93 word-wrap: normal;
94 }
95
96 #content ul {
97 padding: 0;
98 margin: 0.3em 0 0 1.6em;
99 }
100
101 #content ul li {
102 /* list-style: none; */
103 }
104
105 #content li {
106 margin: 0.5em 0;
107 }
108
109 .pub-desc {
110 font-size: 0.95em;
111 }
112
113 #text-publications p {
114 margin: 0.5em 0;
115 }
116
117 .light-off:checked ~ .page #content pre,
118 .light-off:checked ~ .page #content code {
119 background-color: #232323;
120 }
121
122 .clear { clear: both; }
123
124 #hello { float: left; line-height: 50px !important; }
125
126 #content .picture__avatar {
127 margin: 0;
128 height: 64px;
129 width: 64px;
130 border-radius: 50%;
131 float: right;
132 }
133
134 @media only screen and (min-width: 570px) {
135 .picture__avatar {
136 margin-right: 3em !important;
137 }
138 }
139
140 .page {
141 background-color: #ffffff;
142 color: #232323;
143 min-height: 100%;
144 }
145
146 .page a {
147 color: #357edd;
148 text-decoration: none;
149 border-bottom: 1px solid #a5ceff;
150 }
151
152 pre { margin-left: 0 }
153
154 /* Light switch */
155
156 #light-off {
157 position: absolute;
158 visibility: hidden;
159 }
160
161 .light-off-button {
162 cursor: pointer;
163 vertical-align: middle;
164 }
165
166 .light-off-button,
167 .light-off-button-inline {
168 color: #888888;
169 -webkit-user-select: none;
170 user-select: none;
171 cursor: pointer;
172 text-align: right;
173 }
174
175 .light-off-button:hover:after,
176 .light-off-button-inline:hover:after {
177 color: #357edd;
178 border-bottom: 0;
179 }
180
181 .light-off:checked ~ .page .light-off-button:hover:after
182 .light-off:checked ~ .page .light-off-button-inline:hover:after {
183 color: #ddddb6;
184 border-bottom: 0;
185 }
186
187 .light-off-button:after,
188 .light-off-button-inline:after {
189 content: "\1F4A1";
190 font-family: "Noto Color Emoji", "Noto Sans", "Arial", sans-serif;
191 }
192
193 .light-off:checked ~ .page {
194 background-color: #141414;
195 color: #cccccc;
196 }
197
198 .page:selection {
199 background: #ddddb6;
200 }
201 .light-off:checked ~ .page:selection {
202 background: #357edd;
203 }
204
205 .light-off:checked ~ .page a, .light-off:checked ~ header a {
206 color: #ddddb6 !important;
207 border-bottom: 1px solid #aaaa96;
208 }
209
210 .light-off:checked ~ .page a:visited {
211 color: #888888;
212 border-bottom: 1px solid #444444;
213 }
214
215 .light-off:checked ~ .page a:hover {
216 color: #ddddb6;
217 border-bottom: 1px solid #ddddb6;
218 }