| /* SPDX-License-Identifier: LGPL-2.1-or-later */ |
| |
| @font-face { |
| font-family: 'Heebo'; |
| src: url('fonts/heebo-regular.woff'); |
| font-weight: 400; |
| } |
| |
| @font-face { |
| font-family: 'Heebo'; |
| src: url('fonts/heebo-bold.woff'); |
| font-weight: 600; |
| } |
| |
| /* Variables */ |
| :root { |
| --sd-brand-black: hsl(270, 19%, 13%); /* #201A26; */ |
| --sd-brand-green: hsl(145, 66%, 51%); /* #30D475; */ |
| --sd-brand-white: #fff; |
| |
| --sd-black: hsl(270, 7%, 13%); |
| --sd-green: hsl(145, 66%, 43%); /* #26b763 */ |
| --sd-gray-extralight: hsl(30, 10%, 96%); /* #f6f5f4 */ |
| --sd-gray-light: hsl(30, 10%, 92%); |
| --sd-gray: hsl(30, 10%, 85%); |
| --sd-gray-dark: hsl(257, 23%, 20%); |
| --sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */ |
| --sd-blue: hsl(200, 66%, 55%); |
| |
| --sd-highlight-bg-light: rgba(255, 255, 255, 1); |
| --sd-highlight-bg-dark: rgba(0, 0, 0, .6); |
| --sd-highlight-inline-bg-light: rgba(0, 0, 0, 0.07); |
| --sd-highlight-inline-bg-dark: rgba(255, 255, 255, 0.1); |
| |
| --sd-font-weight-normal: 400; |
| --sd-font-weight-bold: 600; |
| |
| /* Light mode variables */ |
| --sd-foreground-color: var(--sd-gray-extradark); |
| --sd-background-color: var(--sd-gray-extralight); |
| --sd-logo-color: var(--sd-brand-black); |
| --sd-link-color: var(--sd-green); |
| --sd-small-color: var(--sd-gray-dark); |
| --sd-highlight-bg: var(--sd-highlight-bg-light); |
| --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light); |
| --sd-link-font-weight: var(--sd-font-weight-bold); |
| --sd-table-row-bg: var(--sd-highlight-inline-bg-light); |
| --sd-table-row-hover-bg: var(--sd-gray); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| color-scheme: dark; |
| --sd-foreground-color: var(--sd-gray); |
| --sd-background-color: var(--sd-black); |
| --sd-logo-color: var(--sd-brand-white); |
| --sd-link-color: var(--sd-brand-green); |
| --sd-small-color: var(--sd-gray); |
| --sd-highlight-bg: var(--sd-highlight-bg-dark); |
| --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark); |
| --sd-link-font-weight: var(--sd-font-weight-normal); |
| --sd-table-row-bg: var(--sd-highlight-inline-bg-dark); |
| --sd-table-row-hover-bg: var(--sd-highlight-bg-dark); |
| } |
| } |
| |
| /* Typography */ |
| * { |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| html, body { |
| margin: 0; |
| padding: 0; |
| font-size: 1rem; |
| font-family: "Heebo", sans-serif; |
| font-weight: 400; |
| line-height: 1.6; |
| } |
| body { |
| color: var(--sd-foreground-color); |
| background-color: var(--sd-background-color); |
| } |
| h1, h2, h3, h4, h5, h6 { |
| margin: 1rem 0 0.625rem; |
| font-weight: 600; |
| line-height: 1.25; |
| } |
| h1 { |
| text-align: center; |
| font-size: 1.87rem; |
| font-weight: 400; |
| font-style: normal; |
| margin-bottom: 2rem; |
| } |
| @media screen and (min-width: 650px) { |
| h1 { |
| font-size: 2.375em; |
| } |
| } |
| h2 { |
| font-size: 1.25rem; |
| margin-top: 2.5em; |
| } |
| h3 { |
| font-size: 1.15rem; |
| } |
| a { |
| font-weight: var(--sd-link-font-weight); |
| text-decoration: none; |
| color: var(--sd-link-color); |
| cursor: pointer; |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| b { |
| font-weight: 600; |
| } |
| small { |
| color: var(--sd-small-color); |
| } |
| hr { |
| margin: 3rem auto 4rem; |
| width: 40%; |
| opacity: 40%; |
| } |
| |
| /* Layout */ |
| .container > * { |
| width: 80%; |
| margin-left: auto; |
| margin-right: auto; |
| max-width: 720px; |
| } |
| |
| .container > table { |
| max-width: 1600px; |
| } |
| |
| .container > h1 { |
| max-width: 530px; |
| } |
| |
| /* Tables */ |
| table { |
| width: auto !important; |
| border-collapse: separate; |
| border-spacing: 0; |
| margin-top: 2em; |
| margin-bottom: 3em; |
| overflow-x: auto; |
| display: block; /* required for overflow-x auto on tables */ |
| } |
| @media screen and (min-width: 768px) { |
| table { |
| display: table; |
| border-left: 1rem solid transparent; |
| border-right: 1rem solid transparent; |
| } |
| } |
| |
| thead tr, |
| tbody:first-child tr:nth-child(odd), |
| thead + tbody tr:nth-child(even) { |
| background-color: var(--sd-table-row-bg); |
| } |
| |
| tbody tr:hover { |
| background-color: var(--sd-table-row-hover-bg) !important; |
| } |
| |
| th, td { |
| vertical-align: top; |
| text-align: left; |
| padding: .5rem; |
| } |
| |
| th:first-child, td:first-child { |
| padding-left: 0.75rem; |
| } |
| |
| th:last-child, td:last-child { |
| padding-right: 0.75rem; |
| } |
| |
| /* Custom content */ |
| .intro-code-block { |
| background-color: var(--sd-brand-black); |
| color: var(--sd-brand-white); |
| font-size: 0.875rem; |
| padding: 1em; |
| overflow-x: auto; |
| } |
| @media (prefers-color-scheme: dark) { |
| .intro-code-block { |
| background-color: var(--sd-highlight-bg); |
| } |
| } |
| |
| /* Singletons */ |
| .page-logo { |
| display: block; |
| padding: 5rem 0 3rem; |
| color: var(--sd-logo-color); |
| } |
| .page-logo > svg { |
| display: block; |
| width: 12.625em; |
| height: auto; |
| margin: 0 auto; |
| } |
| |
| .brand-white { |
| background-color: var(--sd-brand-white); |
| } |
| |
| .brand-green { |
| background-color: var(--sd-brand-green); |
| } |
| |
| .brand-black { |
| background-color: var(--sd-brand-black); |
| color: var(--sd-brand-white); |
| } |
| |
| .color-green { |
| color: var(--sd-brand-green); |
| } |
| |
| .color-blue { |
| color: var(--sd-blue); |
| } |
| |
| .page-link::after { |
| content: " ➜"; |
| } |
| |
| |
| /* Footer */ |
| footer { |
| text-align: center; |
| padding: 3em 0 3em; |
| font-size: 1em; |
| margin-top: 4rem; |
| } |
| |
| /* Make tables vertically aligned to the top */ |
| tbody td { |
| vertical-align: top; |
| } |
| |
| /* Rouge Code Highlight, github style */ |
| /* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */ |
| .highlight table td { padding: 5px; } |
| .highlight table pre { margin: 0; } |
| |
| @media (prefers-color-scheme: light) { |
| .highlight .cm { |
| color: #999988; |
| font-style: italic; |
| } |
| .highlight .cp { |
| color: #999999; |
| font-weight: bold; |
| } |
| .highlight .c1 { |
| color: #999988; |
| font-style: italic; |
| } |
| .highlight .cs { |
| color: #999999; |
| font-weight: bold; |
| font-style: italic; |
| } |
| .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf { |
| color: #999988; |
| font-style: italic; |
| } |
| .highlight .err { |
| color: #a61717; |
| background-color: #e3d2d2; |
| } |
| .highlight .gd { |
| color: #000000; |
| background-color: #ffdddd; |
| } |
| .highlight .ge { |
| color: #000000; |
| font-style: italic; |
| } |
| .highlight .gr { |
| color: #aa0000; |
| } |
| .highlight .gh { |
| color: #999999; |
| } |
| .highlight .gi { |
| color: #000000; |
| background-color: #ddffdd; |
| } |
| .highlight .go { |
| color: #888888; |
| } |
| .highlight .gp { |
| color: #555555; |
| } |
| .highlight .gs { |
| font-weight: bold; |
| } |
| .highlight .gu { |
| color: #aaaaaa; |
| } |
| .highlight .gt { |
| color: #aa0000; |
| } |
| .highlight .kc { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .kd { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .kn { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .kp { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .kr { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .kt { |
| color: #445588; |
| font-weight: bold; |
| } |
| .highlight .k, .highlight .kv { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .mf { |
| color: #009999; |
| } |
| .highlight .mh { |
| color: #009999; |
| } |
| .highlight .il { |
| color: #009999; |
| } |
| .highlight .mi { |
| color: #009999; |
| } |
| .highlight .mo { |
| color: #009999; |
| } |
| .highlight .m, .highlight .mb, .highlight .mx { |
| color: #009999; |
| } |
| .highlight .sa { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .sb { |
| color: #d14; |
| } |
| .highlight .sc { |
| color: #d14; |
| } |
| .highlight .sd { |
| color: #d14; |
| } |
| .highlight .s2 { |
| color: #d14; |
| } |
| .highlight .se { |
| color: #d14; |
| } |
| .highlight .sh { |
| color: #d14; |
| } |
| .highlight .si { |
| color: #d14; |
| } |
| .highlight .sx { |
| color: #d14; |
| } |
| .highlight .sr { |
| color: #009926; |
| } |
| .highlight .s1 { |
| color: #d14; |
| } |
| .highlight .ss { |
| color: #990073; |
| } |
| .highlight .s, .highlight .dl { |
| color: #d14; |
| } |
| .highlight .na { |
| color: #008080; |
| } |
| .highlight .bp { |
| color: #999999; |
| } |
| .highlight .nb { |
| color: #0086B3; |
| } |
| .highlight .nc { |
| color: #445588; |
| font-weight: bold; |
| } |
| .highlight .no { |
| color: #008080; |
| } |
| .highlight .nd { |
| color: #3c5d5d; |
| font-weight: bold; |
| } |
| .highlight .ni { |
| color: #800080; |
| } |
| .highlight .ne { |
| color: #990000; |
| font-weight: bold; |
| } |
| .highlight .nf, .highlight .fm { |
| color: #990000; |
| font-weight: bold; |
| } |
| .highlight .nl { |
| color: #990000; |
| font-weight: bold; |
| } |
| .highlight .nn { |
| color: #555555; |
| } |
| .highlight .nt { |
| color: #000080; |
| } |
| .highlight .vc { |
| color: #008080; |
| } |
| .highlight .vg { |
| color: #008080; |
| } |
| .highlight .vi { |
| color: #008080; |
| } |
| .highlight .nv, .highlight .vm { |
| color: #008080; |
| } |
| .highlight .ow { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .o { |
| color: #000000; |
| font-weight: bold; |
| } |
| .highlight .w { |
| color: #bbbbbb; |
| } |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| /* rouge "base16.dark" code highlight */ |
| /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */ |
| .highlight, .highlight .w { |
| color: #d0d0d0; |
| } |
| .highlight .err { |
| color: #151515; |
| background-color: #ac4142; |
| } |
| .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { |
| color: #505050; |
| } |
| .highlight .cp { |
| color: #f4bf75; |
| } |
| .highlight .nt { |
| color: #f4bf75; |
| } |
| .highlight .o, .highlight .ow { |
| color: #d0d0d0; |
| } |
| .highlight .p, .highlight .pi { |
| color: #d0d0d0; |
| } |
| .highlight .gi { |
| color: #90a959; |
| } |
| .highlight .gd { |
| color: #ac4142; |
| } |
| .highlight .gh { |
| color: #6a9fb5; |
| font-weight: bold; |
| } |
| .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { |
| color: #aa759f; |
| } |
| .highlight .kc { |
| color: #d28445; |
| } |
| .highlight .kt { |
| color: #d28445; |
| } |
| .highlight .kd { |
| color: #d28445; |
| } |
| .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 { |
| color: #90a959; |
| } |
| .highlight .sa { |
| color: #aa759f; |
| } |
| .highlight .sr { |
| color: #75b5aa; |
| } |
| .highlight .si { |
| color: #8f5536; |
| } |
| .highlight .se { |
| color: #8f5536; |
| } |
| .highlight .nn { |
| color: #f4bf75; |
| } |
| .highlight .nc { |
| color: #f4bf75; |
| } |
| .highlight .no { |
| color: #f4bf75; |
| } |
| .highlight .na { |
| color: #6a9fb5; |
| } |
| .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { |
| color: #90a959; |
| } |
| .highlight .ss { |
| color: #90a959; |
| } |
| } |
| |
| /* Code Blocks */ |
| .highlighter-rouge { |
| padding: 2px 1rem; |
| border-radius: 5px; |
| color: var(--sd-foreground-color); |
| background-color: var(--sd-highlight-bg); |
| |
| overflow: auto; |
| } |
| .highlighter-rouge .highlight .err { |
| background: transparent !important; |
| color: inherit !important; |
| } |
| |
| /* Inline Code */ |
| code.highlighter-rouge { |
| padding: 2px 6px; |
| background-color: var(--sd-highlight-inline-bg); |
| } |
| |
| a code.highlighter-rouge { |
| color: inherit; |
| } |
