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