1@font-face {
  2  font-family: 'Roboto';
  3  src: url('Roboto-Regular.ttf') format('truetype');
  4  font-display: swap;
  5}
  6
  7:root {
  8  --bg: #ffffff;
  9  --text: #111111;
 10  --muted: #666666;
 11  --border: #e6e6e6;
 12  --accent: #4d9aa1;
 13  --hover-bg: #f3f3f3;
 14}
 15
 16body {
 17  margin: 0;
 18  background: var(--bg);
 19  color: var(--text);
 20  font-family: 'Avenir Next', 'Montserrat', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
 21  font-size: 16px;
 22  line-height: 1.7;
 23  -webkit-font-smoothing: antialiased;
 24  text-rendering: optimizeLegibility;
 25}
 26
 27.dark-theme {
 28  --bg: #0f0f10;
 29  --text: #e9e9ea;
 30  --muted: #a9a9ad;
 31  --border: #2a2a2d;
 32  --accent: #4d9aa1;
 33  --hover-bg: #1b1b1e;
 34}
 35
 36.navbar.navbar-default {
 37  background: var(--bg);
 38  border: 0;
 39  border-bottom: 1px solid var(--border);
 40}
 41
 42#mainNav .container {
 43  min-height: 50px;
 44  display: flex;
 45  align-items: center;
 46  justify-content: space-between;
 47  gap: 12px;
 48}
 49
 50#mainNav .container > div {
 51  display: flex;
 52  align-items: center;
 53  gap: 10px;
 54}
 55
 56#mainNav a,
 57#mainNav a[style],
 58#mainNav a[style*='color:#000'] {
 59  color: var(--text) !important;
 60}
 61
 62#mainNav a:hover {
 63  color: var(--accent) !important;
 64}
 65
 66#mainNav .container > div:last-child > a {
 67  font-size: 0.9em;
 68  display: inline-flex;
 69  align-items: center;
 70  height: 24px;
 71  line-height: 24px;
 72}
 73
 74#mainNav img[src*='gradient-line'] {
 75  display: none;
 76}
 77
 78.container[style*='max-width:800px'],
 79#markdown.container {
 80  max-width: 800px !important;
 81}
 82
 83h1,
 84h2,
 85h3,
 86h4,
 87h5 {
 88  color: var(--text);
 89  border-bottom: 1px solid var(--border);
 90  margin-top: 1.9rem;
 91  margin-bottom: 0.8rem;
 92  padding-bottom: 0.35rem;
 93  padding-top: 0;
 94  line-height: 1.35;
 95}
 96
 97h1 { font-size: 1.95rem!important; }
 98h2 { font-size: 1.5rem!important; }
 99h3 { font-size: 1.24rem!important; }
100h4 { font-size: 1.0rem!important; }
101h5 { font-size: 0.84rem!important; }
102h6 { font-size: 0.60rem!important; }
103
104h1 a,
105h2 a,
106h3 a,
107h4 a,
108h5 a {
109  color: black !important;
110  text-decoration: none !important;
111}
112
113p,
114li {
115  color: var(--text);
116}
117
118a,
119a[style],
120a[style*='color:black'],
121a[style*='color:gray'] {
122  color: var(--accent) !important;
123  text-decoration: none !important;
124}
125
126a:hover {
127  text-decoration: none !important;
128}
129
130pre {
131  background: transparent;
132  border: 1px solid var(--border);
133  border-radius: 0;
134  padding: 12px 14px;
135  overflow-x: auto;
136}
137
138.dark-theme .hljs {
139  background: #1b1b1e !important;
140  color: #e9e9ea !important;
141}
142
143blockquote {
144  background: transparent;
145  border-left: 6px solid var(--border);
146  margin: 1.3em 0;
147  padding: 0.3em 0 0.3em 0.9em;
148  color: var(--muted);
149}
150
151.postThumb {
152  display: block;
153  color: var(--text) !important;
154  border: 0;
155  border-radius: 0;
156  background: var(--bg);
157  padding: 7px 10px;
158  margin: 0;
159  transition: background-color 0.15s ease;
160}
161
162.postThumb a {
163  color: inherit !important;
164}
165
166.postThumb h2,
167.postThumb h3,
168.postThumb h4,
169.postThumb h5 {
170  margin-top: 0.45rem;
171  margin-bottom: 0.3rem;
172  padding-bottom: 0.2rem;
173  border-bottom: 0;
174  line-height: 1.25;
175}
176
177.postThumb p,
178.postThumb li {
179  margin: 0.25rem 0;
180  line-height: 1.45;
181}
182
183.postThumb:hover {
184  background: var(--hover-bg);
185}
186
187.container[style*='max-width:800px'] h1 a,
188.container[style*='max-width:800px'] h2 a,
189.container[style*='max-width:800px'] h3 a,
190.container[style*='max-width:800px'] h4 a,
191.container[style*='max-width:800px'] h5 a,
192#markdown h1 a,
193#markdown h2 a,
194#markdown h3 a,
195#markdown h4 a,
196#markdown h5 a {
197  color: var(--text) !important;
198}
199
200footer,
201footer .container {
202  color: var(--muted);
203}
204
205.onoffswitch {
206  display: inline-flex !important;
207  align-items: center;
208  justify-content: center;
209  width: 24px;
210  height: 24px;
211  user-select: none;
212  margin: 0 !important;
213  vertical-align: middle;
214  align-self: center;
215  position: static;
216}
217
218.onoffswitch-checkbox {
219  display: none;
220}
221
222.onoffswitch-label {
223  display: inline-flex;
224  align-items: center;
225  justify-content: center;
226  cursor: pointer;
227  width: 24px;
228  height: 24px;
229  border: 1px solid var(--border);
230  border-radius: 50%;
231  background-color: transparent;
232  margin-bottom: 0;
233  transition: background-color 0.2s ease, border-color 0.2s ease;
234}
235
236.onoffswitch-label:before {
237  content: '☀';
238  display: block;
239  font-size: 12px;
240  line-height: 1;
241  color: var(--text);
242  transform: none;
243}
244
245.onoffswitch-checkbox:checked + .onoffswitch-label:before {
246  content: '☾';
247}
248
249.onoffswitch-label:hover {
250  background: var(--hover-bg);
251}
252
253@media (max-width: 840px) {
254  #mainNav .container {
255    display: block;
256    padding-top: 4px;
257  }
258
259  #mainNav .container > div {
260    float: none !important;
261    display: block;
262    text-align: center;
263  }
264
265  .container[style*='max-width:800px'],
266  #markdown.container {
267    padding: 0 14px;
268  }
269}