blog

My personal blog.
Log | Files | Refs

style.css (1435B)

      1 :root {
      2     --bg: #FFFCF0;
      3     --bg-2: #F2F0E5;
      4     --ui: #E6E4D9;
      5     --tx: #100F0F;
      6     --tx-2: #6F6E69;
      7     --ye: #AD8301;
      8     --ye-2: #D0A215;
      9     --cy: #24837B;
     10     --cy-2: #3AA99F;
     11 }
     12 
     13 @media (prefers-color-scheme: dark) {
     14     :root {
     15         --bg: #100F0F;
     16         --bg-2: #1C1B1A;
     17         --tx: #CECDC3;
     18         --tx-2: #878580;
     19         --ye: #D0A215;
     20         --ye-2: #AD8301;
     21         --cy: #3AA99F;
     22         --cy-2: #24837B;
     23     }
     24 }
     25 
     26 html {
     27     scrollbar-gutter: stable both-edges;
     28     font-family: sans-serif;
     29     background-color: var(--bg-2);
     30 }
     31 
     32 body {
     33     background-color: var(--bg);
     34     color: var(--tx);
     35     max-width: 46rem;
     36     padding: 1rem 3rem 1rem;
     37     margin: 1rem auto 1rem;
     38 }
     39 
     40 .hidden {
     41     display: none;
     42 }
     43 
     44 a {
     45     color: var(--cy);
     46     text-decoration: none;
     47 }
     48 
     49 a:hover {
     50     color: var(--cy-2);
     51 }
     52 
     53 img {
     54     display: block;
     55     max-width: 100%;
     56 }
     57 
     58 #header {
     59     padding: 1rem;
     60 }
     61 
     62 #headerLink {
     63     font-size: 2rem;
     64     font-weight: bold;
     65     color: var(--tx);
     66     padding-right: 1rem;
     67 }
     68 
     69 #headerSubtitle {
     70     color: var(--tx-2);
     71 }
     72 
     73 nav {
     74     background-color: var(--ye);
     75     padding-block: 0.6rem;
     76     padding-left: 0.2rem;
     77 }
     78 
     79 nav a {
     80     color: var(--bg);
     81     padding: 0.4rem;
     82     margin-right: 0.2rem;
     83 }
     84 
     85 nav a:hover {
     86     background-color: var(--ye-2);
     87     color: var(--bg);
     88 }
     89 
     90 
     91 article p {
     92     color: var(--tx-2);
     93 }
     94 
     95 #content {
     96     padding: 1rem;
     97     line-height: 1.5;
     98 }
     99 
    100 .hidden {
    101     display: none;
    102 }