docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css: refactor and improve styles 

- Refactoring styles to prevent unwanted specificity issues by using
  tailwind directives
- Improve color consistency for code blocks and other components by
  replacing adhoc hex values with theme colors

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-01-03 14:54:57 +01:00
parent 25a464935e
commit 834db3da41
11 changed files with 891 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/callouts.css
View File

@ -5,46 +5,48 @@
* *
* */ * */
.prose blockquote { @layer components {
@apply bg-blue-light-100 py-4 px-6 font-normal not-italic dark:bg-blue-dark-100; .prose blockquote {
quotes: none; @apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100;
> *:first-child { quotes: none;
@apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
}
*:last-child {
@apply mb-0 after:content-none;
}
&.warning {
@apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
> *:first-child { > *:first-child {
@apply before:content-['dangerous']; @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
} }
} *:last-child {
@apply mb-0 after:content-none;
&.important {
@apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
> *:first-child {
@apply before:content-['warning'];
} }
}
&.tip { &.warning {
@apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100; @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
> *:first-child { > *:first-child {
@apply before:content-['lightbulb']; @apply before:content-['dangerous'];
}
} }
}
&.experimental { &.important {
> *:first-child { @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
@apply before:content-['science']; > *:first-child {
@apply before:content-['warning'];
}
} }
}
&.restricted { &.tip {
@apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100; @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
> *:first-child { > *:first-child {
@apply before:content-['rocket\_launch']; @apply before:content-['lightbulb'];
}
}
&.experimental {
> *:first-child {
@apply before:content-['science'];
}
}
&.restricted {
@apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
> *:first-child {
@apply before:content-['rocket\_launch'];
}
} }
} }
} }

751
assets/css/code.css
View File

