style.css (11389B) - 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-active: #6dba6a;
     30     --primary-dark: #50914a;
     31     --primary-invert: #fff;
     32     --hr-color: hsl(0, 0%, 94%);
     33     --hr-dark: hsl(0, 0%, 88%);
     34     --button-color: hsl(0, 0%, 74%);
     35     --background: #fff;
     36     --code-bg: hsl(0, 0%, 96%);
     37 }
     38 
     39 @media(prefers-color-scheme:dark) {
     40     :root {
     41         --text-color: hsl(0, 0%, 80%);
     42         --text-strong: hsl(0, 0%, 80%);
     43         --secondary-text: hsl(0, 0%, 55%);
     44         --primary-logo: #4876a1;
     45         --primary-active: #1b2c3f;
     46         --primary-dark: #4d80b3;
     47         --primary-invert: hsl(0, 0%, 80%);
     48         --hr-color: hsl(0, 0%, 20%);
     49         --hr-dark: hsl(0, 0%, 20%);
     50         --button-color: hsl(0, 0%, 70%);
     51         --background: hsl(0, 0%, 8%);
     52         --code-bg: hsl(0, 0%, 8%);
     53     }
     54 }
     55 
     56 /* Only imports the letters needed for the logo ("BOacdeinorst"). The WOFF2 file
     57  * is embedded here to avoid the extra HTTP request. */
     58 @font-face {
     59     font-family: 'Libre Baskerville';
     60     font-weight: 700;
     61     src: url('data:application/font-woff2;charset=utf-8;base64,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') format('woff2');
     62     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;
     63 }
     64 
     65 /* declarations }}} */
     66 
     67 /* defaults {{{ */
     68 
     69 *,
     70 *::after,
     71 *::before {
     72     box-sizing: border-box;
     73 }
     74 
     75 body {
     76     margin: 0;
     77     color: var(--text-color);
     78     font-family: sans-serif;
     79     line-height: 1.7;
     80     word-break: break-word;
     81     background: var(--background);
     82 }
     83 
     84 article,
     85 aside,
     86 div,
     87 figcaption,
     88 figure,
     89 footer,
     90 header,
     91 hgroup,
     92 main,
     93 nav,
     94 section {
     95     display: block;
     96 }
     97 
     98 h1,
     99 h2,
    100 h3,
    101 h4,
    102 h5,
    103 h6 {
    104     margin-top: 0;
    105     margin-bottom: 0;
    106     line-height: 1.2;
    107     color: var(--text-strong);
    108 }
    109 
    110 h1 {
    111     margin-bottom: 2px;
    112     font-size: 2em;
    113 }
    114 
    115 b,
    116 strong {
    117     font-weight: 700;
    118     color: var(--text-strong);
    119 }
    120 
    121 ul {
    122     margin: 0;
    123     padding: 0;
    124 }
    125 
    126 a {
    127     color: var(--primary-dark);
    128 }
    129 
    130 a:hover {
    131     text-decoration: none;
    132 }
    133 
    134 table {
    135     width: 100%;
    136     border-collapse: collapse;
    137     border-spacing: 0;
    138     margin-bottom: 2rem;
    139 }
    140 
    141 table td,
    142 table th {
    143     min-width: 80px;
    144     padding: 0.75rem 0.5rem;
    145     line-height: 1.5;
    146     border-bottom: 1px solid var(--hr-dark);
    147 }
    148 
    149 table th {
    150     font-size: 0.9em;
    151     text-align: left;
    152 }
    153 
    154 svg {
    155     fill: currentColor;
    156     stroke: currentColor;
    157     max-width: 400px;
    158 }
    159 
    160 /* defaults }}} */
    161 
    162 /* header {{{ */
    163 
    164 header#page-header {
    165     border-bottom: 2px solid var(--hr-color);
    166     padding: calc(1.5 * var(--gap)) var(--gap);
    167 }
    168 
    169 header#page-header .content {
    170     max-width: var(--main-width);
    171     margin-right: auto;
    172     margin-left: auto;
    173 }
    174 
    175 header#page-header .content .logo {
    176     font-size: 1.9em;
    177     font-weight: bold;
    178     font-family: 'Libre Baskerville', serif;
    179     color: var(--primary-logo);
    180     line-height: 1;
    181     text-decoration: none;
    182 }
    183 
    184 header#page-header .content .logo:hover {
    185     color: var(--primary-dark);
    186     text-decoration: none;
    187 }
    188 
    189 header#page-header .content nav {
    190     color: var(--secondary-text);
    191 }
    192 
    193 header#page-header .content nav a {
    194     color: var(--secondary-text);
    195     text-decoration: none;
    196 }
    197 
    198 header#page-header .content nav a:hover {
    199     text-decoration: underline;
    200 }
    201 
    202 /* header }}} */
    203 
    204 /* footer {{{ */
    205 
    206 footer#page-footer {
    207     border-top: 2px solid var(--hr-color);
    208     padding: calc(1.5 * var(--gap)) var(--gap);
    209 }
    210 
    211 footer#page-footer .content {
    212     max-width: var(--main-width);
    213     margin-right: auto;
    214     margin-left: auto;
    215     text-align: center;
    216 }
    217 
    218 footer#page-footer .content nav {
    219     color: var(--secondary-text);
    220 }
    221 
    222 footer#page-footer .content nav a {
    223     color: var(--secondary-text);
    224     text-decoration: none;
    225 }
    226 
    227 footer#page-footer .content nav a:hover {
    228     text-decoration: underline;
    229 }
    230 
    231 /* footer }}} */
    232 
    233 /* main {{{ */
    234 
    235 main {
    236     position: relative;
    237     max-width: calc(var(--main-width) + var(--gap) * 2);
    238     padding: 0 var(--gap);
    239     margin: var(--gap) auto calc(var(--gap) * 2) auto;
    240 }
    241 
    242 .pagination {
    243     display: flex;
    244 }
    245 
    246 .button {
    247     color: var(--secondary-text);
    248     font-size: 0.8em;
    249     line-height: 2.8em;
    250     background: var(--background);
    251     border-radius: calc(2.8em/2);
    252     padding-left: 1.2em;
    253     padding-right: 1.2em;
    254     border: 1px solid transparent;
    255     border-color: var(--button-color);
    256     border-width: 1px;
    257     text-decoration: none;
    258 }
    259 
    260 .button:hover {
    261     color: var(--background);
    262     border-color: transparent;
    263     background: var(--button-color);
    264     text-decoration: none;
    265 }
    266 
    267 .button.right {
    268     margin-left: auto;
    269 }
    270 
    271 /* main }}} */
    272 
    273 /* post entry summary {{{ */
    274 
    275 main.list > header {
    276     margin-bottom: var(--gap);
    277 }
    278 
    279 article.summary {
    280     padding-top: 1rem;
    281     padding-bottom: 1rem;
    282 }
    283 
    284 article.summary h2 a {
    285     color: var(--text-color);
    286     text-decoration: none;
    287 }
    288 
    289 article.summary h2 a:hover {
    290     text-decoration: underline;
    291 }
    292 
    293 article.summary p {
    294     margin: 0 !important;
    295 }
    296 
    297 article.summary header {
    298     margin-bottom: 1rem;
    299 }
    300 
    301 article.summary .metadata {
    302     color: var(--secondary-text);
    303 }
    304 
    305 article.summary .metadata a {
    306     color: var(--secondary-text);
    307     text-decoration: none;
    308 }
    309 
    310 article.summary .metadata a:hover {
    311     text-decoration: underline;
    312 }
    313 
    314 article.summary:not(:first-of-type) {
    315     border-top: 2px solid var(--hr-color);
    316 }
    317 
    318 /* post entry summary }}} */
    319 
    320 /* article {{{ */
    321 
    322 article header {
    323     margin-bottom: var(--content-gap);
    324 }
    325 
    326 article .metadata {
    327     color: var(--secondary-text);
    328 }
    329 
    330 article .metadata a {
    331     color: var(--secondary-text);
    332     text-decoration: none;
    333 }
    334 
    335 article .metadata a:hover {
    336     text-decoration: underline;
    337 }
    338 
    339 article .content h1 {
    340     margin-top: 2.5rem;
    341     margin-bottom: 2rem;
    342 }
    343 
    344 article .content h2 {
    345     margin-top: 2rem;
    346     margin-bottom: 1.5rem;
    347 }
    348 
    349 article .content h3 {
    350     margin-top: 1.5rem;
    351     margin-bottom: 1rem;
    352 }
    353 
    354 article .content h4,
    355 article .content h5,
    356 article .content h6 {
    357     margin-top: 1.5rem;
    358     margin-bottom: 0.5rem;
    359 }
    360 
    361 article .content ol,
    362 article .content p,
    363 article .content:not(li) > ul {
    364     margin-bottom: var(--content-gap);
    365 }
    366 
    367 article .content ol,
    368 article .content ul {
    369     padding-left: 1.25rem;
    370 }
    371 
    372 article .content li {
    373     margin-top: 0.3rem;
    374 }
    375 
    376 article .content li p {
    377     margin-bottom: 0;
    378 }
    379 
    380 article .content pre {
    381     margin-bottom: var(--gap);
    382     border-radius: 4px;
    383     overflow-x: auto;
    384     margin-left: 0;
    385     margin-right: 0;
    386     border: 1px solid var(--hr-dark);
    387     background-color: var(--code-bg)!important;
    388 }
    389 
    390 article .content code {
    391     border: 1px solid var(--hr-dark);
    392     background-color: var(--code-bg);
    393     padding: 4px 6px;
    394     font-family: monospace;
    395     line-height: 1.5;
    396     border-radius: 2px;
    397 }
    398 
    399 article .content pre code {
    400     display: block;
    401     margin-left: 0;
    402     margin-right: 0;
    403     padding: calc(var(--gap)/2);
    404     border: none;
    405     background: 0 0;
    406 }
    407 
    408 article .content blockquote {
    409     padding: 0 0 0 1.2rem;
    410     border-left: 3px solid var(--secondary-text);
    411     color: var(--secondary-text);
    412 }
    413 
    414 article .content hr {
    415     height: 2px;
    416     margin-top: var(--content-gap);
    417     margin-bottom: var(--content-gap);
    418     background: var(--hr-color);
    419     border-top: 0;
    420     border-bottom: 0;
    421     border: 0;
    422 }
    423 
    424 /* article }}} */
    425 
    426 /* other {{{ */
    427 
    428 .table-container {
    429     overflow-x: auto;
    430 }
    431 
    432 /* other }}} */