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