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  margin-top: 30px !important;
 81  max-width: 760px !important;
 82  padding: 0 18px;
 83}
 84
 85h1,
 86h2,
 87h3,
 88h4,
 89h5 {
 90  color: var(--text);
 91  border-bottom: 1px solid var(--border);
 92  margin-top: 1.9rem;
 93  margin-bottom: 0.8rem;
 94  padding-bottom: 0.35rem;
 95  padding-top: 0;
 96  line-height: 1.35;
 97}
 98
 99h1 { font-size: 1.95rem; }
100h2 { font-size: 1.5rem; }
101h3 { font-size: 1.24rem; }
102
103h1 a,
104h2 a,
105h3 a,
106h4 a,
107h5 a {
108  color: inherit !important;
109  text-decoration: none !important;
110}
111
112p,
113li {
114  color: var(--text);
115}
116
117a,
118a[style],
119a[style*='color:black'],
120a[style*='color:gray'] {
121  color: var(--accent) !important;
122  text-decoration: none !important;
123}
124
125a:hover {
126  text-decoration: none !important;
127}
128
129pre {
130  background: transparent;
131  border: 1px solid var(--border);
132  border-radius: 0;
133  padding: 12px 14px;
134  overflow-x: auto;
135}
136
137.dark-theme .hljs {
138  background: #1b1b1e !important;
139  color: #e9e9ea !important;
140}
141
142blockquote {
143  background: transparent;
144  border-left: 2px solid var(--border);
145  margin: 1.3em 0;
146  padding: 0.3em 0 0.3em 0.9em;
147  color: var(--muted);
148}
149
150.postThumb {
151  display: block;
152  color: var(--text) !important;
153  border: 0;
154  border-radius: 0;
155  background: var(--bg);
156  padding: 7px 10px;
157  margin: 0;
158  transition: background-color 0.15s ease;
159}
160
161.postThumb a {
162  color: inherit !important;
163}
164
165.postThumb h2,
166.postThumb h3,
167.postThumb h4,
168.postThumb h5 {
169  margin-top: 0.45rem;
170  margin-bottom: 0.3rem;
171  padding-bottom: 0.2rem;
172  border-bottom: 0;
173  line-height: 1.25;
174}
175
176.postThumb p,
177.postThumb li {
178  margin: 0.25rem 0;
179  line-height: 1.45;
180}
181
182.postThumb:hover {
183  background: var(--hover-bg);
184}
185
186.container[style*='max-width:800px'] h1 a,
187.container[style*='max-width:800px'] h2 a,
188.container[style*='max-width:800px'] h3 a,
189.container[style*='max-width:800px'] h4 a,
190.container[style*='max-width:800px'] h5 a,
191#markdown h1 a,
192#markdown h2 a,
193#markdown h3 a,
194#markdown h4 a,
195#markdown h5 a {
196  color: var(--text) !important;
197}
198
199footer,
200footer .container {
201  color: var(--muted);
202}
203
204.onoffswitch {
205  display: inline-flex !important;
206  align-items: center;
207  justify-content: center;
208  width: 24px;
209  height: 24px;
210  user-select: none;
211  margin: 0 !important;
212  vertical-align: middle;
213  align-self: center;
214  position: static;
215}
216
217.onoffswitch-checkbox {
218  display: none;
219}
220
221.onoffswitch-label {
222  display: inline-flex;
223  align-items: center;
224  justify-content: center;
225  cursor: pointer;
226  width: 24px;
227  height: 24px;
228  border: 1px solid var(--border);
229  border-radius: 50%;
230  background-color: transparent;
231  margin-bottom: 0;
232  transition: background-color 0.2s ease, border-color 0.2s ease;
233}
234
235.onoffswitch-label:before {
236  content: '☀';
237  display: block;
238  font-size: 12px;
239  line-height: 1;
240  color: var(--text);
241  transform: none;
242}
243
244.onoffswitch-checkbox:checked + .onoffswitch-label:before {
245  content: '☾';
246}
247
248.onoffswitch-label:hover {
249  background: var(--hover-bg);
250}
251
252@media (max-width: 840px) {
253  #mainNav .container {
254    display: block;
255    padding-top: 4px;
256  }
257
258  #mainNav .container > div {
259    float: none !important;
260    display: block;
261    text-align: center;
262  }
263
264  .container[style*='max-width:800px'],
265  #markdown.container {
266    margin-top: 96px !important;
267    padding: 0 14px;
268  }
269}