style.css (2989B)

      1 :root {
      2     --bg: #FFFCF0;
      3     --bg-2: #F2F0E5;
      4     --ui: #E6E4D9;
      5     --ui-2: #DAD8CE;
      6     --ui-3: #CECDC3;
      7     --tx: #100F0F;
      8     --tx-2: #6F6E69;
      9     --ye: #AD8301;
     10     --ye-2: #D0A215;
     11     --cy: #24837B;
     12     --cy-2: #3AA99F;
     13 }
     14 
     15 @media (prefers-color-scheme: dark) {
     16     :root {
     17         --bg: #100F0F;
     18         --bg-2: #1C1B1A;
     19         --ui: #282726;
     20         --ui-2: #343331;
     21         --ui-3: #403E3C;
     22         --tx: #CECDC3;
     23         --tx-2: #878580;
     24         --ye: #D0A215;
     25         --ye-2: #AD8301;
     26         --cy: #3AA99F;
     27         --cy-2: #24837B;
     28     }
     29 }
     30 
     31 /* Set the baseline for rem units */
     32 html { font-size: 2.4vw; }
     33 @media all and (min-width:1000px) { html { font-size: 24px; } }
     34 @media all and (max-width:520px) {
     35     html { font-size: 18px; }
     36 
     37 }
     38 
     39 html {
     40     /* Keep width uniform */
     41     scrollbar-gutter: stable both-edges;
     42 
     43     /* Colors */
     44     background-color: var(--bg);
     45     color: var(--tx);
     46 
     47     /* Global font settings */
     48     font-family: "Vollkorn", serif;
     49     font-optical-sizing: auto;
     50     font-weight: 400;
     51     font-style: normal;
     52 }
     53 
     54 body {
     55     /* Document size */
     56     width: 100%;
     57     max-width: 44rem; /* Approx 1000px + 2rem */
     58     margin-inline: auto;
     59 
     60     /* Font settings */
     61     line-height: 1.45;
     62     font-size: 0.91rem;
     63     text-rendering: optimizeLegibility;
     64     font-feature-settings: "kern";
     65 }
     66 
     67 #cover {
     68     position: fixed;
     69     width: 9rem;
     70     margin-left: 1rem;
     71 }
     72 
     73 #coverLogo {
     74     /* Make sure the area is reserved for when the area is still winning */
     75     width: 9rem;
     76     height: 9rem;
     77     
     78     margin-bottom: 0.2rem;
     79 }
     80 
     81 #coverTitle {
     82     text-align: center;
     83     display: block;
     84     font-size: 150%;
     85     font-weight: 900;
     86     color: var(--ye);
     87 }
     88 
     89 #coverSubtitle {
     90     color: var(--tx-2);
     91     width: 10rem;
     92 }
     93 
     94 #coverNav {
     95     width: 9rem;
     96     margin-top: 1rem;
     97 }
     98 
     99 #coverNav a {
    100     display: block;
    101     margin-bottom: 0.2rem;
    102     text-align: center;
    103 }
    104 
    105 #title {
    106     font-size: 2.1rem;
    107     margin-bottom: 0;
    108     border-bottom: 0.1rem solid var(--ui);
    109 }
    110 
    111 #content {
    112     margin-left: 13.5rem;
    113     margin-right: 1rem;
    114 }
    115 
    116 /* Adjust rendering for mobile */
    117 @media all and (max-width:520px) {
    118     body {
    119         padding: 0;
    120     }
    121     #cover {
    122         position: relative;
    123         width: 9rem;
    124         margin-inline: auto;
    125         display: block;
    126         float: none;
    127     }
    128     #content {
    129         margin: 0;
    130         padding: 1rem;
    131     }
    132 }
    133 
    134 h1 {
    135     font-family: "Vollkorn SC", serif;
    136     font-size: 110%;
    137 }
    138 
    139 h2 {
    140     font-family: "Vollkorn SC", serif;
    141     font-size: 105%;
    142 }
    143 
    144 .hidden {
    145     display: none;
    146 }
    147 
    148 .postLink {
    149     display: block;
    150 }
    151 
    152 a {
    153     font-family: "Vollkorn SC", serif;
    154     color: var(--cy);
    155     text-decoration: none;
    156 }
    157 
    158 a:hover {
    159     color: var(--cy-2);
    160 }
    161 
    162 code {
    163     font-family: monospace;
    164     background-color: #F2F0E5;
    165     font-size: 80%;
    166     padding: 0.2rem;
    167     border-radius: 0.4rem;
    168 }
    169 
    170 img {
    171     display: block;
    172     max-width: 100%;
    173 }
    174 
    175 hr {
    176     border: 0.05rem solid var(--ui);
    177     margin-block: 1rem;
    178 }
    179 
    180 footer {
    181     text-align: center;
    182 }