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: 50px 100px;
  86         margin-left: calc(var(--sidebar-width) + 50px);
  87 }
  88
  89 /*main,
  90 main > * + * {
  91         margin-top: var(--layout-spacing);
  92 }
  93
  94 body > footer {
  95         margin-top: auto;
  96         padding-top: var(--layout-spacing);
  97 }
  98
  99 body > footer div {
 100         border-top: 1px solid #ccc;
 101         padding-top: 0.5em;
 102         font-size: 0.9rem;
 103         color: #767676;
 104 }
 105
 106 article * + * {
 107         margin-top: 1em;
 108 }
 109
 110 article > h1 {
 111         margin-top: 0;
 112 }
 113
 114 article > h1 a {
 115         text-decoration: none;
 116         color: #000;
 117 }
 118
 119 article > h1 + .updated {
 120         margin-top: 0;
 121 }
 122
 123 hr {
 124         width: 80%;
 125         margin: 4em auto;
 126         border: 0;
 127         height: 1px;
 128         background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 129 }*/
 130
 131 /* Typography */
 132 :is(h1, h2, h3) {
 133         line-height: 1.2;
 134 }
 135
 136 :is(h1, h2) {
 137         max-width: 40ch;
 138 }
 139
 140
 141
 142 .updated {
 143         font-size: 0.8em;
 144         color: #aaa;
 145         margin: 0 !important;
 146 }
 147
 148 :is(h2, h3):not(:first-child) {
 149         margin-top: 2em;
 150 }
 151
 152 a {
 153         color: navy;
 154         text-underline-offset: 0.08em;
 155 }
 156
 157 a:focus {
 158         outline: 1px solid currentColor;
 159         outline-offset: 0.2em;
 160 }
 161
 162 /* Media */
 163 article + article {
 164         border-top: 1px dashed #ccc;
 165         padding-top: var(--layout-spacing);
 166 }
 167
 168 article img {
 169         display: block;
 170         width: 100%;
 171         min-height: 20rem;
 172         max-height: 40vh;
 173         object-fit: cover;
 174         margin: 0 auto 1rem !important;
 175 }
 176
 177 /*@supports (aspect-ratio: 1) {
 178 article img {
 179         max-height: unset;
 180         aspect-ratio: 3/2;
 181 }
 182 }*/
 183
 184
 185
 186 /* Supporting Content */
 187
 188 code:not([class*="language"]) {
 189         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 190         font-size: 1.75ex;
 191         color: #444;
 192         background-color: rgba(0, 0, 0, 0.1);
 193         padding-right: 0.15em;
 194         padding-left: 0.15em;
 195 }
 196
 197 pre code {
 198         margin: 2rem 0;
 199         padding: 0.5em 1rem;
 200         display: block;
 201         border-left: 3px solid rgba(0, 0, 0, 0.35);
 202         background-color: rgba(0, 0, 0, 0.05);
 203         border-radius: 0 0.25rem 0.25rem 0;
 204         overflow-x: auto;
 205         font-size: 0.8em !important;
 206 }
 207
 208 blockquote {
 209         margin: 2rem 0;
 210         padding: 0.5em 1rem;
 211         border-left: 3px solid rgba(0, 0, 0, 0.35);
 212         background-color: rgba(0, 0, 0, 0.05);
 213         border-radius: 0 0.25rem 0.25rem 0;
 214 }
 215
 216
 217 table {
 218         width: 100%;
 219 }
 220
 221 tr:nth-child(even) {
 222         background-color: #f2f2f2;
 223 }
 224
 225 tr:hover {
 226         background-color: #f2f2ff;
 227 }
 228
 229 td.fill {
 230         width: 100%;
 231 }
 232
 233 td a {
 234         display: block;
 235         padding: 2px;
 236 }
 237
 238 input, textarea {
 239         font-size: 1em;
 240 }
 241
 242 #login {
 243         --login-width: max(30rem, 10%);
 244         --login-height: max(7em, 10%);
 245
 246         display: block;
 247         position: fixed;
 248         left: calc(50% - calc(var(--login-width) / 2));
 249         top: calc(50% - calc(var(--login-height) / 2));
 250         width: var(--login-width);
 251         height: var(--login-height);
 252         border: 1px solid #aaa;
 253         padding: 30px;
 254 }