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