@ -1,721 +1,48 @@
.highlight, :not(pre) > code { @layer components {
font-size: .875em; .highlight,
border: 1px solid; :not(pre) > code {
border-radius: theme("spacing.1"); font-size: 0.875em;
border-color: theme("colors.gray.light.300"); border: 1px solid;
.dark & { border-radius: theme("spacing.1");
background: theme("colors.gray.dark.200"); background: theme("colors.white");
border-color: theme("colors.gray.dark.300"); border-color: theme("colors.gray.light.300");
.dark & {
background: theme("colors.gray.dark.200");
border-color: theme("colors.gray.dark.300");
}
} }
}
.highlight { :not(pre) > code {
@apply p-3 my-4 overflow-x-auto; background: theme("colors.gray.light.200");
background: theme("colors.white"); display: inline-block;
}
:not(pre) > code {
background: theme("colors.gray.light.200");
display: inline-block;
margin: 0;
white-space: nowrap;
font-weight: 400;
padding: 0 4px;
}
.highlight {
/* LineTableTD */
.lntd {
vertical-align: top;
padding: 0;
margin: 0; margin: 0;
border: 0; white-space: nowrap;
} font-weight: 400;
/* LineTable */ padding: 0 4px;
.lntable {
display: table;
width: 100%;
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
/* LineNumberColumnHighlight */
.lntd:first-child .hl {
display: block;
}
} }
/* LightTheme */ .highlight {
.light & { @apply my-4 overflow-x-auto p-3;
/* Other */
.x {
color: #000000;
}
/* Error */
.err {
color: #a40000;
}
/* CodeLine */
.cl {
}
/* LineHighlight */
.hl {
background-color: #e5f2fc;
}
.lntd:first-child .hl,
& > .chroma > code > .hl {
margin-left: -4px;
border-left: 4px solid #c0e0fa;
}
/* LineNumbersTable */
.lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
/* LineNumbers */
.ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
/* Line */
.line {
display: flex;
}
/* Keyword */
.k {
color: #204a87;
}
/* KeywordConstant */
.kc {
color: #204a87;
}
/* KeywordDeclaration */
.kd {
color: #204a87;
}
/* KeywordNamespace */
.kn {
color: #204a87;
}
/* KeywordPseudo */
.kp {
color: #204a87;
}
/* KeywordReserved */
.kr {
color: #204a87;
}
/* KeywordType */
.kt {
color: #204a87;
}
/* Name */
.n {
color: #000000;
}
/* NameAttribute */
.na {
color: #c4a000;
}
/* NameBuiltin */
.nb {
color: #204a87;
}
/* NameBuiltinPseudo */
.bp {
color: #3465a4;
}
/* NameClass */
.nc {
color: #000000;
}
/* NameConstant */
.no {
color: #000000;
}
/* NameDecorator */
.nd {
color: #5c35cc;
}
/* NameEntity */
.ni {
color: #ce5c00;
}
/* NameException */
.ne {
color: #cc0000;
}
/* NameFunction */
.nf {
color: #000000;
}
/* NameFunctionMagic */
.fm {
color: #000000;
}
/* NameLabel */
.nl {
color: #f57900;
}
/* NameNamespace */
.nn {
color: #000000;
}
/* NameOther */
.nx {
color: #000000;
}
/* NameProperty */
.py {
color: #000000;
}
/* NameTag */
.nt {
color: #204a87;
}
/* NameVariable */
.nv {
color: #5f25a0;
}
/* NameVariableClass */
.vc {
color: #000000;
}
/* NameVariableGlobal */
.vg {
color: #000000;
}
/* NameVariableInstance */
.vi {
color: #000000;
}
/* NameVariableMagic */
.vm {
color: #000000;
}
/* Literal */
.l {
color: #000000;
}
/* LiteralDate */
.ld {
color: #000000;
}
/* LiteralString */
.s {
color: #4e9a06;
}
/* LiteralStringAffix */
.sa {
color: #4e9a06;
}
/* LiteralStringBacktick */
.sb {
color: #4e9a06;
}
/* LiteralStringChar */
.sc {
color: #4e9a06;
}
/* LiteralStringDelimiter */
.dl {
color: #4e9a06;
}
/* LiteralStringDoc */
.sd {
color: #8f5902;
}
/* LiteralStringDouble */
.s2 {
color: #4e9a06;
}
/* LiteralStringEscape */
.se {
color: #000;
}
/* LiteralStringHeredoc */
.sh {
color: #4e9a06;
}
/* LiteralStringInterpol */
.si {
color: #4e9a06;
}
/* LiteralStringOther */
.sx {
color: #4e9a06;
}
/* LiteralStringRegex */
.sr {
color: #4e9a06;
}
/* LiteralStringSingle */
.s1 {
color: #4e9a06;
}
/* LiteralStringSymbol */
.ss {
color: #4e9a06;
}
/* LiteralNumber */
.m {
color: #0000cf;
}
/* LiteralNumberBin */
.mb {
color: #0000cf;
}
/* LiteralNumberFloat */
.mf {
color: #0000cf;
}
/* LiteralNumberHex */
.mh {
color: #0000cf;
}
/* LiteralNumberInteger */
.mi {
color: #0000cf;
}
/* LiteralNumberIntegerLong */
.il {
color: #0000cf;
}
/* LiteralNumberOct */
.mo {
color: #0000cf;
}
/* Operator */
.o {
color: #ce5c00;
}
/* OperatorWord */
.ow {
color: #204a87;
}
/* Punctuation */
.p {
color: #000000;
}
/* Comment */
.c {
color: #8f5902;
}
/* CommentHashbang */
.ch {
color: #8f5902;
}
/* CommentMultiline */
.cm {
color: #8f5902;
}
/* CommentSingle */
.c1 {
color: #8f5902;
}
/* CommentSpecial */
.cs {
color: #8f5902;
}
/* CommentPreproc */
.cp {
color: #8f5902;
}
/* CommentPreprocFile */
.cpf {
color: #8f5902;
}
/* Generic */
.g {
color: #000000;
}
/* GenericDeleted */
.gd {
color: #a40000;
}
/* GenericEmph */
.ge {
color: #000000;
}
/* GenericError */
.gr {
color: #ef2929;
}
/* GenericHeading */
.gh {
color: #000080;
}
/* GenericInserted */
.gi {
color: #00a000;
}
/* GenericOutput */
.go {
color: #000000;
}
/* GenericPrompt */
.gp {
user-select: none;
color: #8f5902;
}
/* GenericStrong */
.gs {
color: #000000;
}
/* GenericSubheading */
.gu {
color: #800080;
}
/* GenericTraceback */
.gt {
color: #a40000;
}
/* GenericUnderline */
.gl {
color: #000000;
text-decoration: underline;
}
/* TextWhitespace */
.w {
color: var(--gray-100);
}
}
.dark & { /* LineTableTD */
/* Other */ .lntd {
.x { vertical-align: top;
} padding: 0;
/* Error */ margin: 0;
.err { border: 0;
} }
/* CodeLine */ /* LineTable */
.cl { .lntable {
} display: table;
/* LineHighlight */ width: 100%;
.hl { border-spacing: 0;
background-color: theme('colors.gray.dark.300'); padding: 0;
} margin: 0;
.lntd:first-child .hl, border: 0;
& > .chroma > code > .hl { /* LineNumberColumnHighlight */
margin-left: -4px; .lntd:first-child .hl {
border-left: 4px solid theme('colors.gray.dark.400'); display: block;
} }
/* LineNumbersTable */
.lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #58626f;
}
/* LineNumbers */
.ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #58626f;
}
/* Line */
.line {
display: flex;
}
/* Keyword */
.k {
color: #76a9f9;
}
/* KeywordConstant */
.kc {
color: #e5c07b;
}
/* KeywordDeclaration */
.kd {
color: #76a9f9;
}
/* KeywordNamespace */
.kn {
color: #76a9f9;
}
/* KeywordPseudo */
.kp {
color: #76a9f9;
}
/* KeywordReserved */
.kr {
color: #76a9f9;
}
/* KeywordType */
.kt {
color: #e5c07b;
}
/* Name */
.n {
color: #aa89ea;
}
/* NameAttribute */
.na {
color: #cebc3a;
}
/* NameBuiltin */
.nb {
color: #e5c07b;
}
/* NameBuiltinPseudo */
.bp {
color: #aa89ea;
}
/* NameClass */
.nc {
color: #ca72ff;
}
/* NameConstant */
.no {
color: #aa89ea;
}
/* NameDecorator */
.nd {
color: #e5c07b;
}
/* NameEntity */
.ni {
color: #bda26f;
}
/* NameException */
.ne {
color: #fd7474;
}
/* NameFunction */
.nf {
color: #00b1f7;
}
/* NameFunctionMagic */
.fm {
color: #aa89ea;
}
/* NameLabel */
.nl {
color: #f5a40d;
}
/* NameNamespace */
.nn {
color: #ca72ff;
}
/* NameOther */
.nx {
color: #ffffff;
}
/* NameProperty */
.py {
color: #cebc3a;
}
/* NameTag */
.nt {
color: #76a9f9;
}
/* NameVariable */
.nv {
color: #dcaeea;
}
/* NameVariableClass */
.vc {
color: #dcaeea;
}
/* NameVariableGlobal */
.vg {
color: #dcaeea;
}
/* NameVariableInstance */
.vi {
color: #e06c75;
}
/* NameVariableMagic */
.vm {
color: #dcaeea;
}
/* Literal */
.l {
color: #98c379;
}
/* LiteralDate */
.ld {
color: #98c379;
}
/* LiteralString */
.s {
color: #98c379;
}
/* LiteralStringAffix */
.sa {
color: #98c379;
}
/* LiteralStringBacktick */
.sb {
color: #98c379;
}
/* LiteralStringChar */
.sc {
color: #98c379;
}
/* LiteralStringDelimiter */
.dl {
color: #98c379;
}
/* LiteralStringDoc */
.sd {
color: #7e97c3;
}
/* LiteralStringDouble */
.s2 {
color: #63c381;
}
/* LiteralStringEscape */
.se {
color: #fff;
}
/* LiteralStringHeredoc */
.sh {
color: #98c379;
}
/* LiteralStringInterpol */
.si {
color: #98c379;
}
/* LiteralStringOther */
.sx {
color: #70b33f;
}
/* LiteralStringRegex */
.sr {
color: #56b6c2;
}
/* LiteralStringSingle */
.s1 {
color: #98c379;
}
/* LiteralStringSymbol */
.ss {
color: #56b6c2;
}
/* LiteralNumber */
.m {
color: #d19a66;
}
/* LiteralNumberBin */
.mb {
color: #d19a66;
}
/* LiteralNumberFloat */
.mf {
color: #d19a66;
}
/* LiteralNumberHex */
.mh {
color: #d19a66;
}
/* LiteralNumberInteger */
.mi {
color: #d19a66;
}
/* LiteralNumberIntegerLong */
.il {
color: #d19a66;
}
/* LiteralNumberOct */
.mo {
color: #d19a66;
}
/* Operator */
.o {
color: #54b1c7;
}
/* OperatorWord */
.ow {
color: #b756ff;
}
/* Punctuation */
.p {
color: #abb2bf;
}
/* Comment */
.c {
color: #8a93a5;
}
/* CommentHashbang */
.ch {
color: #8a93a5;
}
/* CommentMultiline */
.cm {
color: #8a93a5;
}
/* CommentSingle */
.c1 {
color: #8a93a5;
}
/* CommentSpecial */
.cs {
color: #8a93a5;
}
/* CommentPreproc */
.cp {
color: #8a93a5;
}
/* CommentPreprocFile */
.cpf {
color: #8a93a5;
}
/* Generic */
.g {
}
/* GenericDeleted */
.gd {
color: #dd4659;
}
/* GenericEmph */
.ge {
}
/* GenericError */
.gr {
}
/* GenericHeading */
.gh {
color: #a2cbff;
}
/* GenericInserted */
.gi {
color: #a6e22e;
}
/* GenericOutput */
.go {
color: #fff;
}
/* GenericPrompt */
.gp {
color: #a6e22e;
}
/* GenericStrong */
.gs {
}
/* GenericSubheading */
.gu {
color: #a2cbff;
}
/* GenericTraceback */
.gt {
color: #a2cbff;
}
/* GenericUnderline */
.gl {
text-decoration: underline;
}
/* TextWhitespace */
.w {
} }
} }
} }

