monastech-pages

The files used to build https://monastech.xyz/
Log | Files | Refs

style.css (2019B)

      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 html {
     32     scrollbar-gutter: stable both-edges;
     33     font-family: serif;
     34     background-color: var(--bg);
     35     color: var(--tx);
     36 }
     37 
     38 body {
     39     max-width: 46rem;
     40     padding: 1rem 3rem 1rem;
     41     margin: 1rem auto 1rem;
     42 }
     43 
     44 /* Remove horizontal and top padding on mobile */
     45 @media (max-width: 600px) {
     46   body {
     47     padding: 0 0 1rem;
     48   }
     49 }
     50 
     51 .hidden {
     52     display: none;
     53 }
     54 
     55 a {
     56     color: var(--cy);
     57     text-decoration: none;
     58 }
     59 
     60 a:hover {
     61     color: var(--cy-2);
     62 }
     63 
     64 img {
     65     display: block;
     66     max-width: 100%;
     67 }
     68 
     69 #header {
     70     padding: 1rem;
     71 }
     72 
     73 #headerLink {
     74     font-size: 2rem;
     75     font-weight: bold;
     76     color: var(--tx);
     77     padding-right: 1rem;
     78 }
     79 
     80 #headerSubtitle {
     81     color: var(--tx-2);
     82     /* Wrap to the next line when the screen is too small */
     83     display: inline-block;
     84 }
     85 
     86 nav {
     87     background-color: var(--ye);
     88     padding-block: 0.2rem;
     89     text-align: center;
     90 }
     91 
     92 nav a {
     93     color: var(--bg);
     94     padding: 0.4rem;
     95     margin: 0.1rem;
     96     /* Wrap into more lines if the screen is too small */
     97     display: inline-block;
     98 }
     99 
    100 nav a:hover {
    101     color: var(--bg);
    102     background-color: var(--ye-2);
    103 }
    104 
    105 #content {
    106     padding: 1rem;
    107     line-height: 1.5;
    108 }
    109 
    110 #frontPageArt {
    111     width: 40%;
    112     float: left;
    113     margin-block: 1rem;
    114 }
    115 
    116 .post {
    117 
    118 }
    119 
    120 .postLink {
    121 
    122 }
    123 
    124 .postDate {
    125     float: right;
    126 }
    127 
    128 hr {
    129     border: 0.1rem solid var(--ui);
    130     margin-bottom: 3rem;
    131     margin-inline: 1rem;
    132 }
    133 
    134 footer {
    135     text-align: center;
    136 }
    137 
    138 .hidden {
    139     display: none;
    140 }