style.css (10625B) - raw

      1 /*
      2 Copyright (C) 2019-2020 Oscar Benedito
      3 
      4 This program is free software: you can redistribute it and/or modify
      5 it under the terms of the GNU General Public License as published by
      6 the Free Software Foundation, either version 3 of the License, or
      7 (at your option) any later version.
      8 
      9 This program is distributed in the hope that it will be useful,
     10 but WITHOUT ANY WARRANTY; without even the implied warranty of
     11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     12 GNU General Public License for more details.
     13 
     14 You should have received a copy of the GNU General Public License
     15 along with this program.  If not, see <https://www.gnu.org/licenses/>.
     16 */
     17 
     18 /* declarations {{{ */
     19 
     20 :root {
     21     --gap: 1.5rem;
     22     --content-gap: 1.5rem;
     23     --main-width: 800px;
     24 
     25     --text-color: hsl(0, 0%, 12%);
     26     --text-strong: hsl(0, 0%, 10%);
     27     --secondary-text: hsl(0, 0%, 44%);
     28     --primary-logo: #6dba6a;
     29     --primary-text: #50914a;
     30     --hr-color: hsl(0, 0%, 94%);
     31     --hr-dark: hsl(0, 0%, 88%);
     32     --button-color: hsl(0, 0%, 74%);
     33     --background: #fff;
     34     --code-bg: hsl(0, 0%, 96%);
     35 }
     36 
     37 @media(prefers-color-scheme:dark) {
     38     :root {
     39         --text-color: hsl(0, 0%, 80%);
     40         --text-strong: hsl(0, 0%, 80%);
     41         --secondary-text: hsl(0, 0%, 55%);
     42         --primary-logo: #4876a1;
     43         --primary-text: #4d80b3;
     44         --hr-color: hsl(0, 0%, 20%);
     45         --hr-dark: hsl(0, 0%, 20%);
     46         --button-color: hsl(0, 0%, 70%);
     47         --background: hsl(0, 0%, 8%);
     48         --code-bg: hsl(0, 0%, 8%);
     49     }
     50 }
     51 
     52 /* Only imports the letters needed for the logo ("BOacdeinorst"). The WOFF2 file
     53  * is embedded here to avoid the extra HTTP request. */
     54 @font-face {
     55     font-family: 'Libre Baskerville';
     56     font-weight: 700;
     57     /* {{{ */ src: url('data:application/font-woff2;charset=utf-8;base64,d09GMk9UVE8AAAnUAAsAAAAAD3wAAAmKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADZEPG4MsHBoGYAB0ATYCJAM0BAYFhVwHIBu4DlEEGwcQNncvxY+EzM0bzQcqVTRRtqxM5XBUP3eEc35qgTwUCQGWkqTM8GIyca0NMqRMxYt269Q6M71sP+Gfl3t27vvhX5BRpkFUIAm1RVkiGZZwW1D5nwzgf62pDZAEGp/Z8TEuNs7dvT36YZLANikAOlI1ph5BxhaMb40zfYpzSue/E8Kci8t0imYQFRV8Tt2Cb+CP9L+GJ22PO+cK9KfEKf5IMVBKmA9SBJUiqpUgDTlJlgoI6a7fntrfT/1KkO428DcJyPISFyrqeNcLKUdao17Rg+8RHG2SX2jOyzP3lw0M+LjcFv0zMdJK184efiAujIo1+mZZauuweULYajjIXjBcVWWb2Sr079Oeh3za3WIrhRB9U7kmGjuL+CTJe8lGo721Ca8b5QHvoIoFjPIeq918ebjdNu2KFNa3MMvdEDnpDRPTCodGfTd/IWLAsarZiZkpicY67RsaPyatlm8vmPstfAPUtNn4ay2jQ/9vBcbaWP8LRkRepsC2pq88+JaP90hN/hfgfO7Pb61RNRcMuzJkua7EWLA0lUbCUP6HsSPZArt5/KEiqZpU13Lq3+DGNLGpzWxBK9rUjspyt78jne96t7vfk89RbueinUuK3iC6123b6DY83dqdhEkkjI6MZ+CCi645d8IiQDyE04+H7B64XTxq6bYuzVC/Rd/2vaQputHPSAe7VqY9KyfmLJDmDJ/dpQZPAmjM9S6S3buLity75aJevWW5l6iH99CWa92te9PcARvK9510gfqQSMIncMS3a7fObfhaxzs9vHOu9HKZiMePHTtltGHg2C0nJHDQwLY5QKKJsb6luWXtgNKytWucS0QcN2pobZMAl1x0zdnjlv/g8ZZV1p2GXZud7vKcLZ2bNu/ZIFuaohsBNOneR5tD318ygGRKRE8nMfDURZtmjl78lcfKoHEctF2sLafbjp1XPEmavGXawY+8cpkm86xamb7iHOOYJ80ZPqtFDR4rDo78p2se7fnq0t6Ne1eJg7dqExmsTAdfzt617aAOhpiOd0AEbs+t20WLxzd3STh1/OWGr+sOVgKgRtcDuPa48zDtOASexFNFK04TgCc+4IMn9J0v4SmiFXOxDJ4xzqPUO4khph89bIAWx0y+AIegSZuTOJk5RmhcComwEccxGQxOF6AGDiyCcKyUciSJVCBakoRd8AsqVf6Kx6UzOEagMTk8w4VhCDXVSjutNVBfQ+11kKCSunwHUdQ4kTLU095kC5U6734DO3XaO3114ZcfxFdl2MeVBRKhPA4XLqYwCQyMAikEFhkF9nMEo89kAgGDxJZGM+zlKoI+QaBSBEhUV2T0ReNSGVgGInugqsDer8Tok4TAcjCxpZECezl7/dqR2w2lGzaUX0w6RHxILeJNNCSTpICKIEh7em/H8YOSPlqgyiAWHGBUGxk96TguVYAK4M86qzDsykSBdVZm2DzSdDutJ9vHnVMyj4HvEOoDSOoPEUJh6/Zdqw/06knroSRLoPZAXWU21FWHM3oQZrisHrh4GjZ7rK5AkCACJkFaZajN7lLSgr8+XOk8JXmKig5d4sHH9IxEiHNo1g208/ixezxgortEuovkho4tttLXYpi4EcMTqwnsICXMw0XYdjyQoPt++uXZsQ6X5HKs6t2aj+rYnSCRSArDwSJ6kfDb/MXiVR3r/rHXEt1zZE7fgdLg/F5jWhn0UUKswHasKLCpUQy7uJLAzo5k9EMeyuY1ULhm2xodWb+GFtcG9xnj471oZWas+Lcm6FckV8IifhCllcXOFUilUj0a2JQWtandHexEF7rSrR70rm/UH5VK5a/iVLxKUlVRFn4MBHHdO7Xr184Q3fIBBK+YuWj2fAlu6rbPmrUWwjLuk3BSnWDiTTJJMqgJBRkvbzivnJHIK1jBXV968MgJw6FSc5uB46d2kLCS92stRyaSVqQeGUzyoQ2pDeNhPLSB2pAPg0krqEcmSn9lDUmIBn/oArb3EAIJkPCehBAb6RJF/Em8hOF+hkDSoQLxgiRIhjDwhjRIJGGgI8lSG83DYymEJSEdUtMzOz2GUAg68uS+hNOm0PvtnVY1MZDKhCI+JJkk/yQaiL3m2XhgrzRHlwfNuUYTLEMLRFv/3gN6GWr2vgMihLlv3nGXD7ZvkNb2XdyzC4/X5vdaajGYGjRJarSzy+f20g3rDrkPn10wqGsji/vtQNGswz+LuYIdh0ecMIDqmufVtd6HCDop1XblbS/lnRvWle7dlldru1iuwwlMCCxSSuMFz6o4Yc6w2Z1q8sSPxhFjx9aYLFrhkouuNnfiIkA83r9y5eoyw4nNck3JTOO5ukZOm+eAe61zlThyqxbDYujFHZh/ZLFLPL5sY8lGA05j/lhoTEbatTKNjw4crIw4Om4IHm7i8bjR1U0CDgQGJNx/1LCxhQZzsgC+nWlcdcLYrMmiFQ/f8UCC00DjGS6l0Xl8Qql1YQbk3RgSWA6xeMpSE4PP/4o8jwNPAo1J2oxMATONKAgxRLGo82FgAfKigRDaUCmfjv2JKMJERkTVovNKZ+J/kNpTHfnC0P/PnnjmqXde1ULehjL/SSP9hvh3QoFlq8f//0Ft+pytWFuYRdD/18ubauZraB71X0GjIH71GZi/zlahUHyglrh6Y/AFXrwxMIqKD0fAIxSAqyhilDTEfMFClWpbNXPmgKGhRttMz6KZ6pfUW5LfCKmYwZR7Cy/9ByCjugYuZ39fETJs6TNoQdrTd2oVQshI3R0R1OIPokY5NHqTfw3kq3W1YmYncxj4F6632gv0/6PttyP0f6kUPZP2UfBVOlo0FQ11v4lS3KuavSI+9PKr/sNLrR6ijfPvyHot0/5d+vdHN2c5u8CLqzKXuiele3J0F4Evrk7iO9/R+GQV5pYKfUX8LFRl3CImxf3pJqp2VVqjVVhKxC0CCp+aqCLUGvKFEK0rNWrjjRB1hxBGqdhSpuLVPqY2smNMI3pqMi1+ciI6cvJ6HAoN058sW46BjCJZRTFKkiCxkWKNwNbMLPI42k3kK0T1eRFzciSMDKmdbCJz2iZWDmO7kYxSbdmgNyfy2JGoYvfGVyC1NWI2gMjpDQ1iV2B4cSQzNptlntJfH95CqZRjwjyPw9YEklwaQlUGypHTthvArvyD2dkqDgXyqWVYymc3283JLEwgpbrMyWK5KiIXfl47E7NUl6Nlg234LAdbxPah5WH3WbISxkI3Zg0DNfFKwBoX6ZipfgD6igDdRCYJNacaSv3fZS5XBQA=') format('woff2'); /* }}} */
     58     unicode-range: U+0042,U+004F,U+0061,U+0063,U+0064,U+0065,U+0069,U+006E,U+006F,U+0072,U+0073,U+0074;
     59 }
     60 
     61 /* declarations }}} */
     62 
     63 /* defaults {{{ */
     64 
     65 *,
     66 *::after,
     67 *::before {
     68     box-sizing: border-box;
     69 }
     70 
     71 body {
     72     margin: 0;
     73     color: var(--text-color);
     74     font-family: sans-serif;
     75     line-height: 1.7;
     76     word-break: break-word;
     77     background: var(--background);
     78 }
     79 
     80 article,
     81 aside,
     82 div,
     83 figcaption,
     84 figure,
     85 footer,
     86 header,
     87 hgroup,
     88 main,
     89 nav,
     90 section {
     91     display: block;
     92 }
     93 
     94 h1,
     95 h2,
     96 h3,
     97 h4,
     98 h5,
     99 h6 {
    100     margin-top: 0;
    101     margin-bottom: 0;
    102     line-height: 1.2;
    103     color: var(--text-strong);
    104 }
    105 
    106 h1 {
    107     margin-bottom: 2px;
    108     font-size: 2em;
    109 }
    110 
    111 b,
    112 strong {
    113     font-weight: 700;
    114     color: var(--text-strong);
    115 }
    116 
    117 ul {
    118     margin: 0;
    119     padding: 0;
    120 }
    121 
    122 a {
    123     color: var(--primary-text);
    124 }
    125 
    126 a:hover {
    127     text-decoration: none;
    128 }
    129 
    130 table {
    131     width: 100%;
    132     border-collapse: collapse;
    133     border-spacing: 0;
    134     margin-bottom: 2em;
    135 }
    136 
    137 table td,
    138 table th {
    139     min-width: 80px;
    140     padding: 0.75em 0.5em;
    141     line-height: 1.5;
    142     border-bottom: 1px solid var(--hr-dark);
    143 }
    144 
    145 table th {
    146     font-size: 0.9em;
    147     text-align: left;
    148 }
    149 
    150 svg {
    151     fill: currentColor;
    152     stroke: currentColor;
    153     max-width: 400px;
    154 }
    155 
    156 /* defaults }}} */
    157 
    158 /* header {{{ */
    159 
    160 header#page-header {
    161     border-bottom: 2px solid var(--hr-color);
    162     padding: calc(1.5 * var(--gap)) var(--gap);
    163 }
    164 
    165 header#page-header .content {
    166     max-width: var(--main-width);
    167     margin-right: auto;
    168     margin-left: auto;
    169 }
    170 
    171 header#page-header .content .logo {
    172     font-size: 1.9em;
    173     font-weight: bold;
    174     font-family: 'Libre Baskerville', serif;
    175     color: var(--primary-logo);
    176     line-height: 1;
    177     text-decoration: none;
    178 }
    179 
    180 header#page-header .content .logo:hover {
    181     color: var(--primary-text);
    182     text-decoration: none;
    183 }
    184 
    185 header#page-header .content nav,
    186 header#page-header .content nav a {
    187     color: var(--secondary-text);
    188 }
    189 
    190 /* header }}} */
    191 
    192 /* footer {{{ */
    193 
    194 footer#page-footer {
    195     padding: 0 var(--gap);
    196     margin: calc(1.5 * var(--gap)) 0;
    197 }
    198 
    199 footer#page-footer .content {
    200     max-width: var(--main-width);
    201     margin-right: auto;
    202     margin-left: auto;
    203     text-align: center;
    204     color: var(--secondary-text);
    205 }
    206 
    207 footer#page-footer .content a {
    208     color: var(--secondary-text);
    209 }
    210 
    211 /* footer }}} */
    212 
    213 /* main {{{ */
    214 
    215 main {
    216     position: relative;
    217     max-width: calc(var(--main-width) + var(--gap) * 2);
    218     padding: 0 var(--gap);
    219     margin: var(--gap) auto calc(var(--gap) * 2) auto;
    220 }
    221 
    222 .pagination {
    223     display: flex;
    224 }
    225 
    226 .button {
    227     color: var(--secondary-text);
    228     font-size: 0.8em;
    229     line-height: 2.8em;
    230     background: var(--background);
    231     border-radius: 1.4em;
    232     padding: 0 1.2em;
    233     border: 1px solid transparent;
    234     border-color: var(--button-color);
    235     border-width: 1px;
    236     text-decoration: none;
    237 }
    238 
    239 .button:hover {
    240     color: var(--background);
    241     border-color: transparent;
    242     background: var(--button-color);
    243     text-decoration: none;
    244 }
    245 
    246 .button.right {
    247     margin-left: auto;
    248 }
    249 
    250 /* main }}} */
    251 
    252 /* post entry summary {{{ */
    253 
    254 main.list > header {
    255     margin-bottom: var(--gap);
    256 }
    257 
    258 article.summary {
    259     padding: 1em 0;
    260 }
    261 
    262 article.summary h2 a {
    263     color: var(--text-color);
    264     text-decoration: none;
    265 }
    266 
    267 article.summary h2 a:hover {
    268     text-decoration: underline;
    269 }
    270 
    271 article.summary p {
    272     margin: 0 !important;
    273 }
    274 
    275 article.summary header {
    276     margin-bottom: 1em;
    277 }
    278 
    279 article.summary .metadata,
    280 article.summary .metadata a {
    281     color: var(--secondary-text);
    282 }
    283 
    284 article.summary:not(:first-of-type) {
    285     border-top: 2px solid var(--hr-color);
    286 }
    287 
    288 /* post entry summary }}} */
    289 
    290 /* article {{{ */
    291 
    292 article header {
    293     margin-bottom: var(--content-gap);
    294 }
    295 
    296 article .metadata,
    297 article .metadata a {
    298     color: var(--secondary-text);
    299 }
    300 
    301 article .content h1 {
    302     margin-top: 2.5rem;
    303     margin-bottom: 2rem;
    304 }
    305 
    306 article .content h2 {
    307     margin-top: 2rem;
    308     margin-bottom: 1.5rem;
    309 }
    310 
    311 article .content h3 {
    312     margin-top: 1.5rem;
    313     margin-bottom: 1rem;
    314 }
    315 
    316 article .content h4,
    317 article .content h5,
    318 article .content h6 {
    319     margin-top: 1.5rem;
    320     margin-bottom: 0.5rem;
    321 }
    322 
    323 article .content ol,
    324 article .content p,
    325 article .content:not(li) > ul {
    326     margin-bottom: var(--content-gap);
    327 }
    328 
    329 article .content ol,
    330 article .content ul {
    331     padding-left: 1.25rem;
    332 }
    333 
    334 article .content li {
    335     margin-top: 0.3rem;
    336 }
    337 
    338 article .content li p {
    339     margin-bottom: 0;
    340 }
    341 
    342 article .content pre {
    343     margin-bottom: var(--gap);
    344     border-radius: 4px;
    345     overflow-x: auto;
    346     margin-left: 0;
    347     margin-right: 0;
    348     border: 1px solid var(--hr-dark);
    349     background-color: var(--code-bg)!important;
    350 }
    351 
    352 article .content code {
    353     border: 1px solid var(--hr-dark);
    354     background-color: var(--code-bg);
    355     padding: 4px 6px;
    356     font-family: monospace;
    357     line-height: 1.5;
    358     border-radius: 2px;
    359 }
    360 
    361 article .content pre code {
    362     display: block;
    363     margin-left: 0;
    364     margin-right: 0;
    365     padding: calc(var(--gap)/2);
    366     border: none;
    367     background: 0 0;
    368 }
    369 
    370 article .content blockquote {
    371     padding: 0 0 0 1.2rem;
    372     border-left: 3px solid var(--secondary-text);
    373     color: var(--secondary-text);
    374 }
    375 
    376 article .content hr {
    377     height: 2px;
    378     margin-top: var(--content-gap);
    379     margin-bottom: var(--content-gap);
    380     background: var(--hr-color);
    381     border-top: 0;
    382     border-bottom: 0;
    383     border: 0;
    384 }
    385 
    386 /* article }}} */
    387 
    388 /* other {{{ */
    389 
    390 .table-container {
    391     overflow-x: auto;
    392 }
    393 
    394 /* other }}} */