main.css (3217B)
1 html { 2 font-size: 1.1rem; 3 text-size-adjust: 100%; 4 -ms-text-size-adjust: 100%; 5 -moz-text-size-adjust: 100%; 6 -webkit-text-size-adjust: 100%; 7 height: 100%; 8 scrollbar-color: grey transparent; 9 } 10 11 body { 12 display: flex; 13 flex-direction: column; 14 min-height: 100dvh; 15 height: 100%; 16 margin: 0 auto; 17 max-width: 47.5rem; 18 width: 100%; 19 } 20 21 header, 22 main, 23 footer { 24 padding-left: 0.5rem; 25 padding-right: 0.5rem; 26 width: 100%; 27 box-sizing: border-box; 28 } 29 30 header { padding-top: 0.5rem; } 31 32 main { 33 flex: 1 0 auto; 34 max-width: 100%; 35 box-sizing: border-box; 36 } 37 38 footer { 39 font-size: smaller; 40 padding-bottom: 0.5rem; 41 } 42 43 footer nav { 44 width: 100%; 45 white-space: nowrap; 46 display: flex; 47 gap: 2ch; 48 } 49 50 footer nav { justify-content: center; } 51 52 img { 53 display: block; 54 max-width: 100%; 55 } 56 57 p:has(img) { 58 display: flex; 59 gap: 1ch; 60 align-items: flex-start; 61 } 62 63 p img { 64 max-width: 35%; 65 height: auto; 66 align-self: flex-start; 67 object-fit: contain; 68 flex-shrink: 0; 69 } 70 71 main > *, 72 article > * { 73 margin-top: 1rem; 74 margin-bottom: 1rem; 75 } 76 77 a { overflow-wrap: break-word; } 78 79 a:hover { text-decoration: none; } 80 81 pre, 82 code { font: 0.95em/1.1 "FreeMono", "Courier", "Courier New", monospace; } 83 84 code { overflow-wrap: break-word; } 85 86 article > pre { 87 display: block; 88 white-space: pre-wrap; 89 overflow-wrap: anywhere; 90 } 91 92 table { 93 border-collapse: collapse; 94 overflow: hidden; 95 margin-left: auto; 96 margin-right: auto; 97 } 98 99 th, 100 td { padding: 0.25rem; } 101 102 .math-block { 103 width: 100%; 104 overflow-x: auto; 105 } 106 107 .site-menu { 108 display: flex; 109 gap: 1rem; 110 justify-content: flex-end; 111 } 112 113 .tags { 114 display: flex; 115 flex-wrap: wrap; 116 gap: 1rem; 117 align-items: center; 118 } 119 120 .metadata { display: grid; } 121 122 .metadata > * { flex-direction: row; } 123 124 .metadata-edited { font-style: italic; } 125 126 .previews img { max-height: 200px; } 127 128 .preview { margin: 1rem 0; } 129 130 .preview nav { text-align: right; } 131 132 .preview-footer { 133 display: flex; 134 column-gap: 2ch; 135 } 136 137 .preview-footer > * { 138 display: flex; 139 gap: 2ch; 140 } 141 142 .preview-footer-right { margin-left: auto; } 143 144 .recent-posts > div { margin-top: 0.5rem; } 145 146 .page-item { 147 display: flex; 148 flex-direction: row; 149 align-items: baseline; 150 margin: 0.25rem 0; 151 } 152 153 .page-item > div:first-child { 154 flex-shrink: 0; 155 white-space: nowrap; 156 } 157 158 .page-item > div > span { padding-right: 0.5rem; } 159 160 figcaption, 161 .footnotes { font-size: smaller; } 162 163 .tag::before { content: "#"; } 164 165 .highlight > .chroma { overflow-x: auto; } 166 167 .highlight td, 168 .highlight th, 169 .highlight table { border: none; } 170 171 .chroma .lnlinks { outline: none; } 172 173 .chroma .lntd { vertical-align: top; } 174 175 .chroma .line { 176 display: flex; 177 width: 100%; 178 } 179 180 .chroma .cl { flex: 1 1 auto; } 181 182 @media print { 183 html { 184 font-size: 12pt; 185 line-height: 1.6; 186 } 187 188 a, 189 p { 190 overflow-wrap: break-word; 191 hyphens: auto; 192 text-align: justify; 193 } 194 195 .tag-section, 196 .micro-post-footer, 197 .regular-post-footer, 198 header, 199 footer { display: none; } 200 201 tbody, 202 thead { 203 border-top: 1px solid; 204 border-bottom: 1px solid; 205 } 206 207 figure, 208 .footnotes > ol > li, 209 table, 210 tr, 211 td, 212 th { page-break-inside: avoid; } 213 214 pre { 215 font-size: 10pt; 216 line-height: 1.1; 217 } 218 219 @page { 220 size: A4; 221 margin: 20mm; 222 } 223 }