32
assets/css/global.css Normal file
View File

@ -0,0 +1,32 @@
/* global styles */
@layer base {
[x-cloak] {
display: none !important;
}
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* utility classes */
@layer utilities {
.link {
@apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
}
.invertible {
@apply dark:hue-rotate-180 dark:invert dark:filter;
}
.sidebar-hover {
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
}
.sidebar-underline {
@apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
}
}

52
assets/css/search.css
View File

@ -1,16 +1,16 @@
/*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ /*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root { :root {
--docsearch-primary-color: #5468ff; --docsearch-primary-color: theme("colors.blue.light.500");
--docsearch-text-color: #1c1e21; --docsearch-text-color: #1c1e21;
--docsearch-spacing: 12px; --docsearch-spacing: 12px;
--docsearch-icon-stroke-width: 1.4; --docsearch-icon-stroke-width: 1.4;
--docsearch-highlight-color: var(--docsearch-primary-color); --docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-muted-color: #969faf; --docsearch-muted-color: theme("colors.blue.light.500");
--docsearch-container-background: rgba(101, 108, 133, 0.8); --docsearch-container-background: theme("colors.white/0.5");
--docsearch-logo-color: #5468ff; --docsearch-logo-color: #5468ff;
--docsearch-modal-width: 560px; --docsearch-modal-width: 560px;
--docsearch-modal-height: 600px; --docsearch-modal-height: 600px;
--docsearch-modal-background: #f5f6f7; --docsearch-modal-background: theme("colors.background.light");
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
0 3px 8px 0 #555a64; 0 3px 8px 0 #555a64;
--docsearch-searchbox-height: 56px; --docsearch-searchbox-height: 56px;
@ -19,35 +19,30 @@
--docsearch-searchbox-background: theme(colors.white); --docsearch-searchbox-background: theme(colors.white);
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
--docsearch-hit-height: 56px; --docsearch-hit-height: 56px;
--docsearch-hit-color: #444950; --docsearch-hit-color: theme("colors.black");
--docsearch-hit-active-color: #fff; --docsearch-hit-active-color: theme("colors.white");
--docsearch-hit-background: #fff; --docsearch-hit-background: theme("colors.white");
--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8); --docsearch-key-color: theme("colors.blue.light.100");
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
0 1px 2px 1px rgba(30, 35, 90, 0.4);
--docsearch-footer-height: 44px; --docsearch-footer-height: 44px;
--docsearch-footer-background: #fff; --docsearch-footer-background: theme("colors.white");
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, --docsearch-footer-border: 1px solid theme("colors.divider.light");
0 -3px 6px 0 rgba(69, 98, 155, 0.12);
} }
html.dark { html.dark {
--docsearch-primary-color: theme("colors.blue.dark.400");
--docsearch-text-color: #f5f6f7; --docsearch-text-color: #f5f6f7;
--docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-container-background: theme("colors.black/0.5");
--docsearch-modal-background: #15172a; --docsearch-modal-background: theme("colors.background.dark");
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
--docsearch-searchbox-background: theme(colors.black); --docsearch-searchbox-background: theme(colors.black);
--docsearch-hit-color: #bec3c9; --docsearch-hit-color: theme("colors.white");
--docsearch-hit-shadow: none; --docsearch-hit-shadow: none;
--docsearch-hit-background: #090a11; --docsearch-hit-background: #090a11;
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); --docsearch-key-color: theme("colors.blue.dark.300");
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, --docsearch-footer-background: theme("colors.background.dark");
0 2px 2px 0 rgba(3, 4, 9, 0.3); --docsearch-footer-border: 1px solid theme("colors.divider.dark");
--docsearch-footer-background: #1e2136; --docsearch-logo-color: theme("colors.white");
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), --docsearch-muted-color: theme("colors.white");
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
--docsearch-logo-color: #fff;
--docsearch-muted-color: #7f8497;
} }
.DocSearch-Button { .DocSearch-Button {
align-items: center; align-items: center;
@ -87,7 +82,7 @@ html.dark {
.DocSearch-Button-Keys { .DocSearch-Button-Keys {
display: flex; display: flex;
min-width: calc(40px + 0.8em); min-width: calc(40px + 0.8em);
margin-top: 3px margin-top: 3px;
} }
.DocSearch-Button-Key { .DocSearch-Button-Key {
align-items: center; align-items: center;
@ -442,7 +437,7 @@ svg.DocSearch-Hit-Select-Icon {
} }
.DocSearch-Hit-action-button:focus path, .DocSearch-Hit-action-button:focus path,
.DocSearch-Hit-action-button:hover path { .DocSearch-Hit-action-button:hover path {
fill: #fff; fill: theme("colors.white");
} }
.DocSearch-Hit-content-wrapper { .DocSearch-Hit-content-wrapper {
display: flex; display: flex;
@ -528,7 +523,7 @@ svg.DocSearch-Hit-Select-Icon {
align-items: center; align-items: center;
background: var(--docsearch-footer-background); background: var(--docsearch-footer-background);
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
box-shadow: var(--docsearch-footer-shadow); border-top: var(--docsearch-footer-border);
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
flex-shrink: 0; flex-shrink: 0;
@ -556,9 +551,8 @@ svg.DocSearch-Hit-Select-Icon {
} }
.DocSearch-Commands-Key { .DocSearch-Commands-Key {
align-items: center; align-items: center;
background: var(--docsearch-key-gradient); background: var(--docsearch-key-color);
border-radius: 2px; border-radius: 2px;
box-shadow: var(--docsearch-key-shadow);
display: flex; display: flex;
height: 18px; height: 18px;
justify-content: center; justify-content: center;

50
assets/css/styles.css
View File

@ -1,48 +1,16 @@
/* see also: tailwind.config.js */
@import "tailwindcss/base"; @import "tailwindcss/base";
@import "tailwindcss/components"; @import "/assets/css/global";
@import "tailwindcss/utilities";
/* base */
@import "/assets/css/typography"; @import "/assets/css/typography";
@import "/assets/css/toc";
@import "/assets/css/code";
@import "/assets/css/search"; @import "/assets/css/search";
/* components */ @import "tailwindcss/components";
@import "/assets/css/code";
@import "/assets/css/toc";
@import "/assets/css/callouts"; @import "/assets/css/callouts";
@import "/assets/css/tables"; @import "/assets/css/tables";
/* global utils */ @import "tailwindcss/utilities";
@import "/assets/css/syntax-light";
[x-cloak] { @import "/assets/css/syntax-dark";
display: none !important;
}
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.link {
@apply text-blue-light dark:text-blue-dark underline-offset-2 underline;
}
.invertible {
@apply dark:filter dark:invert dark:hue-rotate-180;
}
hr {
@apply border-divider-light dark:border-divider-dark;
}
.sidebar-hover {
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
}
.sidebar-underline {
@apply underline underline-offset-4 decoration-4 decoration-blue-light dark:decoration-blue-dark;
}
/* see also: tailwind.config.js */

343
assets/css/syntax-dark.css Normal file
View File

@ -0,0 +1,343 @@
@layer utilities {
.syntax-dark {
/* Other */
.x {
color: theme("colors.white");
}
/* Error */
.err {
color: theme("colors.red.dark.500");
}
/* CodeLine */
.cl {
}
/* LineHighlight */
.hl {
min-width: fit-content;
background-color: theme("colors.gray.dark.300");
}
.lntd:first-child .hl,
& > .chroma > code > .hl {
margin-left: -4px;
border-left: 4px solid theme("colors.gray.dark.400");
}
/* LineNumbersTable */
.lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: theme("colors.gray.dark.400");
}
/* LineNumbers */
.ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: theme("colors.gray.dark.400");
}
/* Line */
.line {
display: flex;
}
/* Keyword */
.k {
color: theme("colors.amber.dark.700");
}
/* KeywordConstant */
.kc {
color: theme("colors.violet.dark.700");
}
/* KeywordDeclaration */
.kd {
color: theme("colors.amber.dark.700");
}
/* KeywordNamespace */
.kn {
color: theme("colors.amber.dark.700");
}
/* KeywordPseudo */
.kp {
color: theme("colors.amber.dark.700");
}
/* KeywordReserved */
.kr {
color: theme("colors.amber.dark.700");
}
/* KeywordType */
.kt {
color: theme("colors.amber.dark.700");
}
/* Name */
.n {
color: theme("colors.violet.dark.700");
}
/* NameAttribute */
.na {
color: theme("colors.amber.dark.700");
}
/* NameBuiltin */
.nb {
color: theme("colors.amber.dark.700");
}
/* NameBuiltinPseudo */
.bp {
color: theme("colors.violet.dark.700");
}
/* NameClass */
.nc {
color: theme("colors.white");
}
/* NameConstant */
.no {
color: theme("colors.white");
}
/* NameDecorator */
.nd {
color: theme("colors.violet.dark.700");
}
/* NameEntity */
.ni {
color: theme("colors.amber.dark.700");
}
/* NameException */
.ne {
color: theme("colors.red.dark.700");
}
/* NameFunction */
.nf {
color: theme("colors.blue.dark.600");
}
/* NameFunctionMagic */
.fm {
color: theme("colors.blue.dark.600");
}
/* NameLabel */
.nl {
color: theme("colors.amber.dark.500");
}
/* NameNamespace */
.nn {
color: theme("colors.white");
}
/* NameOther */
.nx {
color: theme("colors.white");
}
/* NameProperty */
.py {
color: theme("colors.white");
}
/* NameTag */
.nt {
color: theme("colors.green.dark.600");
}
/* NameVariable */
.nv {
color: theme("colors.white");
}
/* NameVariableClass */
.vc {
color: theme("colors.violet.dark.600");
}
/* NameVariableGlobal */
.vg {
color: theme("colors.violet.dark.600");
}
/* NameVariableInstance */
.vi {
color: theme("colors.violet.dark.600");
}
/* NameVariableMagic */
.vm {
color: theme("colors.violet.dark.600");
}
/* Literal */
.l {
color: theme("colors.white");
}
/* LiteralDate */
.ld {
color: theme("colors.green.dark.600");
}
/* LiteralString */
.s {
color: theme("colors.white");
}
/* LiteralStringAffix */
.sa {
color: theme("colors.green.dark.600");
}
/* LiteralStringBacktick */
.sb {
color: theme("colors.green.dark.600");
}
/* LiteralStringChar */
.sc {
color: theme("colors.green.dark.600");
}
/* LiteralStringDelimiter */
.dl {
color: theme("colors.green.dark.600");
}
/* LiteralStringDoc */
.sd {
color: theme("colors.green.dark.600");
}
/* LiteralStringDouble */
.s2 {
color: theme("colors.green.dark.600");
}
/* LiteralStringEscape */
.se {
color: theme("colors.white");
}
/* LiteralStringHeredoc */
.sh {
color: theme("colors.green.dark.600");
}
/* LiteralStringInterpol */
.si {
color: theme("colors.green.dark.600");
}
/* LiteralStringOther */
.sx {
color: theme("colors.green.dark.600");
}
/* LiteralStringRegex */
.sr {
color: theme("colors.blue.dark.500");
}
/* LiteralStringSingle */
.s1 {
color: theme("colors.green.dark.600");
}
/* LiteralStringSymbol */
.ss {
color: theme("colors.blue.dark.600");
}
/* LiteralNumber */
.m {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberBin */
.mb {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberFloat */
.mf {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberHex */
.mh {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberInteger */
.mi {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberIntegerLong */
.il {
color: theme("colors.blue.dark.600");
}
/* LiteralNumberOct */
.mo {
color: theme("colors.blue.dark.600");
}
/* Operator */
.o {
color: theme("colors.blue.dark.700");
}
/* OperatorWord */
.ow {
color: theme("colors.amber.dark.700");
}
/* Punctuation */
.p {
color: theme("colors.gray.dark.500");
}
/* Comment */
.c {
color: theme("colors.gray.dark.500");
}
/* CommentHashbang */
.ch {
color: theme("colors.gray.dark.500");
}
/* CommentMultiline */
.cm {
color: theme("colors.gray.dark.500");
}
/* CommentSingle */
.c1 {
color: theme("colors.gray.dark.500");
}
/* CommentSpecial */
.cs {
color: theme("colors.gray.dark.500");
}
/* CommentPreproc */
.cp {
color: theme("colors.gray.dark.500");
}
/* CommentPreprocFile */
.cpf {
color: theme("colors.gray.dark.500");
}
/* Generic */
.g {
color: theme("colors.white");
}
/* GenericDeleted */
.gd {
color: theme("colors.red.dark.500");
}
/* GenericEmph */
.ge {
color: theme("colors.white");
}
/* GenericError */
.gr {
color: theme("colors.red.dark.500");
}
/* GenericHeading */
.gh {
color: theme("colors.gray.dark.600");
}
/* GenericInserted */
.gi {
color: theme("colors.green.dark.500");
}
/* GenericOutput */
.go {
color: theme("colors.white");
}
/* GenericPrompt */
.gp {
user-select: none;
color: theme("colors.green.dark.400");
}
/* GenericStrong */
.gs {
color: theme("colors.white");
}
/* GenericSubheading */
.gu {
color: theme("colors.gray.dark.600");
}
/* GenericTraceback */
.gt {
color: theme("colors.red.dark.500");
}
/* GenericUnderline */
.gl {
color: theme("colors.white");
text-decoration: underline;
}
/* TextWhitespace */
.w {
color: theme("colors.gray.dark.100");
}
}
}

343
assets/css/syntax-light.css Normal file
View File

@ -0,0 +1,343 @@
@layer utilities {
.syntax-light {
/* Other */
.x {
color: theme("colors.black");
}
/* Error */
.err {
color: theme("colors.red.light.500");
}
/* CodeLine */
.cl {
}
/* LineHighlight */
.hl {
min-width: fit-content;
background-color: theme("colors.blue.light.100");
}
.lntd:first-child .hl,
& > .chroma > code > .hl {
margin-left: -4px;
border-left: 4px solid theme("colors.blue.light.300");
}
/* LineNumbersTable */
.lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: theme("colors.gray.light.400");
}
/* LineNumbers */
.ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: theme("colors.gray.light.400");
}
/* Line */
.line {
display: flex;
}
/* Keyword */
.k {
color: theme("colors.amber.light.500");
}
/* KeywordConstant */
.kc {
color: theme("colors.violet.light.400");
}
/* KeywordDeclaration */
.kd {
color: theme("colors.amber.light.500");
}
/* KeywordNamespace */
.kn {
color: theme("colors.amber.light.500");
}
/* KeywordPseudo */
.kp {
color: theme("colors.amber.light.500");
}
/* KeywordReserved */
.kr {
color: theme("colors.amber.light.500");
}
/* KeywordType */
.kt {
color: theme("colors.amber.light.500");
}
/* Name */
.n {
color: theme("colors.violet.light.400");
}
/* NameAttribute */
.na {
color: theme("colors.amber.light.500");
}
/* NameBuiltin */
.nb {
color: theme("colors.amber.light.500");
}
/* NameBuiltinPseudo */
.bp {
color: theme("colors.violet.light.400");
}
/* NameClass */
.nc {
color: theme("colors.black");
}
/* NameConstant */
.no {
color: theme("colors.black");
}
/* NameDecorator */
.nd {
color: theme("colors.violet.light.400");
}
/* NameEntity */
.ni {
color: theme("colors.amber.light.500");
}
/* NameException */
.ne {
color: theme("colors.red.light.700");
}
/* NameFunction */
.nf {
color: theme("colors.blue.light.600");
}
/* NameFunctionMagic */
.fm {
color: theme("colors.blue.light.600");
}
/* NameLabel */
.nl {
color: theme("colors.amber.light.700");
}
/* NameNamespace */
.nn {
color: theme("colors.black");
}
/* NameOther */
.nx {
color: theme("colors.black");
}
/* NameProperty */
.py {
color: theme("colors.black");
}
/* NameTag */
.nt {
color: theme("colors.green.light.600");
}
/* NameVariable */
.nv {
color: theme("colors.black");
}
/* NameVariableClass */
.vc {
color: theme("colors.violet.light.600");
}
/* NameVariableGlobal */
.vg {
color: theme("colors.violet.light.600");
}
/* NameVariableInstance */
.vi {
color: theme("colors.violet.light.600");
}
/* NameVariableMagic */
.vm {
color: theme("colors.violet.light.600");
}
/* Literal */
.l {
color: theme("colors.black");
}
/* LiteralDate */
.ld {
color: theme("colors.black");
}
/* LiteralString */
.s {
color: theme("colors.black");
}
/* LiteralStringAffix */
.sa {
color: theme("colors.green.light.600");
}
/* LiteralStringBacktick */
.sb {
color: theme("colors.green.light.600");
}
/* LiteralStringChar */
.sc {
color: theme("colors.green.light.600");
}
/* LiteralStringDelimiter */
.dl {
color: theme("colors.green.light.600");
}
/* LiteralStringDoc */
.sd {
color: #8f5902;
}
/* LiteralStringDouble */
.s2 {
color: theme("colors.green.light.600");
}
/* LiteralStringEscape */
.se {
color: theme("colors.black");
}
/* LiteralStringHeredoc */
.sh {
color: theme("colors.green.light.600");
}
/* LiteralStringInterpol */
.si {
color: theme("colors.green.light.600");
}
/* LiteralStringOther */
.sx {
color: theme("colors.green.light.600");
}
/* LiteralStringRegex */
.sr {
color: theme("colors.blue.light.500");
}
/* LiteralStringSingle */
.s1 {
color: theme("colors.green.light.600");
}
/* LiteralStringSymbol */
.ss {
color: theme("colors.green.light.600");
}
/* LiteralNumber */
.m {
color: theme("colors.blue.light.600");
}
/* LiteralNumberBin */
.mb {
color: theme("colors.blue.light.600");
}
/* LiteralNumberFloat */
.mf {
color: theme("colors.blue.light.600");
}
/* LiteralNumberHex */
.mh {
color: theme("colors.blue.light.600");
}
/* LiteralNumberInteger */
.mi {
color: theme("colors.blue.light.600");
}
/* LiteralNumberIntegerLong */
.il {
color: theme("colors.blue.light.600");
}
/* LiteralNumberOct */
.mo {
color: theme("colors.blue.light.600");
}
/* Operator */
.o {
color: theme("colors.blue.light.400");
}
/* OperatorWord */
.ow {
color: theme("colors.amber.light.500");
}
/* Punctuation */
.p {
color: theme("colors.gray.light.400");
}
/* Comment */
.c {
color: theme("colors.gray.light.400");
}
/* CommentHashbang */
.ch {
color: theme("colors.gray.light.400");
}
/* CommentMultiline */
.cm {
color: theme("colors.gray.light.400");
}
/* CommentSingle */
.c1 {
color: theme("colors.gray.light.400");
}
/* CommentSpecial */
.cs {
color: theme("colors.gray.light.400");
}
/* CommentPreproc */
.cp {
color: theme("colors.gray.light.400");
}
/* CommentPreprocFile */
.cpf {
color: theme("colors.gray.light.400");
}
/* Generic */
.g {
color: theme("colors.black");
}
/* GenericDeleted */
.gd {
color: theme("colors.red.light.500");
}
/* GenericEmph */
.ge {
color: theme("colors.black");
}
/* GenericError */
.gr {
color: theme("colors.red.light.500");
}
/* GenericHeading */
.gh {
color: theme("colors.gray.light.600");
}
/* GenericInserted */
.gi {
color: theme("colors.green.light.500");
}
/* GenericOutput */
.go {
color: theme("colors.black");
}
/* GenericPrompt */
.gp {
user-select: none;
color: theme("colors.green.light.400");
}
/* GenericStrong */
.gs {
color: theme("colors.black");
}
/* GenericSubheading */
.gu {
color: theme("colors.gray.light.600");
}
/* GenericTraceback */
.gt {
color: theme("colors.red.light.500");
}
/* GenericUnderline */
.gl {
color: theme("colors.black");
text-decoration: underline;
}
/* TextWhitespace */
.w {
color: theme("colors.gray.light.100");
}
}
}

23
assets/css/tables.css
View File

@ -1,12 +1,15 @@
.prose table { @layer components {
@apply table w-full text-base sm:block overflow-x-auto; .prose table {
thead tr { @apply table w-full overflow-x-auto text-base sm:block;
@apply bg-gray-light-300 dark:bg-gray-dark-300 thead tr {
} @apply bg-gray-light-300 dark:bg-gray-dark-300;
tbody tr:nth-of-type(2n) { }
@apply bg-gray-light-200 dark:bg-gray-dark-200 tbody tr:nth-of-type(2n) {
} @apply bg-gray-light-200 dark:bg-gray-dark-200;
th, td { }
@apply p-2; th,
td {
@apply p-2;
}
} }
} }

30
assets/css/toc.css
View File

@ -1,18 +1,20 @@
#TableOfContents { @layer components {
nav { #TableOfContents {
@apply border-l-2 border-divider-light; nav {
} @apply border-l-2 border-divider-light;
ul ul {
@apply pl-2;
}
a {
@apply max-w-full truncate py-1 block hover:font-medium hover:no-underline pl-2;
&[aria-current="true"],
&:hover {
@apply font-medium text-black dark:text-white border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 dark:border-l-gray-dark dark:from-gray-dark-200;
} }
&:not([aria-current="true"]) { ul ul {
@apply text-gray-light-600 dark:text-gray-dark-700 hover:text-black dark:hover:text-white; @apply pl-2;
}
a {
@apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
&[aria-current="true"],
&:hover {
@apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
}
&:not([aria-current="true"]) {
@apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
}
} }
} }
} }

