site.css (7202B)
1 @font-face { 2 font-family: "Merriweather"; 3 src: url("/css/fonts/Merriweather-Regular.otf") format("opentype"); 4 } 5 @font-face { 6 font-family: "Merriweather"; 7 font-weight: bold; 8 src: url("/css/fonts/Merriweather-Bold.otf") format("opentype"); 9 } 10 @font-face { 11 font-family: "Merriweather"; 12 font-weight: bold; 13 font-style: italic; 14 src: url("/css/fonts/Merriweather-BoldItalic.otf") format("opentype"); 15 } 16 @font-face { 17 font-family: "Merriweather"; 18 font-style: italic; 19 src: url("/css/fonts/Merriweather-Italic.otf") format("opentype"); 20 } 21 @font-face { 22 font-family: "Merriweather"; 23 font-weight: lighter; 24 font-style: italic; 25 src: url("/css/fonts/Merriweather-LightItalic.otf") format("opentype"); 26 } 27 @font-face { 28 font-family: "Merriweather"; 29 font-weight: lighter; 30 src: url("/css/fonts/Merriweather-Light.otf") format("opentype"); 31 } 32 33 html{ 34 margin: 1rem 2rem; 35 font-size: 106.25%; 36 --body-vertical-margin: 1rem; 37 --body-horizontal-margin: 1rem; 38 --content-box-padding: 0.5rem; 39 --font-main: Georgia, sans-serif; 40 --font-mono: 'Ubuntu Mono','Fira Code','Deja Vu Sans Mono','Bitstream Vera Sans Mono','Source Code Pro','Courier New',monospace; 41 --font-quote: "Fresco", Georgia, serif; 42 --font-sans: Avenir Next, Avenir, system-ui, sans-serif; 43 --font-header: 'Merriweather','Linux Libertine','Georgia','Times',serif; 44 --figure-offset: 0; 45 --figcaption-padding: 0; 46 --aside-width: 12.5rem; 47 --column-gap: 2rem; 48 --padding: 1rem; 49 } 50 51 body { 52 font-family: var(--font-main); 53 max-width: 70rem; 54 min-width: 30rem; 55 line-height: 1.4rem; 56 margin: 0 auto; 57 } 58 59 p { 60 word-wrap: break-word; 61 } 62 body > header{ 63 margin-bottom: 4em; 64 } 65 66 body > header nav { 67 float:right; 68 } 69 70 body > header nav ul li { 71 display: inline-block; 72 list-style: none; 73 padding: 0 0.5rem; 74 } 75 76 main { 77 font-size: 1.1rem; 78 font-family: var(--font-sans); 79 } 80 81 div.index h1 { 82 font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif; 83 font-size: 2rem; 84 line-height: 2rem; 85 font-weight: bolder; 86 } 87 88 div.index h2 { 89 font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif; 90 font-size: 1.5rem; 91 line-height: 2rem; 92 } 93 94 nav#table-of-contents { 95 background: #f2f2f2; 96 padding: 0.2rem 1rem; 97 font-size: 90%; 98 } 99 100 nav#table-of-contents h2 { 101 font-family: var(--font-sans); 102 font-weight: bold; 103 font-style: italic; 104 } 105 106 nav#table-of-contents li { 107 list-style-type: square; 108 } 109 110 nav#table-of-contents li a { 111 color: black; 112 } 113 nav#table-of-contents li a:hover { 114 color: #33f; 115 background-color: inherit; 116 } 117 118 code { 119 background-color: #f3f4f4; 120 font-family: var(--font-mono); 121 padding: 0.1rem 0.3rem; 122 border: 1px solid #e1e1e1; 123 border-radius: 4px; 124 } 125 126 blockquote code { 127 background-color: #999; 128 border-color: #666; 129 color: white; 130 } 131 132 pre { 133 background-color: #f3f4f4; 134 font-family: var(--font-mono); 135 white-space: pre-wrap; 136 overflow: auto; 137 overflow-x: auto; 138 margin: 1.25rem calc(-1 * var(--content-box-padding)); 139 padding: var(--content-box-padding); 140 border: 1px solid #999; 141 } 142 143 pre.src { 144 position: relative; 145 } 146 147 pre.src:before { 148 /*display: none;*/ 149 position: absolute; 150 background-color: #999; 151 color: #f3f4f4; 152 top: 0; 153 right: 0; 154 padding: 0.2rem 0.5rem; 155 } 156 157 aside { 158 --aside-offset: 1rem; 159 --aside-offset-lineheight: 1.5rem; 160 background-color: #f8f8f8; 161 padding: calc(var(--content-box-padding) * 0.5) calc(var(--content-box-padding) * 2); 162 float: right; 163 width: var(--aside-width); 164 font-size: 0.9rem; 165 line-height: 1.25rem; 166 border: 1px solid #ccc; 167 } 168 169 a { text-decoration: none; color: #339; } 170 a:hover { color: #33f; background-color: #f6f6f6; } 171 172 blockquote { 173 font-family: var(--font-quote); 174 text-rendering: optimizeLegibility; 175 line-height: 1.4; 176 font-style: italic; 177 background-color: #e0e0e0; 178 border-radius: 0.5em; 179 width: 90%; 180 margin: 1em auto; 181 padding: 0.2rem 1.2rem; 182 } 183 184 h1, h2, h3, h4 { 185 font-family: var(--font-header); 186 } 187 main header h1 { 188 font-size: 300%; 189 line-height: 3.8rem; 190 } 191 192 figure figcaption { 193 text-align: center; 194 color: #666; 195 font-style: italic; 196 margin: 0 2rem; 197 } 198 199 footer { 200 text-align: center; 201 color: #999; 202 } 203 204 footer a { 205 color: #666; 206 } 207 208 section img { 209 display: block; 210 margin-left: auto; 211 margin-right: auto; 212 } 213 214 215 section img.shadow { 216 box-shadow: 0 28px 50px rgba(0,0,0,0.16); 217 } 218 219 table { 220 margin:1em auto; 221 border-top:2px solid; 222 border-collapse:collapse 223 } 224 table,thead { 225 border-bottom:2px solid 226 } 227 table td+td,table th+th { 228 border-left:1px solid gray 229 } 230 table tr { 231 border-top:1px solid #d3d3d3 232 } 233 td,th { 234 padding:.3em .6em; 235 vertical-align:middle 236 } 237 238 .title { text-align: center; 239 margin-bottom: 1.5rem; } 240 .subtitle { 241 text-align: center; 242 font-size: medium; 243 font-weight: bold; 244 margin-top:0; 245 color: #999; 246 } 247 248 div.drawer:before { 249 content: ""; 250 position: absolute; 251 top: 0; 252 bottom: 0; 253 left: 6.4rem; 254 width: 1px; 255 background-color: #555; 256 } 257 258 div.drawer { 259 display: flex; 260 padding: 0; 261 margin: 1rem; 262 margin-left: -7rem; 263 position: relative; 264 color: #555; 265 } 266 267 div.drawer h6 { 268 box-sizing: border-box; 269 font-style: italic; 270 flex: 0 0 7rem; 271 margin:0; 272 padding:0; 273 align-self: center; 274 text-align: right; 275 padding-right: 1.2rem; 276 } 277 278 div.drawer.info:before { 279 background-color: #00529B; 280 } 281 div.drawer.info { 282 color: #00529B; 283 } 284 285 div.drawer.note:before { 286 background-color: #9F6000; 287 } 288 div.drawer.note { 289 color: #9F6000; 290 } 291 div.drawer.tip:before { 292 background-color: #4F8A10; 293 } 294 div.drawer.tip { 295 color: #4F8A10; 296 } 297 div.drawer.warning:before { 298 background-color: #D8000C; 299 } 300 div.drawer.warning { 301 color: #D8000C; 302 } 303 div.drawer.results:before { 304 background-color: black; 305 } 306 div.drawer.results { 307 font-family:monospace,monospace; 308 font-family: var(--font-mono); 309 color: black; 310 width: 100% !important; 311 } 312 div.drawer.results p { 313 display: block; 314 unicode-bidi: embed; 315 white-space: pre; 316 margin-top: 0; 317 } 318 div.drawer.results pre { 319 background-color: inherit; 320 border: 0; 321 } 322 div.drawer.results pre.src:before { 323 background-color: #eee; 324 color: #555; 325 } 326 327 .tag { 328 font-family:var(--font-mono); 329 font-size: 1rem; 330 } 331 .tag span { 332 padding:.3em; 333 float:right; 334 margin-right:.5em; 335 border:1px solid #bbb; 336 border-radius:3px; 337 background-clip:padding-box; 338 color:#333; 339 background-color:#eee; 340 line-height:1rem; 341 } 342 343 .todo { font-family: monospace; color: red; } 344 .done { font-family: monospace; color: green; } 345 .priority { font-family: monospace; color: orange; } 346 .timestamp { color: #bebebe; } 347 .timestamp-kwd { color: #5f9ea0; } 348 .org-right { margin-left: auto; margin-right: 0px; text-align: right; } 349 .org-left { margin-left: 0px; margin-right: auto; text-align: left; } 350 .org-center { margin-left: auto; margin-right: auto; text-align: center; } 351 .underline { text-decoration: underline; } 352 #postamble p, #preamble p { font-size: 90%; margin: .2em; } 353 p.verse { margin-left: 3%; }