src/_includes/styles.css

   1 html {
   2   font-size: 1.2rem;
   3   box-sizing: border-box;
   4   scrollbar-gutter: stable both-edges;
   5
   6   --hue: 60;
   7   --accent-hue: 20;
   8   --invert-percent: 0;
   9
  10   --background: hsl(var(--hue), 17%, 98%);
  11   --active-color-normal: hsl(var(--accent-hue), 10.94%, 95.67%);
  12   --border-color-normal: hsl(var(--accent-hue), 6.88%, 37.06%);
  13
  14   --text-color-normal: hsl(var(--hue), 0%, 0%);
  15   --secondary-color-normal: hsl(var(--hue), 0%, 10%);
  16
  17   --accent-color-normal: hsl(21, 78.65%, 34.9%);
  18
  19   color: var(--text-color-normal);
  20 }
  21
  22 html[data-theme='dark'] {
  23   --hue: 0;
  24   --accent-hue: 20;
  25   --invert-percent: 100;
  26
  27   --background: hsl(var(--accent-hue), 27%, 10%);
  28   --active-color-normal: hsl(var(--accent-hue), 15.46%, 19.02%);
  29   --border-color-normal: hsl(var(--accent-hue), 6.88%, 37.06%);
  30
  31   --text-color-normal: hsl(var(--hue), 100%, 100%);
  32   --secondary-color-normal: hsl(var(--hue), 0%, 90%);
  33   --accent-color-normal: hsl(var(--accent-hue), 78.65%, 34.9%);
  34 }
  35
  36 html.color-theme-in-transition,
  37 html.color-theme-in-transition *,
  38 html.color-theme-in-transition *:before,
  39 html.color-theme-in-transition *:after {
  40   transition: all 750ms !important;
  41   transition-delay: 0 !important;
  42 }
  43
  44 *,
  45 *::before,
  46 *::after {
  47   box-sizing: inherit;
  48 }
  49
  50 * {
  51   margin: 0;
  52   padding: 0;
  53   border: 0;
  54   font-family: Helvetica, Arial, sans-serif;
  55 }
  56
  57 a {
  58   color: var(--text-color-normal);
  59 }
  60
  61 body {
  62   max-width: 55rem;
  63   margin-inline: auto;
  64   margin-block: 0.5rem 2rem;
  65   padding-inline: 1rem;
  66   background-color: var(--background);
  67 }
  68
  69
  70
  71 /* Post List */
  72 .post-list {
  73   display: grid;
  74   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  75   gap: 2rem;
  76   margin-block: 2rem;
  77   width: 100%;
  78 }
  79
  80 .post-list article {
  81   background-color: var(--active-color-normal);
  82   border-bottom: 2px solid var(--accent-color-normal);
  83   border-radius: 0.5rem;
  84   padding: 1rem;
  85   display: flex;
  86   flex-direction: column;
  87   height: 100%;
  88   overflow-wrap: break-word;
  89   word-break: break-all;
  90   min-width: 0;
  91   overflow: hidden;
  92 }
  93
  94 .post-list article img {
  95   width: 100%;
  96   height: 12rem;
  97   object-fit: cover;
  98   border-radius: 0.25rem;
  99   margin-bottom: 0.75rem;
 100 }
 101
 102 .post-list article h2 {
 103   font-size: 1.25rem;
 104   margin-bottom: 0.5rem;
 105   overflow-wrap: break-word;
 106   word-break: normal;
 107 }
 108
 109 .post-list .date-and-tags {
 110   display: flex;
 111 }
 112
 113 .post-list article p {
 114   overflow-wrap: break-word;
 115   word-break: normal;
 116 }
 117
 118 .post-list article p.date, .post-list article .tags {
 119   font-size: 0.9rem;
 120   color: var(--secondary-color-normal);
 121   margin-bottom: 0.5rem;
 122 }
 123
 124 .post-list article .tags {
 125   font-style: italic;
 126   margin-left: 0.5rem;
 127 }
 128
 129 /* prevent .post-list from overflowing on very narrow viewports */
 130 @media screen and (max-width: 25rem) {
 131   .post-list {
 132     grid-template-columns: 1fr;
 133   }
 134 }
 135
 136 /* Images */
 137 img {
 138   max-width: 100%;
 139 }
 140 img[width][height] {
 141   height: auto;
 142 }
 143 img[src$=".svg"] {
 144   width: 100%;
 145   height: auto;
 146   max-width: none;
 147 }
 148
 149 /* Article */
 150
 151 @media screen and (max-width: 50rem) {
 152   article.post {
 153     padding-inline: 1rem;
 154   }
 155 }
 156
 157 article.post {
 158   margin-block: 2rem;
 159 }
 160
 161 .frontmatter {
 162     display: flex;
 163     flex-direction: column;
 164     gap: 0.5rem
 165 }
 166
 167 .frontmatter p {
 168   font-style: italic;
 169 }
 170
 171 .tags {
 172   display: flex;
 173   align-items: center;
 174   gap: 0.5rem; /* space between label and list */
 175 }
 176
 177 .tags ul {
 178   display: flex;
 179   gap: 0.5rem;
 180   list-style: none;
 181   padding: 0;
 182   margin: 0;
 183 }
 184
 185
 186 .post-content {
 187   line-height: 1.6;
 188   margin-block: 1rem;
 189 }
 190
 191 .post-content p,
 192 .post-content h1,
 193 .post-content h2,
 194 .post-content h3,
 195 .post-content h4,
 196 .post-content h5,
 197 .post-content h6 {
 198   margin-block: 0.5rem;
 199 }
 200
 201 .post-content h1,
 202 .post-content h2,
 203 .post-content h3,
 204 .post-content h4,
 205 .post-content h5,
 206 .post-content h6 {
 207   margin-top: 2rem;
 208 }
 209
 210 .post-content img {
 211   display: block;
 212   max-width: 100%;
 213   height: auto;
 214   margin-block: 1rem;
 215 }
 216
 217 .post-content img.float-left {
 218   float: right;
 219   max-width: 40%;
 220   margin: 0 1rem 1rem 0;
 221 }
 222
 223 .post-content img.float-right {
 224   float: right;
 225   max-width: 40%;
 226   margin: 0 0 1rem 1rem;
 227 }
 228
 229 .post-content .emphasised {
 230   font-size: 1.5rem;
 231   font-weight: bold;
 232 }
 233
 234 .post-content h1, .frontmatter h1 {
 235   font-size: 2rem;
 236 }
 237
 238 .post-content a {
 239   color: var(--text-color-normal);
 240 }
 241
 242 /* clearfix */
 243 .post-content::after {
 244   content: "";
 245   display: table;
 246   clear: both;
 247 }
 248
 249 /* disable floats on narrow screens */
 250 @media screen and (max-width: 50rem) {
 251   .post-content img.float-left,
 252   .post-content img.float-right {
 253     float: none;
 254     width: 100%;
 255     margin: 1rem 0;
 256   }
 257 }
 258
 259 /* Nav header */
 260 .header {
 261   margin-top: 2rem;
 262   display: grid;
 263   grid-template-columns: 1fr 1fr 1fr;
 264   grid-column-gap: 15px;
 265   grid-row-gap: 10px;
 266   grid-column: 2/2;
 267   margin-bottom: 1rem;
 268 }
 269
 270 .header_content {
 271   display: flex;
 272   align-items: center;
 273   gap: 0rem;
 274 }
 275
 276 .header_name {
 277   float: left;
 278   padding: 0.6rem;
 279   border-bottom: 3px solid var(--accent-color-normal);
 280   margin-right: 0rem;
 281   text-decoration: none;
 282 }
 283
 284 .header_name h1 {
 285   font-size: 1rem;
 286   text-transform: uppercase;
 287   letter-spacing: 0.1rem;
 288   font-weight: bold;
 289   margin:0;
 290 }
 291
 292 /* stacked-alpha-video {
 293   display: inline-block;
 294 } */
 295
 296 stacked-alpha-video video {
 297   display: none;
 298 }
 299
 300 .is-hidden { opacity:0 !important; pointer-events:none; }
 301
 302 .fox-player { position: relative; width: var(--size, 80px); }
 303 .ratio-1x1::before { content: ""; display: block; } /* square */
 304
 305 .fox-player > * { position: absolute; inset: 0; width: 100%; height: 100%; }
 306
 307 .fox-thumb { all:unset; cursor:pointer; display:block; z-index:2; }
 308 .fox-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
 309
 310
 311
 312 .nav {
 313   padding-top: 1rem;
 314   grid-column: 3/3;
 315   display: flex;
 316   justify-content: flex-end;
 317   align-items: center;
 318 }
 319
 320 .nav ul {
 321   list-style: none;
 322   display: flex;
 323   gap: 1rem;
 324   margin: 0;
 325   padding: 0;
 326 }
 327
 328 .nav ul li a {
 329   text-decoration: none;
 330   -webkit-text-decoration: none;
 331   padding: 0.5rem 1rem;
 332   transition: color 0.1s ease-in, background-color 0.1s ease-in;
 333   text-transform: uppercase;
 334 }
 335
 336 .nav ul li.current a {
 337   font-weight: bold;
 338 }
 339
 340 .nav ul li a:hover {
 341   text-decoration: underline;
 342 }
 343
 344 .nav ul li.current a:hover {
 345   text-decoration: none;
 346 }
 347
 348 .nav button {
 349   background-color: var(--background);
 350   color: var(--text-color-normal);
 351 }
 352
 353 @media screen and (max-width: 50rem) {
 354   .header {
 355     display: grid;
 356     grid-template-columns: 1fr;
 357     grid-template-rows: auto auto;
 358     margin-top: 1rem;
 359   }
 360   .header_content {
 361     grid-column: 1;
 362     grid-row: 1;
 363   }
 364   .nav {
 365     grid-column: 1;
 366     grid-row: 2;
 367     justify-content: flex-start;
 368     padding-inline: 1rem;
 369   }
 370   .nav ul li a {
 371     text-decoration: underline;
 372     padding: 0;
 373
 374   }
 375 }
 376
 377 /* Footer */
 378 .footer {
 379   margin-top: 1rem;
 380   margin-bottom: 2rem;
 381   border-top: 2pt solid var(--accent-color-normal);
 382 }
 383
 384 .footer_content {
 385   padding: 0.5em 0;
 386   display: flex;
 387   justify-content: space-between;
 388   align-items: center;
 389 }
 390
 391 .footer_content p {
 392   margin: 0;
 393   font-size: 0.8rem;
 394   flex: 1;
 395   line-height: 1;
 396 }
 397
 398 p.footer_center {
 399   text-align: center;
 400 }
 401 p.footer_left {
 402   text-align: left;
 403 }
 404 p.footer_right {
 405   text-align: right;
 406 }
 407
 408 .footer_center svg {
 409   vertical-align: middle;
 410   width: 1em;
 411   height: 1em;
 412 }
 413
 414 .footer_right .footer_logo {
 415   width: 1.2em;
 416   vertical-align: middle;
 417 }
 418