65
assets/css/typography.css
View File

@ -1,34 +1,37 @@
.prose { @layer base {
li { .prose {
@apply my-2; li {
> :last-child, > :first-child { @apply my-2;
margin: 0; > :last-child,
> :first-child {
margin: 0;
}
}
a {
font-weight: 400;
}
hr {
@apply mb-4 mt-8;
}
h1 {
@apply my-4 text-4xl;
line-height: 1.167;
}
h2 {
@apply mb-4 mt-8 text-3xl;
line-height: 1.2;
}
h3 {
@apply text-2xl;
line-height: 1.167;
}
h4 {
@apply text-xl;
line-height: 1.235;
}
h5 {
@apply text-lg;
line-height: 1.75;
} }
} }
a {
font-weight: 400;
}
hr {
@apply mt-8 mb-4;
}
h1 {
@apply text-4xl my-4;
line-height: 1.167;
}
h2 {
@apply text-3xl mt-8 mb-4;
line-height: 1.2;
}
h3 {
@apply text-2xl;
line-height: 1.167;
}
h4 {
@apply text-xl;
line-height: 1.235;
}
h5 {
@apply text-lg;
line-height: 1.75;
}
} }

5
layouts/_default/_markup/render-codeblock.html
View File

@ -9,5 +9,8 @@
> >
content_copy content_copy
</button> </button>
{{- highlight .Inner .Type .Options -}} {{ $result := transform.HighlightCodeBlock . }}
<div class="syntax-light dark:syntax-dark">
{{ $result.Wrapped }}
</div>
</div> </div>