advent of code solutions aoc.oppi.li
haskell aoc

book: improve styles for mobile

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li 0e556048 526ab8f1

verified
+59 -88
+16 -44
book/style.css
··· 1 1 body { 2 - max-width: 1000px; 2 + max-width: 1400px; 3 3 margin-left: auto; 4 4 margin-right: auto; 5 5 box-sizing: border-box; 6 - padding: 0 1vw; 7 - font-size-adjust: ex-height 0.53; 6 + padding: 0 5vw; 7 + font-family: "Libre Baskerville", serif; 8 8 } 9 9 10 10 .sitenav { ··· 16 16 text-align: justify; 17 17 } 18 18 19 + pre, code { 20 + font-family: "Fira Code", monospace; 21 + } 22 + 19 23 .row { 20 24 display: grid; 21 25 grid-template-columns: 1fr 1fr; ··· 26 30 } 27 31 28 32 .code { 29 - padding-bottom: 2rem; 30 - } 31 - 32 - #output-panel { 33 - position: fixed; 34 - bottom: 0; 35 - left: max(calc((100vw - 1000px) / 2), 1vw); 36 - right: max(calc((100vw - 1000px) / 2), 1vw); 37 - box-sizing: border-box; 38 - border: 1px solid black; 39 - } 40 - 41 - #panel-actions { 42 - display: flex; 43 - list-style: none; 44 - padding: 0.5rem; 45 - background-color: #D0D0F7; 46 - } 47 - 48 - #panel-actions::before { 49 - content: "+"; 50 - margin-right: 0.5rem; 51 - } 52 - 53 - details[open] #panel-actions::before { 54 - content: "−"; 55 - } 56 - 57 - #output-content { 58 - white-space: pre-wrap; 59 - word-wrap: break-word; 60 - font-family: monospace; 61 - padding: 0.5rem; 62 - max-height: 50lvh; 63 - background-color: white; 64 - overflow-y: auto; 65 - } 66 - 67 - .output-error { 68 - color: #8B0000; 33 + padding-bottom: 1rem; 34 + max-width: 100%; 35 + overflow: auto; 69 36 } 70 37 71 38 @media (max-width: 768px) { ··· 75 42 76 43 .row { 77 44 grid-template-columns: 1fr; 78 - gap: 1rem; 45 + gap: 0.0rem; 46 + margin-bottom: 1rem; 47 + } 48 + 49 + .row > p { 50 + margin-bottom: 0; 79 51 } 80 52 81 53 .code {
+3
book/template.html
··· 29 29 $if(math)$ 30 30 $math$ 31 31 $endif$ 32 + <link rel="preconnect" href="https://fonts.googleapis.com"> 33 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 34 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 32 35 </head> 33 36 <body> 34 37 $for(include-before)$
+3
out/1-section.html
··· 23 23 .display.math{display: block; text-align: center; margin: 0.5rem auto;} 24 24 </style> 25 25 <link rel="stylesheet" href="style.css" /> 26 + <link rel="preconnect" href="https://fonts.googleapis.com"> 27 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 28 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 26 29 </head> 27 30 <body> 28 31 <nav id="sitenav">
+3
out/1.1-day-1.html
··· 70 70 code span.wa { font-style: italic; } /* Warning */ 71 71 </style> 72 72 <link rel="stylesheet" href="style.css" /> 73 + <link rel="preconnect" href="https://fonts.googleapis.com"> 74 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 75 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 73 76 </head> 74 77 <body> 75 78 <nav id="sitenav">
+3
out/1.2-day-2.html
··· 70 70 code span.wa { font-style: italic; } /* Warning */ 71 71 </style> 72 72 <link rel="stylesheet" href="style.css" /> 73 + <link rel="preconnect" href="https://fonts.googleapis.com"> 74 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 75 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 73 76 </head> 74 77 <body> 75 78 <nav id="sitenav">
+3
out/2-section-1.html
··· 23 23 .display.math{display: block; text-align: center; margin: 0.5rem auto;} 24 24 </style> 25 25 <link rel="stylesheet" href="style.css" /> 26 + <link rel="preconnect" href="https://fonts.googleapis.com"> 27 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 28 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 26 29 </head> 27 30 <body> 28 31 <nav id="sitenav">
+3
out/2.1-day-2-1.html
··· 70 70 code span.wa { font-style: italic; } /* Warning */ 71 71 </style> 72 72 <link rel="stylesheet" href="style.css" /> 73 + <link rel="preconnect" href="https://fonts.googleapis.com"> 74 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 75 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 73 76 </head> 74 77 <body> 75 78 <nav id="sitenav">
+3
out/2.2-day-4.html
··· 70 70 code span.wa { font-style: italic; } /* Warning */ 71 71 </style> 72 72 <link rel="stylesheet" href="style.css" /> 73 + <link rel="preconnect" href="https://fonts.googleapis.com"> 74 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 75 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 73 76 </head> 74 77 <body> 75 78 <nav id="sitenav">
+3
out/2.3-day-5.html
··· 70 70 code span.wa { font-style: italic; } /* Warning */ 71 71 </style> 72 72 <link rel="stylesheet" href="style.css" /> 73 + <link rel="preconnect" href="https://fonts.googleapis.com"> 74 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 75 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 73 76 </head> 74 77 <body> 75 78 <nav id="sitenav">
+3
out/index.html
··· 23 23 .display.math{display: block; text-align: center; margin: 0.5rem auto;} 24 24 </style> 25 25 <link rel="stylesheet" href="style.css" /> 26 + <link rel="preconnect" href="https://fonts.googleapis.com"> 27 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 28 + <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet"> 26 29 </head> 27 30 <body> 28 31 <nav id="sitenav">
+16 -44
out/style.css
··· 1 1 body { 2 - max-width: 1000px; 2 + max-width: 1400px; 3 3 margin-left: auto; 4 4 margin-right: auto; 5 5 box-sizing: border-box; 6 - padding: 0 1vw; 7 - font-size-adjust: ex-height 0.53; 6 + padding: 0 5vw; 7 + font-family: "Libre Baskerville", serif; 8 8 } 9 9 10 10 .sitenav { ··· 16 16 text-align: justify; 17 17 } 18 18 19 + pre, code { 20 + font-family: "Fira Code", monospace; 21 + } 22 + 19 23 .row { 20 24 display: grid; 21 25 grid-template-columns: 1fr 1fr; ··· 26 30 } 27 31 28 32 .code { 29 - padding-bottom: 2rem; 30 - } 31 - 32 - #output-panel { 33 - position: fixed; 34 - bottom: 0; 35 - left: max(calc((100vw - 1000px) / 2), 1vw); 36 - right: max(calc((100vw - 1000px) / 2), 1vw); 37 - box-sizing: border-box; 38 - border: 1px solid black; 39 - } 40 - 41 - #panel-actions { 42 - display: flex; 43 - list-style: none; 44 - padding: 0.5rem; 45 - background-color: #D0D0F7; 46 - } 47 - 48 - #panel-actions::before { 49 - content: "+"; 50 - margin-right: 0.5rem; 51 - } 52 - 53 - details[open] #panel-actions::before { 54 - content: "−"; 55 - } 56 - 57 - #output-content { 58 - white-space: pre-wrap; 59 - word-wrap: break-word; 60 - font-family: monospace; 61 - padding: 0.5rem; 62 - max-height: 50lvh; 63 - background-color: white; 64 - overflow-y: auto; 65 - } 66 - 67 - .output-error { 68 - color: #8B0000; 33 + padding-bottom: 1rem; 34 + max-width: 100%; 35 + overflow: auto; 69 36 } 70 37 71 38 @media (max-width: 768px) { ··· 75 42 76 43 .row { 77 44 grid-template-columns: 1fr; 78 - gap: 1rem; 45 + gap: 0.0rem; 46 + margin-bottom: 1rem; 47 + } 48 + 49 + .row > p { 50 + margin-bottom: 0; 79 51 } 80 52 81 53 .code {