docs/assets/css/main.css

:root {
    --color-white: #FFFFFF;
    --color-gray: #D9D9D9;
    --color-brown: #D29E79;
    --color-black: #3E3E3E;
    --arrow: "→ ";
    --gap-s: 0.9rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 3rem;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.5;
    scroll-behavior: smooth;
    margin-top: 6rem;
}

/* Components */

.container {
    margin-inline: auto;
    max-width: 1000px;
    padding: 1rem;
}

.container--full {
    max-width: 100%;
}

.text-center {
    text-align: center;
}

a, .link {
    display: inline-block;
    color: var(--color-brown);
    text-decoration: none;
    padding-block: .3rem;
}

a:hover, .link:hover {
    text-decoration: underline;
}

.title {
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: var(--color-brown);
    text-decoration-thickness: 2px;
    text-underline-offset: .2rem;
}

.list {
    list-style-type: var(--arrow);
}

.nav-main__list {
    grid-gap: 1rem;
}

.image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.block-center {
    margin-inline: auto;
}

.button {
    display: inline-block;
    min-width: 4rem;
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
    padding: .5rem .8rem;
    border: 2px solid var(--color-brown);
    color: var(--color-gray);
    text-decoration: none;
    border-radius: .6rem;
}

.button:hover {
    border-color: var(--color-brown);
    box-shadow: 0 5px 0 var(--color-brown);
    text-decoration: none;
}

.header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    border-bottom: 2px solid var(--color-brown);
    background-color: var(--color-black);
    overflow-x: auto;
}

.header .nav__list {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

@media (width < 600px) {
    .header .nav__list {
	justify-content: flex-start;
    }
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .code__block {
	background-color: var(--color-gray);
	color: var(--color-black);
	padding: 1rem;
	border-radius: .5rem;
	font-family: 'Fira Code', monospace;
	overflow-x: auto;
    }

    .code__line {
	color: var(--color-brown);
	font-family: 'Fira Code', monospace;
    }

    .details {
	margin-block: 1rem;
	border: 2px solid var(--color-brown);
    }


    .details__title {
	border-bottom: 2px solid var(--color-brown);
    }

    .details__summary {
	background-color: var(--color-brown);
	color: var(--color-white);
	padding: 1rem;
	list-style-type: "🐱 ";
    }


    .details[open] > .details__summary {
	list-style-type: "😺 ";
    }

    .details__content {
	padding: 1rem;
    }

    /* Hero */

    .hero__hgroup {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas:
	    "title image"
	    "subtitle image"
	    "nav image";
	grid-gap: 1rem;
    }

    @media (width < 600px) {
	.hero__hgroup {
	    grid-template-columns: 1fr;
	    grid-template-rows: repeat(3, auto);
	    grid-template-areas:
		"title"
		"image"
		"subtitle"
		"nav";
	}
    }

    .hero__logo {
	grid-area: image;
    }

    .hero__title {
	grid-area: title;
	align-self: end;
    }

    .hero__subtitle {
	grid-area: subtitle;
    }

    .nav-docs {
	grid-area: nav;
    }

    /* Home */
    .nav-home__list {
	justify-content: center;
	gap: var(--gap-l);
    }

    /* Footer */
    .footer {
	text-align: center;
    }

    /* ------- '.one' classes used by 'one-ox' org backend ------- */

    .one-hl {
	font-family: 'Fira Mono', monospace;
	font-size: 80%;
	border-radius: 6px;
    }

    .one-hl-inline {
	background: #31424a;
	padding: 0.2em 0.4em;
	margin: 0;
	white-space: break-spaces;
    }

    .one-hl-block {
	background: #161f22;
	color: #c5c5c5;
	display: block;
	overflow: auto;
	padding: 16px;
	line-height: 1.45;
    }

    .one-blockquote {
	background: #202d31;
	border-left: 0.3em solid #31424a;
	margin: 0px auto 16px;
	padding: 1em 1em;
	width: 90%;
    }

    .one-blockquote > p:last-child {
	margin-bottom: 0;
    }

    .one-hl-results {
	background: #202d31 ;
	border-left: 2px solid #c5c5c5;
	display: block;
	margin: auto;
	padding: 0.5em 1em;
	overflow: auto;
	width: 98%;
    }

    .one-hl-negation-char { color: #ff6c60}              /* font-lock-negation-char-face */
    .one-hl-warning { color: #fd971f}                    /* font-lock-warning-face */
    .one-hl-variable-name { color: #fd971f}              /* font-lock-variable-name-face */
    .one-hl-doc { color: #d3b2a1}                        /* font-lock-doc-face */
    .one-hl-doc-string { color: #d3b2a1}                 /* font-lock-doc-string-face */
    .one-hl-string { color: #d3b2a1}                     /* font-lock-string-face */
    .one-hl-function-name { color: #02d2da}              /* font-lock-function-name-face */
    .one-hl-builtin { color: #b2a1d3}                    /* font-lock-builtin-face */
    .one-hl-type { color: #457f8b}                       /* font-lock-type-face */
    .one-hl-keyword { color: #f92672}                    /* font-lock-keyword-face */
    .one-hl-preprocessor { color: #f92672}               /* font-lock-preprocessor-face */
    .one-hl-comment-delimiter { color: #8c8c8c}          /* font-lock-comment-delimiter-face */
    .one-hl-comment { color: #8c8c8c}                    /* font-lock-comment-face */
    .one-hl-constant { color: #f5ebb6}                   /* font-lock-constant-face */
    .one-hl-reference { color: #f5ebb6}                  /* font-lock-reference-face */
    .one-hl-regexp-grouping-backslash { color: #966046}  /* font-lock-regexp-grouping-backslash */
    .one-hl-regexp-grouping-construct { color: #aa86ee}  /* font-lock-regexp-grouping-construct */
    .one-hl-number { color: #eedc82}                     /* font-lock-number-face */

    .one-hl-sh-quoted-exec { color: #62bd9c}             /* sh-quoted-exec */

    .one-hl-ta-colon-keyword {color: #62b5e0;}           /* ta-colon-keyword-face */


    .one-hl-org-code  { color: #dedede; background: #31424a; }
    .one-hl-org-block  { color: #c5c5c5 ; background: #31424a; }
    .one-hl-org-block-begin-line  { color: #c3957e; }
    .one-hl-org-block-end-line  { color: #c3957e; }
    .one-hl-org-meta-line { color: #8c8c8c;}
    .one-hl-org-quote  { color:  #c5c5c5}
    .one-hl-org-drawer { color: #d3b2a1;  font-size: 0.9em; }
    .one-hl-org-special-keyword { color: #c3957e;  font-size: 0.9em; }
    .one-hl-org-property-value { color: #d2934a;  font-size: 0.9em; }
    .one-hl-org-level-1 { font-size: 1.7em; text-decoration: underline; }
    .one-hl-org-level-2 { font-size: 1.4em; text-decoration: underline; }
    .one-hl-org-level-3 { font-size: 1.2em; text-decoration: underline; }
    .one-hl-org-level-4 { font-size: 1.1em; text-decoration: underline; }
    .one-hl-org-level-5 { font-size: 1.0em; text-decoration: underline; }
    .one-hl-org-level-6 { font-size: 1.0em; text-decoration: underline; }
    .one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; }
    .one-hl-org-level-8 { font-size: 1.0em; text-decoration: underline; }