public/design/css/cx.css

   1 /* Very Smol Reset */
   2 * {
   3         box-sizing: border-box;
   4         margin: 0;
   5 }
   6
   7 /* Layout */
   8
   9 /*body {
  10         display: flex;
  11         flex-direction: column;
  12         min-height: 100vh;
  13         padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
  14         font-family: Fanwood, serif;
  15         font-size: 1.4em;
  16         line-height: 1.2em;
  17         color: #222;
  18 }
  19
  20 body > * {
  21         --layout-spacing: max(8vh, 3rem);
  22         --max-width: 60ch;
  23         width: min(100%, var(--max-width));
  24         margin-left: auto;
  25         margin-right: auto;
  26 }
  27
  28 header h1 {
  29         font-size: 4em;
  30 }*/
  31
  32
  33 body {
  34         --sidebar-width: min(200px, 25%);
  35
  36         font-family: sans-serif;
  37         font-size: 1.4em;
  38         line-height: 1.2em;
  39         color: #222;
  40 }
  41
  42 body > * {
  43         padding-top: min(100px, 30%);
  44 }
  45
  46 nav {
  47         background: #6c85ff;
  48         display: block;
  49         position: fixed;
  50         top: 0;
  51         left: 0;
  52         width: var(--sidebar-width);
  53         height: 100%;
  54 }
  55
  56 nav ul {
  57         list-style: none;
  58         padding: 0;
  59         /*display: flex;
  60         flex-wrap: wrap;
  61         padding: 0;
  62         margin-left: -1rem;
  63         margin-right: -1rem;
  64         vertical-align: bottom;*/
  65 }
  66
  67 nav ul li {
  68         text-align: right;
  69 }
  70
  71 nav ul li a {
  72         display: block;
  73         padding: 0.5rem 1rem;
  74 }
  75
  76 nav ul li a:hover {
  77         background-color: rgba(255, 255, 255, 0.3);
  78 }
  79
  80 nav [aria-current="page"] {
  81         font-weight: bold;
  82 }
  83
  84 main {
  85         margin-left: calc(var(--sidebar-width) + 50px);
  86 }
  87
  88 /*main,
  89 main > * + * {
  90         margin-top: var(--layout-spacing);
  91 }
  92
  93 body > footer {
  94         margin-top: auto;
  95         padding-top: var(--layout-spacing);
  96 }
  97
  98 body > footer div {
  99         border-top: 1px solid #ccc;
 100         padding-top: 0.5em;
 101         font-size: 0.9rem;
 102         color: #767676;
 103 }
 104
 105 article * + * {
 106         margin-top: 1em;
 107 }
 108
 109 article > h1 {
 110         margin-top: 0;
 111 }
 112
 113 article > h1 a {
 114         text-decoration: none;
 115         color: #000;
 116 }
 117
 118 article > h1 + .updated {
 119         margin-top: 0;
 120 }
 121
 122 hr {
 123         width: 80%;
 124         margin: 4em auto;
 125         border: 0;
 126         height: 1px;
 127         background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 128 }*/
 129
 130 /* Typography */
 131 :is(h1, h2, h3) {
 132         line-height: 1.2;
 133 }
 134
 135 :is(h1, h2) {
 136         max-width: 40ch;
 137 }
 138
 139
 140
 141 .updated {
 142         font-size: 0.8em;
 143         color: #aaa;
 144         margin: 0 !important;
 145 }
 146
 147 :is(h2, h3):not(:first-child) {
 148         margin-top: 2em;
 149 }
 150
 151 a {
 152         color: navy;
 153         text-underline-offset: 0.08em;
 154 }
 155
 156 a:focus {
 157         outline: 1px solid currentColor;
 158         outline-offset: 0.2em;
 159 }
 160
 161 /* Media */
 162 article + article {
 163         border-top: 1px dashed #ccc;
 164         padding-top: var(--layout-spacing);
 165 }
 166
 167 article img {
 168         display: block;
 169         width: 100%;
 170         min-height: 20rem;
 171         max-height: 40vh;
 172         object-fit: cover;
 173         margin: 0 auto 1rem !important;
 174 }
 175
 176 /*@supports (aspect-ratio: 1) {
 177 article img {
 178         max-height: unset;
 179         aspect-ratio: 3/2;
 180 }
 181 }*/
 182
 183
 184
 185 /* Supporting Content */
 186
 187 code:not([class*="language"]) {
 188         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 189         font-size: 1.75ex;
 190         color: #444;
 191         background-color: rgba(0, 0, 0, 0.1);
 192         padding-right: 0.15em;
 193         padding-left: 0.15em;
 194 }
 195
 196 pre code {
 197         margin: 2rem 0;
 198         padding: 0.5em 1rem;
 199         display: block;
 200         border-left: 3px solid rgba(0, 0, 0, 0.35);
 201         background-color: rgba(0, 0, 0, 0.05);
 202         border-radius: 0 0.25rem 0.25rem 0;
 203         overflow-x: auto;
 204         font-size: 0.8em !important;
 205 }
 206
 207 blockquote {
 208         margin: 2rem 0;
 209         padding: 0.5em 1rem;
 210         border-left: 3px solid rgba(0, 0, 0, 0.35);
 211         background-color: rgba(0, 0, 0, 0.05);
 212         border-radius: 0 0.25rem 0.25rem 0;
 213 }
 214
 215
 216
 217
 218 input, textarea {
 219         font-size: 1em;
 220 }
 221
 222 #login {
 223         --login-width: max(30rem, 10%);
 224         --login-height: max(7em, 10%);
 225
 226         display: block;
 227         position: fixed;
 228         left: calc(50% - calc(var(--login-width) / 2));
 229         top: calc(50% - calc(var(--login-height) / 2));
 230         width: var(--login-width);
 231         height: var(--login-height);
 232         border: 1px solid #aaa;
 233         padding: 30px;
 234 }