src/css.less

   1 /*!github.com/mina86/mina86.com*/
   2
   3 /**** Classes ****/
   4
   5 @atom-cls:             .a; /* Feed links in Categories */
   6 @header-link-li-cls:   .b; /* LIs in the header excluding site name and cog */
   7 @header-cog-li-cls:    .c; /* LI in the header with the cog settings link */
   8 @header-site-li-cls:   .d; /* LI in the header with the H1 with site name */
   9 /* e, f */
  10 @code-dd-ul-cls:       .g;
  11 /* h */
  12 @linked-in-link-cls:   .i;
  13 /* j */
  14 @categories-dd-ul-cls: .k;
  15 @left-align-cls:       .l; /* text-align: left */
  16 @drop-down-ul-cls:     .m;
  17 @contact-dd-ul-cls:    .n;
  18 /* o, p, q */
  19 @right-align-cls:      .r; /* text-align: right */
  20 @dd-selected-cls:      .s; /* Selected’s drop down’s A plus if non-setting drop
  21                               down shown this is added to body. */
  22 @article-text-cls:     .t;
  23 /* u, v */
  24 @hue-slide-cls:        .w;
  25 /* x */
  26 @byline-cls:           .y;
  27 @bluesky-cls:          .z;
  28
  29 @float-right-cls:      .fr;
  30 @float-left-cls:       .fl;
  31 @meta-label-cls:       .lb; /* The ‘Posted in categories:’ */
  32 @small-cls:            .sm; /* font-size: @small */
  33 @news-image-cls:       .nw; /* FIGURE on Site News pages */
  34 @unicode-name:         .ud;
  35 @toggle-cls:           .tg;
  36 @dark-toggle-cls:      .td;
  37 @contrast-toggle-cls:  .tc;
  38 @no-print-cls:         .np; /* Don’t print. */
  39 @no-print-link-cls:    .nl; /* Don’t include link’s href in print. */
  40
  41 /**** Identifiers ****/
  42
  43 @main-id:          #b; /* The MAIN element */
  44 @comments-id:      #c; /* Comments under a post */
  45 @dark-theme-id:    #d; /* ID set on HTML when dark theme is used */
  46 @head-id:          #h; /* The header */
  47 @categories-id:    #k; /* The Categories section in bottom nav */
  48 /* Reserve #m for more links if those ever come back. */
  49 @contact-id:       #n; /* The Contact section in bottom nav */
  50 @pagination-id:    #p; /* Pagination at the bottom of a page */
  51 @high-contrast-id: #t; /* ID set on BODY when high contrast scheme is used */
  52 @nav-id:           #v; /* The bottom navigation section */
  53
  54
  55 /**** Variables ****/
  56 @bg-colour:           var(--a); @bg-colour-var: --a;
  57 /* b */
  58 @fg-low-colour:       var(--c);
  59 /* d */
  60 @border-colour:       var(--e);
  61 @link-colour:         var(--f);
  62 @visited-colour:      var(--g);
  63 @hover-colour:        var(--h);
  64 @code-colour:         var(--i);
  65 @acc-bg-colour:       var(--j); /* Used in SVG images */
  66 @head-bg-colour:      var(--k);
  67 @head-colour:         var(--l);
  68 @nav-bg-colour:       var(--m);
  69 @nav-colour:          var(--n);
  70 /* o */
  71 @nav-link-colour:     @head-colour;
  72 @nav-hover-colour:    var(--p); @nav-hover-colour-var: --p;
  73 @nav-header-colour:   var(--q);
  74 /* r */
  75 @scroll-bar-width:    var(--s,1rem);
  76 /* t, u, v */
  77 @float-with:          var(--w);
  78 @slide-position:      var(--x, 66%);
  79 /* y */
  80 @slide-colour:        var(--z);
  81
  82 @media print {
  83         body {
  84                 color: #000;
  85                 background: #fff;
  86                 --a: #fff;
  87                 --c: #444;
  88                 --e: #000;
  89                 --f: #000;
  90                 --g: #000;
  91                 --h: #000;
  92                 --i: #000;
  93                 --j: #ddd;
  94                 --m: #fff;
  95                 --n: #444;
  96                 --l: #444;
  97                 --p: #444;
  98                 --q: #000;
  99         }
 100 }
 101
 102 /* Sizes based on five-note typographic scale with ratio of two (see
 103    <http://spencermortensen.com/articles/typographic-scale/>).  Numbers are
 104    rounded to be multiple of 1/8 so that whatever they are they give an integer
 105    when multiple by 16px default font-size used by browsers.  Other sizes in
 106    this CSS are kept to be multiples of 1/8 as well to minimise non-integer
 107    dimensions. */
 108 @tiny:     0.75em;   /* =  6/8 ≈ 2^-0.4 */
 109 @small:    0.875em;  /* =  7/8 ≈ 2^-0.2 */
 110 @large:    1.25em;   /* = 10/8 ≈ 2^0.4 */
 111 @huge:     1.5em;    /* = 12/8 ≈ 2^0.6 */
 112 @title:    1.75em;   /* = 14/8 ≈ 2^0.8 */
 113 @logo:     2.5em;
 114
 115
 116 /**** Fonts ****/
 117
 118 @body-font: Libre Baskerville, Georgia, Charter, Utopia, serif;
 119 @mono-font: DejaVu Sans Mono, Source Code Pro, Liberation Mono, Courier New, monospace;
 120 @sans-font: DejaVu Sans, Noto Sans, Verdana, sans-serif;
 121 @head-font: M, cursive;
 122
 123 @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');
 124 @import url('https://fonts.googleapis.com/css2?family=Noto+Emoji');
 125
 126 @font-face {
 127         font-family: M;
 128         font-style: normal;
 129         font-weight: 400;
 130         font-display: swap;
 131         src: url(9N7Su-yV.woff2) format('woff2');
 132 }
 133
 134
 135 /**** Utility mixins ****/
 136
 137 .no-print() {
 138         @media print {
 139                 display: none !important;
 140         }
 141 }
 142 .icon-font() {
 143         font-family: M, var(--S);
 144         font-style: normal;
 145         font-weight: 400;
 146 }
 147
 148 * {
 149         box-sizing: border-box;
 150         margin: 0;
 151         padding: 0;
 152 }
 153
 154
 155 html {
 156         background: @bg-colour;
 157
 158         --S: @sans-font;
 159         --B: @body-font;
 160         font-family: var(--B);
 161         font-variant: common-ligatures oldstyle-nums proportional-nums;
 162         text-rendering: optimizelegibility;
 163         line-height: 1.5;
 164
 165         scroll-padding: 4rem;
 166 }
 167
 168 text {
 169         fill: currentcolor;
 170         font-family: var(--S);
 171 }
 172
 173
 174 /**** Page layout ****/
 175 @media screen {
 176         @{main-id} a:after, @{header-link-li-cls} > a:after {
 177                 .icon-font();
 178         }
 179 }
 180
 181 @media screen {
 182         html {
 183                 height: 100%;
 184                 scrollbar-color: @nav-bg-colour @bg-colour;
 185         }
 186         body::-webkit-scrollbar {
 187                 width: .5em;
 188         }
 189         body::-webkit-scrollbar-track {
 190                 background: @bg-colour;
 191         }
 192         body::-webkit-scrollbar-thumb {
 193                 background: @nav-bg-colour;
 194                 border-radius: .2rem;
 195                 border: 1px solid @bg-colour;
 196         }
 197         body {
 198                 display: flex;
 199                 flex-direction: column;
 200                 min-height: 100%;
 201         }
 202
 203         @{nav-id} {
 204                 box-shadow: 0 .5rem 0.5rem -.5rem inset #000;
 205                 flex-grow: 1;
 206         }
 207 }
 208
 209
 210 /**** Links ****/
 211
 212 a {
 213         color: @link-colour;
 214         text-decoration: none;
 215         border-radius: 4px;
 216         text-underline-offset: 0.125rem;
 217 }
 218 a:visited {
 219         color: @visited-colour;
 220 }
 221 a:hover, a:focus {
 222         color: @hover-colour;
 223 }
 224 h1 a:visited, h1 a:hover, h1 a:focus {
 225         color: inherit;
 226 }
 227
 228 @media screen {
 229         @{article-text-cls} a {
 230                 text-decoration: underline dotted;
 231         }
 232         article h1 a {
 233                 text-decoration: none;
 234                 color: inherit;
 235         }
 236         @{main-id} a:hover {
 237                 text-decoration: underline;
 238         }
 239         @{article-text-cls} {
 240                 a[href^="https://"]:after,
 241                 a[href^="http://"]:after,
 242                 a[href^="//"]:after {
 243                         content: '⎋';
 244                         font-size: @small;
 245                         vertical-align: super;
 246                         display: inline-block;
 247                 }
 248         }
 249 }
 250
 251
 252 /**** Header ****/
 253
 254 @{head-id} {
 255         .no-print();
 256
 257         position: fixed;
 258         inset: 0 0 auto;
 259
 260         font-family: var(--S);
 261         background: @head-bg-colour linear-gradient(#000, @head-bg-colour);
 262         color: @head-colour;
 263
 264         box-shadow: 0 0 1rem 0 #000;
 265
 266         height: 4em;
 267
 268         z-index: 9;
 269         h1 {
 270                 font-family: @head-font;
 271                 font-weight: 400;
 272                 /* This uses ‘em’ so that it scales as font-size of the header
 273                    is changed when page scrolls.  Header’s font-size varies
 274                    from 1rem to 0.5rem. */
 275                 font-size: @logo;
 276         }
 277         a {
 278                 color: inherit;
 279         }
 280         a:hover {
 281                 color: @nav-colour;
 282         }
 283         a:focus-visible {
 284                 outline: none;
 285                 box-shadow: 0 0 0 2px @head-bg-colour,
 286                             0 0 1px 4px @nav-colour;
 287         }
 288 }
 289
 290 menu {
 291         height: 4em;
 292         display: flex;
 293         align-items: center;
 294         width: 60rem;
 295         max-width: 100%;
 296         margin: 0 auto;
 297         & > li {
 298                 display: inline-block;
 299                 margin: 0 1rem;
 300         }
 301         /* Set style of all but the first link.  This works because the first link has
 302            an H1 in between LI and A so this rule doesn’t match. */
 303         & > li > a {
 304                 font-weight: bold;
 305                 text-transform: uppercase;
 306                 font-size: 1rem;
 307         }
 308 }
 309
 310 @{header-site-li-cls} {
 311         width: 16rem;
 312 }
 313 @{header-link-li-cls} > a {
 314         white-space: nowrap;
 315 }
 316 @{header-link-li-cls} > a:after {
 317         content: ' ⌄';
 318 }
 319 li@{header-cog-li-cls} {
 320         margin-left: auto;
 321 }
 322 @{header-link-li-cls} > a:after, @{header-cog-li-cls} > a {
 323         display: inline-block;
 324         transition: all .35s;
 325 }
 326 @{header-link-li-cls}@{dd-selected-cls} a:after {
 327         transform: translateY(.5em);
 328         opacity: 0;
 329 }
 330 @{header-cog-li-cls}@{dd-selected-cls} > a {
 331         transform: rotate(90deg);
 332 }
 333
 334 /* Hide elements of the header if the screen is too narrow */
 335 @media (max-width: 45em) {
 336         @{header-link-li-cls}:nth-child(3) { display: none; }
 337 }
 338 @media (max-width: 40em) {
 339         @{header-link-li-cls}:nth-child(4) { display: none; }
 340 }
 341 @media (max-width: 31em) {
 342         @{header-link-li-cls}:nth-child(2) { display: none; }
 343 }
 344 @media (max-width: 20em) {
 345         li@{header-cog-li-cls} { display: none; }
 346 }
 347
 348
 349 article {
 350         clear: both;
 351         margin: 3em 1em;
 352         @media print {
 353                 &:first-child {
 354                         margin-top: 0;
 355                 }
 356         }
 357 }
 358
 359 @media screen {
 360         @media (min-width: 52rem) {
 361                 article, @{pagination-id} {
 362                         max-width: 50rem;
 363                         margin: 3em auto;
 364                 }
 365         }
 366
 367         @{main-id} > div {
 368                 max-width: 50rem;
 369                 margin: 0 auto;
 370         }
 371
 372         article + article {
 373                 position: relative;
 374                 padding-top: 4em;
 375                 &::before {
 376                         position: absolute;
 377                         inset: 0 0 auto;
 378                         height: 1em;
 379                         content: "";
 380                         color: @border-colour;
 381                         background: @bg-colour url(DATA<separator.svg>) 50% 50% / 6.45em 1em no-repeat;
 382                         background-blend-mode: luminosity;
 383                         opacity: 0.25;
 384                 }
 385         }
 386 }
 387
 388
 389 @{head-id} @{drop-down-ul-cls} {
 390         display: none;
 391         animation: v .35s;
 392
 393         width: max-content;
 394         position: fixed;
 395         top: max(3.5em, 2rem);
 396         padding: 1rem;
 397         box-shadow: 0 0 0.5rem 0.2rem #000;
 398         li {
 399                 font-size: 1rem;
 400         }
 401 }
 402 @{head-id} @{dd-selected-cls} @{drop-down-ul-cls} {
 403         display: block;
 404         animation: a .35s;;
 405 }
 406
 407 @keyframes a {
 408         from {
 409                 opacity: 0;
 410                 translate: 0 -.5rem;
 411         }
 412         to {
 413                 opacity: 1;
 414                 translate: 0;
 415         }
 416 }
 417
 418 @keyframes v {
 419         from {
 420                 display: block;
 421                 opacity: 1;
 422                 translate: 0;
 423         }
 424         to {
 425                 display: none;
 426                 opacity: 0;
 427                 translate: 0 -.5rem;
 428         }
 429 }
 430
 431
 432 /**** Main ****/
 433
 434 @{main-id} {
 435         margin: 4rem auto 6rem;
 436         @media print {
 437                 margin: 0 0 2rem;
 438         }
 439         text-wrap: pretty;
 440
 441         h1 {
 442                 font-size: @title;
 443                 font-style: italic;
 444         }
 445
 446         a:focus-visible {
 447                 outline: none;
 448                 box-shadow: 0 0 0 2px @bg-colour,
 449                             0 0 1px 4px @hover-colour;
 450         }
 451 }
 452
 453 @{byline-cls} {
 454         display: block;
 455         list-style: none;
 456         font-size: @small;
 457         font-style: italic;
 458         color: @fg-low-colour;
 459         break-before: avoid;
 460         margin: 0;
 461         margin-bottom: (round(1.5em / @small, 2));
 462         a:visited, a:hover, a:focus {
 463                 color: @link-colour;
 464         }
 465         li {
 466                 display: inline;
 467         }
 468         li ~ li::before {
 469                 content: ' | ';
 470         }
 471 }
 472 @{bluesky-cls} {
 473         font-style: normal;
 474         color: #1185fe;
 475 }
 476
 477 @{article-text-cls} {
 478         h2 {
 479                 font-size: @huge;
 480                 font-style: italic;
 481                 margin: 1em 0;
 482                 margin: (round(2em / @huge, 2)) 0 (round(1em / @huge, 2));
 483         }
 484         h3 {
 485                 font-size: @large;
 486                 margin: (round(1em / @large, 2)) 0;
 487         }
 488         h4 {
 489                 float: left;
 490                 font-size: 1em;
 491                 font-weight: bold;
 492                 margin: 0 1em 0 0;
 493         }
 494         h4::after {
 495                 content: '.';
 496         }
 497         ul, ol, dl, p {
 498                 font-size: 1em;
 499                 margin: 1em 0;
 500         }
 501         p[id^=f] {
 502                 font-size: @small;
 503                 margin-top: (round(2em / @small, 2));
 504                 background: linear-gradient(to right, @border-colour 70%, @bg-colour) no-repeat 0 0/40% 1px;
 505         }
 506         p[id^=f] + p[id^=f] {
 507                 margin-top: 1em;
 508                 background: none;
 509         }
 510         li {
 511                 margin-left: 2em;
 512         }
 513         li::marker {
 514                 color: @fg-low-colour;
 515         }
 516
 517         p, dd, li {
 518                 text-align: justify;
 519                 hyphens: auto;
 520         }
 521 }
 522
 523 /* Meta */
 524 aside {
 525         clear: both;
 526         overflow: auto;
 527         break-inside: avoid;
 528         font-style: italic;
 529
 530         a {
 531                 border-style: none;
 532         }
 533
 534         /* ‘See comments’/‘Continue reading’ link */
 535         & > a {
 536                 float: left;
 537                 margin-bottom: 0.5em;
 538         }
 539
 540         ul {
 541                 display: block;
 542                 font-size: @tiny;
 543                 text-align: right;
 544                 margin: 0.5em 0;
 545         }
 546         li {
 547                 display: inline;
 548                 margin-left: 1em;
 549         }
 550         @media screen {
 551                 li@{meta-label-cls} {
 552                         display: none;
 553                 }
 554         }
 555         li:before {
 556                 content: '» ';
 557         }
 558         @{meta-label-cls}:before {
 559                 content: '';
 560         }
 561 }
 562
 563 /* Comments */
 564 @{comments-id} {
 565         margin-top: 1rem;
 566 }
 567
 568 /* Misc formatting */
 569 pre, code, kbd {
 570         font-variant: lining-nums slashed-zero;
 571         color: @code-colour;
 572 }
 573 h1, h2, h3 { code, kbd { color: inherit; } }
 574 code, kbd {
 575         font-family: var(--S);
 576         font-weight: 400;
 577         hyphens: manual;
 578 }
 579 pre, pre code, pre kbd {
 580         font-family: @mono-font;
 581 }
 582 pre {
 583         font-size: @small;
 584         padding: .5em ~"min(1.5em, 2vw)";
 585         margin: .5em 0;
 586         max-width: ~"calc(100vw - 2rem - @{scroll-bar-width})";
 587         overflow-x: auto;
 588         i {
 589                 font-style: normal;
 590                 font-family: @body-font;
 591         }
 592 }
 593 li pre, dd pre {
 594         max-width: ~"calc(100vw - 4rem - @{scroll-bar-width})";
 595 }
 596
 597 blockquote {
 598         min-height: 2em;
 599         margin: 0.5rem 3em 0.5rem 0.5em;
 600         padding-left: 2.5em;
 601         background: @bg-colour url(DATA<quote.svg>) 0 0 / 2em 2em no-repeat;
 602         background-blend-mode: luminosity;
 603 }
 604 blockquote > :first-child { margin-top: 0; }
 605 blockquote > :last-child { margin-bottom: 0; }
 606
 607 /* Tables */
 608 table {
 609         font-variant-numeric: tabular-nums;
 610         font-variant: lining-nums tabular-nums;
 611         border-collapse: collapse;
 612         margin: 1em auto;
 613 }
 614 thead th {
 615         text-align: center;
 616 }
 617 th, td {
 618         padding: 0.25em 0.5em;
 619 }
 620 th small {
 621         font-weight: 400;
 622 }
 623 article {
 624         thead, tfoot, thead + tbody, tbody + tbody {
 625                 border-top: 1px solid @border-colour;
 626         }
 627 }
 628
 629 /* Lists */
 630 ol li {
 631         list-style: lower-roman;
 632 }
 633 dt {
 634         padding: 0;
 635 }
 636 dd {
 637         margin: 0 0 0 2em;
 638 }
 639 dd + dt {
 640         margin-top: 0.5em;
 641 }
 642
 643 /* Figures */
 644 figure {
 645         text-align: center;
 646         pre {
 647                 text-align: left;
 648                 margin: 0 0 .75em;
 649                 padding: 0;
 650         }
 651         img, svg {
 652                 max-width: 100%;
 653                 height: auto;
 654         }
 655         table {
 656                 text-align: left;
 657         }
 658         break-inside: avoid;
 659 }
 660 figcaption {
 661         font-size: @small;
 662         margin: 0 2em 1em;
 663         text-align: justify;
 664 }
 665 @{float-right-cls}, @{float-left-cls} {
 666         figcaption { margin: 0; }
 667 }
 668 @{news-image-cls} {
 669         margin: 1em auto;
 670         figcaption {
 671                 margin: -1em 0 0;
 672                 text-align: right;
 673                 font-size: @tiny;
 674         }
 675 }
 676
 677 /* Flags */
 678
 679 .en, .pl {
 680         background: url(DATA<pl.svg>) 0 50% / 1.12em .7em no-repeat;
 681         text-indent: 1.25em;
 682 }
 683 .en {
 684         background-image: url(DATA<uk.svg>);
 685 }
 686
 687
 688 /* Pagination */
 689 @{pagination-id} {
 690         .no-print();
 691
 692         clear: both;
 693         width: min(60rem, 95%);
 694         display: table;
 695         table-layout: fixed;
 696         margin: 4rem auto 0;
 697         font-size: @small;
 698         li {
 699                 display: table-cell;
 700         }
 701         code {
 702                 color: inherit;
 703         }
 704 }
 705
 706
 707 /**** Bottom Navigation and Drop Downs ****/
 708
 709 @{nav-id}, @{drop-down-ul-cls} {
 710         font-family: var(--S);
 711         background: @nav-bg-colour;
 712         color: @nav-colour;
 713 }
 714
 715 @{atom-cls}, @{bluesky-cls}, @{linked-in-link-cls}, @{code-dd-ul-cls} li::marker {
 716         .icon-font();
 717 }
 718
 719 @media screen {
 720         @{nav-id} {
 721                 font-size: @small;
 722                 & > div {
 723                         display: flex;
 724                         flex-wrap: wrap;
 725                         justify-content: space-around;
 726                         width: 60rem;
 727                         max-width: 100%;
 728                         margin: 0 auto;
 729                 }
 730
 731                 h1 {
 732                         display: none;
 733                 }
 734                 h2 {
 735                         text-align: center;
 736                         display: block;
 737                         font-weight: bold;
 738                         font-size: @large;
 739                         border-bottom: 2px dotted currentcolor;
 740                         color: @nav-header-colour;
 741                 }
 742
 743                 section {
 744                         width: 15rem;
 745                         margin: 3rem 2rem;
 746                 }
 747         }
 748
 749         @{nav-id}, @{head-id} @{drop-down-ul-cls} {
 750                 a {
 751                         color: @nav-link-colour;
 752                 }
 753                 a:hover, a:focus {
 754                         color: @nav-hover-colour;
 755                 }
 756                 a:hover {
 757                         text-decoration: underline;
 758                 }
 759                 a:focus-visible {
 760                         outline: none;
 761                         box-shadow: 0 0 0 2px @nav-bg-colour,
 762                                     0 0 1px 4px @nav-hover-colour;
 763                 }
 764         }
 765 }
 766
 767
 768 /* Categories */
 769 @{categories-dd-ul-cls} {
 770         display: table;
 771         margin: 0 auto;
 772         li {
 773                 display: table-row;
 774         }
 775         a, small {
 776                 display: table-cell;
 777         }
 778         small {
 779                 text-align: right;
 780                 font-size: @tiny;
 781                 padding: 0 (round(1.5em / @tiny, 2))
 782                          0 (round(3em / @tiny, 2));
 783         }
 784 }
 785 @{atom-cls} {
 786         @{nav-hover-colour-var}: #ea7d31;
 787 }
 788
 789 /* Code */
 790 @{code-dd-ul-cls} {
 791         font-weight: 400;
 792         margin: 0 auto;
 793         width: max-content;
 794         li {
 795                 margin-left: 2em;
 796         }
 797         li::marker {
 798                 content: '± ';
 799         }
 800         li:last-child {
 801                 text-align: center;
 802         }
 803         li:last-child::marker {
 804                 content: '';
 805         }
 806
 807         a {
 808                 display: inline-block;
 809                 width: 100%;
 810         }
 811 }
 812
 813 /* Contact */
 814 @{linked-in-link-cls} {
 815         @{nav-hover-colour-var}: #0977b5;
 816 }
 817 @{contact-dd-ul-cls} {
 818         text-align: center;
 819         li {
 820                 list-style: none;
 821                 font-size: 1rem;
 822         }
 823         li:first-child {
 824                 font-weight: bold;
 825         }
 826 }
 827 @{contact-id} {
 828         display: flex;
 829         flex-direction: column;
 830 }
 831 @{contact-id} @{contact-dd-ul-cls} {
 832         margin-bottom: auto;
 833 }
 834 @{contact-id} @{contact-dd-ul-cls} + h2 {
 835         margin-top: 2em;
 836 }
 837 @media print {
 838         @{contact-dd-ul-cls} {
 839                 display: block;
 840                 li {
 841                         margin: 0 .5em;
 842                         display: inline;
 843                 }
 844                 li:first-child {
 845                         display: block;
 846                 }
 847                 li:nth-child(2)::before {
 848                         content: '✉️ ';
 849                 }
 850                 li:nth-child(3)::before {
 851                         content: '[m] ';
 852                 }
 853         }
 854 }
 855
 856 /* Settings */
 857 @{header-cog-li-cls} {
 858         ul, li {
 859                 display: block;
 860                 font-weight: bold;
 861         }
 862         li {
 863                 margin: 0.5em 0;
 864                 text-align: center;
 865         }
 866         li:nth-child(2) {
 867                 cursor: pointer;
 868                 border: 2px solid #000;
 869         }
 870 }
 871
 872 @{toggle-cls} {
 873         font-size: @large;
 874         font-weight: bold;
 875         line-height: 1;
 876
 877         position: relative;
 878         display: inline-block;
 879         width: 1.3em;
 880         height: 0.45em;
 881         border-radius: (0.45em / 2);
 882         background: @slide-colour;
 883         margin-left: 1.2em;
 884         cursor: pointer;
 885
 886         &:before {
 887                 box-sizing: border-box;
 888
 889                 display: block;
 890                 position: absolute;
 891                 left: -1.35em;
 892         }
 893
 894         &:after {
 895                 content: '';
 896
 897                 box-sizing: border-box;
 898
 899                 display: block;
 900                 position: absolute;
 901                 top:  ((0.45em - 0.8em) / 2);
 902                 left: (0.1em - 0.8em / 2);
 903                 width:  0.8em;
 904                 height: 0.8em;
 905                 border-radius: (0.8em / 2);
 906                 border: 2px solid @nav-link-colour;
 907                 background: @nav-link-colour;
 908                 transition: transform 0.15s;
 909         }
 910         &:hover:after {
 911                 background: @nav-hover-colour;
 912         }
 913         &:focus {
 914                 background: @nav-header-colour;
 915         }
 916 }
 917 div:focus-visible {
 918         outline: none;
 919         box-shadow: 0 0 0 2px @nav-bg-colour,
 920                     0 0 1px 4px @nav-link-colour;
 921 }
 922
 923 @{dark-toggle-cls}:before     {
 924         color: @head-colour;
 925         content: '☀';
 926         top: -.3em;
 927         @{dark-theme-id} & { content: '☾'; }
 928 }
 929 @{contrast-toggle-cls}:before {
 930         color: @head-colour;
 931         content: '◐';
 932         top: -.4em;
 933 }
 934
 935 @{dark-theme-id} @{dark-toggle-cls}:after,
 936 @{high-contrast-id} @{contrast-toggle-cls}:after {
 937         transform: translateX(1.3em);
 938 }
 939
 940 @{hue-slide-cls} {
 941         position: relative;
 942         height: 1.5em;
 943 }
 944 @{hue-slide-cls} div {
 945         position: absolute;
 946         width: 10px;
 947         inset: -5px auto -5px calc(@slide-position - 5px);
 948         border: 2px solid #000;
 949         background: @slide-colour;
 950 }
 951
 952
 953 /* Citation dialogue and settings shade */
 954 dialog {
 955         margin: 5vh auto;
 956         max-width: 40rem;
 957
 958         background: @nav-bg-colour;
 959         color: @head-colour;
 960         border: none;
 961         box-shadow: 0 0 0.5rem 0.2rem #000;
 962
 963         table {
 964                 margin: 0rem;
 965         }
 966         td, th {
 967                 /* Setting size on td and th individually rather than on dialog
 968                    so it’s simple to override with ‘thead th’ and ‘tbody td’
 969                    selectors. */
 970                 font-size: @small;
 971         }
 972         thead th {
 973                 font-size: 1em;
 974                 padding: 0.25em;
 975                 background: @head-bg-colour;
 976         }
 977         thead {
 978                 background: @head-bg-colour;
 979         }
 980         tbody td {
 981                 font-size: @tiny;
 982         }
 983         tbody tr > * {
 984                 padding: .5rem .875rem;
 985         }
 986         pre {
 987                 margin: 0;
 988                 padding: 0;
 989                 border: none;
 990                 color: inherit;
 991                 white-space: pre-wrap;
 992         }
 993         form {
 994                 text-align: center;
 995                 margin: 1rem auto;
 996         }
 997         @media (max-width: 30em) {
 998                 table, tr, td, th {
 999                         display: block;
1000                 }
1001                 tbody tr > * {
1002                         padding: .25rem .5rem;
1003                 }
1004         }
1005 }
1006
1007 button {
1008         padding: 0.25em 0.5em;
1009         cursor: pointer;
1010         outline: 0;
1011         color: #000;
1012         background: @head-colour;
1013         border-radius: 5px;
1014         display: inline-block;
1015         box-shadow: 0px -1px 0px 0px #0004 inset;
1016         border: 1px solid #000;
1017         line-height: 1.5;
1018 }
1019 button:hover {
1020         box-shadow: 0px -1px 0px 0px #000 inset;
1021 }
1022 button:focus-visible {
1023         outline: none;
1024         box-shadow: 0px -1px 0px 0px #000 inset,
1025                     0 0 0 2px @nav-bg-colour,
1026                     0 0 1px 4px @nav-link-colour;
1027 }
1028
1029 @{nav-id}::after, dialog::backdrop {
1030         background: #0008;
1031         backdrop-filter: blur(2px);
1032 }
1033 @{nav-id}::after {
1034         content: '';
1035         position: fixed;
1036         inset: 0;
1037         z-index: 5;
1038         opacity: 0;
1039         visibility: hidden;
1040         transition: visibility .5s, opacity .5s;
1041 }
1042
1043 /* TODO: Replace this with body:has(.s) once :has reaches over 95% support.  At
1044    the moment, Firefox is lagging behind and dragging support down to 92%.  With
1045    that change, it won’t be necessary for JavaScript to set .s on BODY any
1046    longer. */
1047 @{dd-selected-cls} > @{nav-id}::after {
1048         opacity: 1;
1049         visibility: visible;
1050         transition: visibility 0s, opacity .5s;
1051 }
1052
1053
1054 /* Floats */
1055 @{float-right-cls}, @{float-left-cls} {
1056         clear: both;
1057         width: var(--w,20em);
1058         margin: 1em ~"clamp(-1em - var(--w,20em),26em - 50vw,1em)";
1059         max-width: 100%;
1060 }
1061 @{float-right-cls} {
1062         float: right;
1063         margin-left: 1em;
1064 }
1065 @{float-left-cls} {
1066         float: left;
1067         margin-right: 1em;
1068 }
1069
1070 @{right-align-cls} {
1071         text-align: right;
1072 }
1073 @{left-align-cls} {
1074         text-align: left;
1075 }
1076
1077 @{small-cls} {
1078         font-size: @small;
1079 }
1080
1081 abbr, @{unicode-name} {
1082         font-variant: all-small-caps;
1083 }
1084
1085
1086 /* Print-specific */
1087 @media print {
1088         @{no-print-cls} {
1089                 display: none !important;
1090         }
1091
1092         a:after {
1093                 color: inherit;
1094                 font-weight: 400;
1095                 font-style: italic;
1096                 font-size: unit(@tiny, rem);
1097         }
1098
1099         @{article-text-cls} a:not(@{no-print-link-cls}) {
1100                 &[href^="http://"]:after, &[href^="https://"]:after {
1101                         content: " 〈" attr(href) "〉";
1102                 }
1103                 &[href^="/"]:after {
1104                         content: " 〈mina86.com" attr(href) "〉";
1105                 }
1106                 &[href^="//"]:after {
1107                         content: " 〈https:" attr(href) "〉";
1108                 }
1109         }
1110         @{main-id} h1 a[href^="/"]:after {
1111                 content: "https://mina86.com" attr(href);
1112                 display: block;
1113                 color: @fg-low-colour;
1114         }
1115
1116         @{nav-id} section, @{nav-id} h1, @{nav-id} h2 {
1117                 display: none;
1118         }
1119         @{nav-id} @{contact-id} {
1120                 display: block;
1121                 margin: 0 auto;
1122         }
1123
1124         @{float-right-cls} {
1125                 margin-right: 0;
1126         }
1127         @{float-left-cls} {
1128                 margin-left: 0;
1129         }
1130 }