docs/style.css

   1 /* SPDX-License-Identifier: LGPL-2.1-or-later */
   2
   3 @font-face {
   4     font-family: 'Heebo';
   5     src: url('fonts/heebo-regular.woff');
   6     font-weight: 400;
   7 }
   8
   9 @font-face {
  10     font-family: 'Heebo';
  11     src: url('fonts/heebo-bold.woff');
  12     font-weight: 600;
  13 }
  14
  15 /* Variables */
  16 :root {
  17   --sd-brand-black: hsl(270, 19%, 13%); /* #201A26; */
  18   --sd-brand-green: hsl(145, 66%, 51%); /* #30D475; */
  19   --sd-brand-white: #fff;
  20
  21   --sd-green: hsl(145, 66%, 43%); /* #26b763 */
  22   --sd-gray-extralight: hsl(30, 10%, 96%); /* #f6f5f4 */
  23   --sd-gray-light: hsl(30, 10%, 92%);
  24   --sd-gray: hsl(30, 10%, 85%);
  25   --sd-gray-dark: hsl(257, 23%, 20%);
  26   --sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */
  27   --sd-blue: hsl(200, 66%, 55%);
  28
  29   --sd-highlight-bg-light: rgba(255, 255, 255, 1);
  30   --sd-highlight-bg-dark: rgba(0, 0, 0, .6);
  31   --sd-highlight-inline-bg-light: rgba(0, 0, 0, 0.07);
  32   --sd-highlight-inline-bg-dark: rgba(255, 255, 255, 0.1);
  33
  34   --sd-font-weight-normal: 400;
  35   --sd-font-weight-bold: 600;
  36
  37   /* Light mode variables */
  38   --sd-foreground-color: var(--sd-gray-extradark);
  39   --sd-background-color: var(--sd-gray-extralight);
  40   --sd-logo-color: var(--sd-brand-black);
  41   --sd-link-color: var(--sd-green);
  42   --sd-small-color: var(--sd-gray-dark);
  43   --sd-highlight-bg: var(--sd-highlight-bg-light);
  44   --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light);
  45   --sd-link-font-weight: var(--sd-font-weight-bold);
  46   --sd-table-row-bg: var(--sd-highlight-inline-bg-light);
  47   --sd-table-row-hover-bg: var(--sd-gray);
  48 }
  49
  50 @media (prefers-color-scheme: dark) {
  51   :root {
  52     color-scheme: dark;
  53     --sd-foreground-color: var(--sd-gray);
  54     --sd-background-color: var(--sd-brand-black);
  55     --sd-logo-color: var(--sd-brand-white);
  56     --sd-link-color: var(--sd-brand-green);
  57     --sd-small-color: var(--sd-gray);
  58     --sd-highlight-bg: var(--sd-highlight-bg-dark);
  59     --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark);
  60     --sd-link-font-weight: var(--sd-font-weight-normal);
  61     --sd-table-row-bg: var(--sd-highlight-inline-bg-dark);
  62     --sd-table-row-hover-bg: var(--sd-highlight-bg-dark);
  63   }
  64 }
  65
  66 /* Typography */
  67 * {
  68   -moz-box-sizing: border-box;
  69   -webkit-box-sizing: border-box;
  70   box-sizing: border-box;
  71 }
  72 html, body {
  73   margin: 0;
  74   padding: 0;
  75   font-size: 1rem;
  76   font-family: "Heebo", sans-serif;
  77   font-weight: 400;
  78   line-height: 1.6;
  79 }
  80 body {
  81   color: var(--sd-foreground-color);
  82   background-color: var(--sd-background-color);
  83 }
  84 h1, h2, h3, h4, h5, h6 {
  85   margin: 1rem 0 0.625rem;
  86   font-weight: 600;
  87   line-height: 1.25;
  88 }
  89 h1 {
  90   text-align: center;
  91   font-size: 1.87rem;
  92   font-weight: 400;
  93   font-style: normal;
  94   margin-bottom: 2rem;
  95 }
  96 @media screen and (min-width: 650px) {
  97   h1 {
  98     font-size: 2.375em;
  99   }
 100 }
 101 h2 {
 102   font-size: 1.25rem;
 103   margin-top: 2.5em;
 104 }
 105 h3 {
 106   font-size: 1.15rem;
 107 }
 108 a {
 109   font-weight: var(--sd-link-font-weight);
 110   text-decoration: none;
 111   color: var(--sd-link-color);
 112   cursor: pointer;
 113 }
 114 a:hover {
 115   text-decoration: underline;
 116 }
 117 b {
 118   font-weight: 600;
 119 }
 120 small {
 121   color: var(--sd-small-color);
 122 }
 123 hr {
 124   margin: 3rem auto 4rem;
 125   width: 40%;
 126   opacity: 40%;
 127 }
 128
 129 /* Layout */
 130 .container > * {
 131   width: 80%;
 132   margin-left: auto;
 133   margin-right: auto;
 134   max-width: 720px;
 135 }
 136
 137 .container > table {
 138   max-width: 1600px;
 139 }
 140
 141 .container > h1 {
 142   max-width: 530px;
 143 }
 144
 145 /* Tables */
 146 table {
 147   width: auto !important;
 148   border-collapse: separate;
 149   border-spacing: 0;
 150   margin-top: 2em;
 151   margin-bottom: 3em;
 152   overflow-x: auto;
 153   display: block; /* required for overflow-x auto on tables */
 154 }
 155 @media screen and (min-width: 768px) {
 156   table {
 157     display: table;
 158     border-left: 1rem solid transparent;
 159     border-right: 1rem solid transparent;
 160   }
 161 }
 162
 163 thead tr,
 164 tbody:first-child tr:nth-child(odd),
 165 thead + tbody tr:nth-child(even) {
 166   background-color: var(--sd-table-row-bg);
 167 }
 168
 169 tbody tr:hover {
 170   background-color: var(--sd-table-row-hover-bg) !important;
 171 }
 172
 173 th, td {
 174   vertical-align: top;
 175   text-align: left;
 176   padding: .5rem;
 177 }
 178
 179 th:first-child, td:first-child {
 180   padding-left: 0.75rem;
 181 }
 182
 183 th:last-child, td:last-child {
 184   padding-right: 0.75rem;
 185 }
 186
 187 /* Custom content */
 188 .intro-code-block {
 189   background-color: var(--sd-brand-black);
 190   color: var(--sd-brand-white);
 191   font-size: 0.875rem;
 192   padding: 1em;
 193   overflow-x: auto;
 194 }
 195 @media (prefers-color-scheme: dark) {
 196   .intro-code-block {
 197     background-color: var(--sd-highlight-bg);
 198   }
 199 }
 200
 201 /* Singletons */
 202 .page-logo {
 203   display: block;
 204   padding: 5rem 0 3rem;
 205   color: var(--sd-logo-color);
 206 }
 207 .page-logo > svg {
 208   display: block;
 209   width: 12.625em;
 210   height: auto;
 211   margin: 0 auto;
 212 }
 213
 214 .brand-white {
 215   background-color: var(--sd-brand-white);
 216 }
 217
 218 .brand-green {
 219   background-color: var(--sd-brand-green);
 220 }
 221
 222 .brand-black {
 223   background-color: var(--sd-brand-black);
 224   color: var(--sd-brand-white);
 225 }
 226
 227 .color-green {
 228   color: var(--sd-brand-green);
 229 }
 230
 231 .color-blue {
 232   color: var(--sd-blue);
 233 }
 234
 235 .page-link::after {
 236   content: " ➜";
 237 }
 238
 239
 240 /* Footer */
 241 footer {
 242   text-align: center;
 243   padding: 3em 0 3em;
 244   font-size: 1em;
 245   margin-top: 4rem;
 246 }
 247
 248 /* Make tables vertically aligned to the top */
 249 tbody td {
 250   vertical-align: top;
 251 }
 252
 253 /* Rouge Code Highlight, github style */
 254 /* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
 255 .highlight table td { padding: 5px; }
 256 .highlight table pre { margin: 0; }
 257
 258 @media (prefers-color-scheme: light) {
 259   .highlight .cm {
 260     color: #999988;
 261     font-style: italic;
 262   }
 263   .highlight .cp {
 264     color: #999999;
 265     font-weight: bold;
 266   }
 267   .highlight .c1 {
 268     color: #999988;
 269     font-style: italic;
 270   }
 271   .highlight .cs {
 272     color: #999999;
 273     font-weight: bold;
 274     font-style: italic;
 275   }
 276   .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
 277     color: #999988;
 278     font-style: italic;
 279   }
 280   .highlight .err {
 281     color: #a61717;
 282     background-color: #e3d2d2;
 283   }
 284   .highlight .gd {
 285     color: #000000;
 286     background-color: #ffdddd;
 287   }
 288   .highlight .ge {
 289     color: #000000;
 290     font-style: italic;
 291   }
 292   .highlight .gr {
 293     color: #aa0000;
 294   }
 295   .highlight .gh {
 296     color: #999999;
 297   }
 298   .highlight .gi {
 299     color: #000000;
 300     background-color: #ddffdd;
 301   }
 302   .highlight .go {
 303     color: #888888;
 304   }
 305   .highlight .gp {
 306     color: #555555;
 307   }
 308   .highlight .gs {
 309     font-weight: bold;
 310   }
 311   .highlight .gu {
 312     color: #aaaaaa;
 313   }
 314   .highlight .gt {
 315     color: #aa0000;
 316   }
 317   .highlight .kc {
 318     color: #000000;
 319     font-weight: bold;
 320   }
 321   .highlight .kd {
 322     color: #000000;
 323     font-weight: bold;
 324   }
 325   .highlight .kn {
 326     color: #000000;
 327     font-weight: bold;
 328   }
 329   .highlight .kp {
 330     color: #000000;
 331     font-weight: bold;
 332   }
 333   .highlight .kr {
 334     color: #000000;
 335     font-weight: bold;
 336   }
 337   .highlight .kt {
 338     color: #445588;
 339     font-weight: bold;
 340   }
 341   .highlight .k, .highlight .kv {
 342     color: #000000;
 343     font-weight: bold;
 344   }
 345   .highlight .mf {
 346     color: #009999;
 347   }
 348   .highlight .mh {
 349     color: #009999;
 350   }
 351   .highlight .il {
 352     color: #009999;
 353   }
 354   .highlight .mi {
 355     color: #009999;
 356   }
 357   .highlight .mo {
 358     color: #009999;
 359   }
 360   .highlight .m, .highlight .mb, .highlight .mx {
 361     color: #009999;
 362   }
 363   .highlight .sa {
 364     color: #000000;
 365     font-weight: bold;
 366   }
 367   .highlight .sb {
 368     color: #d14;
 369   }
 370   .highlight .sc {
 371     color: #d14;
 372   }
 373   .highlight .sd {
 374     color: #d14;
 375   }
 376   .highlight .s2 {
 377     color: #d14;
 378   }
 379   .highlight .se {
 380     color: #d14;
 381   }
 382   .highlight .sh {
 383     color: #d14;
 384   }
 385   .highlight .si {
 386     color: #d14;
 387   }
 388   .highlight .sx {
 389     color: #d14;
 390   }
 391   .highlight .sr {
 392     color: #009926;
 393   }
 394   .highlight .s1 {
 395     color: #d14;
 396   }
 397   .highlight .ss {
 398     color: #990073;
 399   }
 400   .highlight .s, .highlight .dl {
 401     color: #d14;
 402   }
 403   .highlight .na {
 404     color: #008080;
 405   }
 406   .highlight .bp {
 407     color: #999999;
 408   }
 409   .highlight .nb {
 410     color: #0086B3;
 411   }
 412   .highlight .nc {
 413     color: #445588;
 414     font-weight: bold;
 415   }
 416   .highlight .no {
 417     color: #008080;
 418   }
 419   .highlight .nd {
 420     color: #3c5d5d;
 421     font-weight: bold;
 422   }
 423   .highlight .ni {
 424     color: #800080;
 425   }
 426   .highlight .ne {
 427     color: #990000;
 428     font-weight: bold;
 429   }
 430   .highlight .nf, .highlight .fm {
 431     color: #990000;
 432     font-weight: bold;
 433   }
 434   .highlight .nl {
 435     color: #990000;
 436     font-weight: bold;
 437   }
 438   .highlight .nn {
 439     color: #555555;
 440   }
 441   .highlight .nt {
 442     color: #000080;
 443   }
 444   .highlight .vc {
 445     color: #008080;
 446   }
 447   .highlight .vg {
 448     color: #008080;
 449   }
 450   .highlight .vi {
 451     color: #008080;
 452   }
 453   .highlight .nv, .highlight .vm {
 454     color: #008080;
 455   }
 456   .highlight .ow {
 457     color: #000000;
 458     font-weight: bold;
 459   }
 460   .highlight .o {
 461     color: #000000;
 462     font-weight: bold;
 463   }
 464   .highlight .w {
 465     color: #bbbbbb;
 466   }
 467 }
 468
 469 @media (prefers-color-scheme: dark) {
 470   /* rouge "base16.dark" code highlight */
 471   /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
 472   .highlight, .highlight .w {
 473     color: #d0d0d0;
 474   }
 475   .highlight .err {
 476     color: #151515;
 477     background-color: #ac4142;
 478   }
 479   .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
 480     color: #505050;
 481   }
 482   .highlight .cp {
 483     color: #f4bf75;
 484   }
 485   .highlight .nt {
 486     color: #f4bf75;
 487   }
 488   .highlight .o, .highlight .ow {
 489     color: #d0d0d0;
 490   }
 491   .highlight .p, .highlight .pi {
 492     color: #d0d0d0;
 493   }
 494   .highlight .gi {
 495     color: #90a959;
 496   }
 497   .highlight .gd {
 498     color: #ac4142;
 499   }
 500   .highlight .gh {
 501     color: #6a9fb5;
 502     font-weight: bold;
 503   }
 504   .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
 505     color: #aa759f;
 506   }
 507   .highlight .kc {
 508     color: #d28445;
 509   }
 510   .highlight .kt {
 511     color: #d28445;
 512   }
 513   .highlight .kd {
 514     color: #d28445;
 515   }
 516   .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
 517     color: #90a959;
 518   }
 519   .highlight .sa {
 520     color: #aa759f;
 521   }
 522   .highlight .sr {
 523     color: #75b5aa;
 524   }
 525   .highlight .si {
 526     color: #8f5536;
 527   }
 528   .highlight .se {
 529     color: #8f5536;
 530   }
 531   .highlight .nn {
 532     color: #f4bf75;
 533   }
 534   .highlight .nc {
 535     color: #f4bf75;
 536   }
 537   .highlight .no {
 538     color: #f4bf75;
 539   }
 540   .highlight .na {
 541     color: #6a9fb5;
 542   }
 543   .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
 544     color: #90a959;
 545   }
 546   .highlight .ss {
 547     color: #90a959;
 548   }
 549 }
 550
 551 /* Code Blocks */
 552 .highlighter-rouge {
 553   padding: 2px 1rem;
 554   border-radius: 5px;
 555   color: var(--sd-foreground-color);
 556   background-color: var(--sd-highlight-bg);
 557
 558   overflow: auto;
 559 }
 560 .highlighter-rouge .highlight .err {
 561   background: transparent !important;
 562   color: inherit !important;
 563 }
 564
 565 /* Inline Code */
 566 code.highlighter-rouge {
 567   padding: 2px 6px;
 568   background-color: var(--sd-highlight-inline-bg);
 569 }
 570
 571 a code.highlighter-rouge {
 572   color: inherit;
 573 }