Mercurial

comparison mrjunejune/src/base.css @ 97:3bdfffaad162

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 20:21:58 -0800
parents 655ea0b661fd
children 65e5a5b89a4e
comparison
equal deleted inserted replaced
96:70401cf61e97 97:3bdfffaad162
147 word-wrap: break-word; 147 word-wrap: break-word;
148 overflow-wrap: break-word; 148 overflow-wrap: break-word;
149 color: rgb(var(--gray-dark)); 149 color: rgb(var(--gray-dark));
150 font-size: 20px; 150 font-size: 20px;
151 line-height: 1.7; 151 line-height: 1.7;
152 -webkit-font-smoothing: antialiased;
153 -moz-osx-font-smoothing: grayscale;
152 } 154 }
153 155
154 main { 156 main {
155 background: var(--white); 157 background: var(--white);
156 width: var(--main-width); 158 width: var(--main-width);
169 color: rgb(var(--black)); 171 color: rgb(var(--black));
170 line-height: 1.2; 172 line-height: 1.2;
171 } 173 }
172 174
173 h1 { 175 h1 {
174 font-size: 3.052em; 176 font-size: 2.5em;
175 } 177 }
176 178
177 h2 { 179 h2 {
178 font-size: 2.441em; 180 font-size: 2em;
179 } 181 }
180 182
181 h3 { 183 h3 {
182 font-size: 1.953em; 184 font-size: 1.75em;
183 } 185 }
184 186
185 h4 { 187 h4 {
186 font-size: 1.563em; 188 font-size: 1.5em;
187 } 189 }
188 190
189 h5 { 191 h5 {
190 font-size: 1.25em; 192 font-size: 1.25em;
191 } 193 }
288 290
289 /* -- mobile -- */ 291 /* -- mobile -- */
290 @media (max-width: 720px) { 292 @media (max-width: 720px) {
291 body { 293 body {
292 font-size: 18px; 294 font-size: 18px;
293 } 295 line-height: 1.8;
296 }
297
294 main { 298 main {
299 padding: 1.5em 1em;
300 }
301
302 h1 {
303 font-size: 2em;
304 }
305
306 h2 {
307 font-size: 1.75em;
308 }
309
310 h3 {
311 font-size: 1.5em;
312 }
313
314 h4 {
315 font-size: 1.25em;
316 }
317
318 h5 {
319 font-size: 1.1em;
320 }
321
322 p {
323 margin-bottom: 1.25em;
324 }
325
326 /* Better touch targets for mobile */
327 a {
328 padding: 0.25em 0;
329 display: inline-block;
330 }
331
332 button, input[type="submit"], input[type="button"] {
333 min-height: 44px;
334 padding: 0.75em 1.5em;
335 font-size: 1em;
336 }
337
338 input, textarea, select {
339 font-size: 16px; /* Prevents zoom on iOS */
340 }
341
342 /* Improve blockquote readability */
343 blockquote {
344 font-size: 1.1em;
345 padding: 0.5em 0 0.5em 1em;
346 }
347
348 /* Better code block sizing */
349 code {
350 font-size: 0.9em;
351 }
352
353 pre {
295 padding: 1em; 354 padding: 1em;
296 } 355 overflow-x: auto;
297 } 356 }
298 357 }
299 358
359