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  color: gray!important;
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    margin-top: 96px !important;
268    padding: 0 14px;
269  }
270}