diff --git a/README.md b/README.md index c1e949ed93..1c16b7395c 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,16 @@ PRs are merged first to the `main` branch of this repo. Periodically, the docs team will merge `main` into `latest`, which will make the changes visible on the docs site. -Please be patient, as there may be a lag of several days before `main` is merged into `latest`. If you want to see your changes before they're merged to `latest`, you can see them on https://redis.io/docs/staging/dev/. +Please be patient, as there may be a lag of several days before `main` is merged into `latest`. If you want to see your changes before they're merged to `latest`, you can see them on https://redis.io/docs/staging/dev/. If your PR is urgent, let the docs team know in the PR comments, and we will do our best to accommodate. ## Site template files and folders -* **/archetypes**: A Markdown file needs to have some front matter. An archetype defines which front matter is used when using `hugo new content`. Right now, the only supported archetype is the default one. **Note:** We might want to add additional archetypes in the future because most of our pages contain additional meta data properties like `linkTitle`. +* **/archetypes**: A Markdown file needs to have some front matter. An archetype defines which front matter is used when using `hugo new content`. Right now, the only supported archetype is the default one. **Note:** We might want to add additional archetypes in the future because most of our pages contain additional meta data properties like `linkTitle`. * **/content**: This folder contains the markdown files. We will have the subfolders like `/develop`, `/integrate`, and `/operate` * **/assets**: CSS files, site-wide icons, and images. * **/data**: Data files that are accessed by Hugo and rendered with the help of short codes or partials. -* **/layouts/partials**: HTML templates that are used across sites. Examples are TOCs, breadcrumbs, or headers. +* **/layouts/partials**: HTML templates that are used across sites. Examples are TOCs, breadcrumbs, or headers. * **/layouts/$type**: Each page type has at least the following templates to implement `single.html` and `list.html`. The `single` template is used to render a discrete page. The `list` template is used to render a collection of related pages (e.g., all sub-pages). * **/layouts/home.html**: The home page of the site, that is, the page that is displayed when you open the root path. * **/layouts/404.html**: The default 404 page. @@ -20,7 +20,6 @@ If your PR is urgent, let the docs team know in the PR comments, and we will do * **/static**: Any static files that need to be accessed by the site, e.g., CSS or JavaScript. * **/package.json**: Node.js dependencies. Tailwind, for example, is installed via the Node package manager (`npm`). * **/config.toml**: Hugo's site configuration, like the root path and menu items. Hugo can access configuration elements when rendering the site. So you can define custom configuration settings here. -* **/syntax.css**: Hugo supports syntax highlighting via shortcodes. The highlighter is configured via this CSS file. * **/Makefile**: We use make to wrap some Hugo commands and to add additional build steps. * **/tailwind.config.js**: This is the Tailwind CSS framwork's configuration file. * **/postcss.config.js**: Needed to make Tailwind statically accessible to the site. diff --git a/assets/css/index.css b/assets/css/index.css index ddfacb6699..28ae78149a 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -76,7 +76,7 @@ section.prose { .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)), .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)), -.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) +.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { @apply my-0; } @@ -302,7 +302,7 @@ select { } .star-rating { - @apply flex flex-row-reverse justify-around text-center text-xl items-center; + @apply flex flex-row-reverse justify-around text-center text-xl items-center; } .star-rating input { @@ -311,18 +311,18 @@ select { .star-rating label { @apply cursor-pointer text-white; - /* - From https://owumaro.github.io/text-stroke-generator/ + /* + From https://owumaro.github.io/text-stroke-generator/ Currently, there is not great way to text-stroke that works across browsers Alternative is to replace star character with SVG */ - text-shadow: - rgb(92, 112, 122) 1px 0px 0px, - rgb(92, 112, 122) 0.540302px 0.841471px 0px, - rgb(92, 112, 122) -0.416147px 0.909297px 0px, - rgb(92, 112, 122) -0.989993px 0.14112px 0px, - rgb(92, 112, 122) -0.653644px -0.756803px 0px, - rgb(92, 112, 122) 0.283662px -0.958924px 0px, + text-shadow: + rgb(92, 112, 122) 1px 0px 0px, + rgb(92, 112, 122) 0.540302px 0.841471px 0px, + rgb(92, 112, 122) -0.416147px 0.909297px 0px, + rgb(92, 112, 122) -0.989993px 0.14112px 0px, + rgb(92, 112, 122) -0.653644px -0.756803px 0px, + rgb(92, 112, 122) 0.283662px -0.958924px 0px, rgb(92, 112, 122) 0.96017px -0.279416px 0px; } @@ -333,7 +333,7 @@ select { .star-rating label:hover, .star-rating label:hover ~ label { @apply text-redis-red-500; -} +} .codetabs .label { min-width: 2rem; @@ -503,7 +503,8 @@ html { scrollbar-gutter: stable; } -/* Chroma syntax highlighting +/* Chroma syntax highlighting */ + /* Background */ .bg { @apply text-slate-50 bg-slate-900; @@ -514,17 +515,11 @@ html { @apply p-4 overflow-x-auto text-slate-50 bg-slate-900 rounded-md; } -/* Other */ -.chroma .x {} - /* Error */ .chroma .err { @apply text-red-600; } -/* CodeLine */ -.chroma .cl {} - /* LineLink */ .chroma .lnlinks { @apply outline-none text-inherit no-underline; @@ -549,8 +544,6 @@ html { @apply flex bg-indigo-900/80; } -code - /* LineNumbersTable */ .chroma .lnt { @apply text-slate-400 whitespace-pre pl-2 pr-4; @@ -570,345 +563,167 @@ code @apply flex; } -/* Keyword */ -.chroma .k { - @apply text-red-400; -} - -/* KeywordConstant */ -.chroma .kc { - @apply text-blue-400; -} - -/* KeywordDeclaration */ -.chroma .kd { - @apply text-red-400; -} +/* Empty styles - Other, CodeLine, Name, NameAttribute, NameBuiltin, NameBuiltinPseudo, NameFunctionMagic, NameOther, NameVariableClass, NameVariableGlobal, NameVariableInstance, NameVariableMagic, Punctuation, Generic */ +.chroma .x, +.chroma .cl, +.chroma .n, +.chroma .na, +.chroma .nb, +.chroma .bp, +.chroma .fm, +.chroma .nx, +.chroma .vc, +.chroma .vg, +.chroma .vi, +.chroma .vm, +.chroma .p, +.chroma .g {} -/* KeywordNamespace */ -.chroma .kn { +/* Keywords - Red (Keyword, KeywordDeclaration, KeywordNamespace, KeywordReserved, KeywordType) */ +.chroma .k, +.chroma .kd, +.chroma .kn, +.chroma .kr, +.chroma .kt { @apply text-red-400; } -/* KeywordPseudo */ +/* Keywords - Blue (KeywordConstant, KeywordPseudo) */ +.chroma .kc, .chroma .kp { @apply text-blue-400; } -/* KeywordReserved */ -.chroma .kr { - @apply text-red-400; -} - -/* KeywordType */ -.chroma .kt { - @apply text-red-400; -} - -/* Name */ -.chroma .n {} - -/* NameAttribute */ -.chroma .na {} - -/* NameBuiltin */ -.chroma .nb {} - -/* NameBuiltinPseudo */ -.chroma .bp {} - -/* NameClass */ -.chroma .nc { - @apply text-orange-400 font-bold; -} - -/* NameConstant */ -.chroma .no { - @apply text-blue-400 font-bold; -} - -/* NameDecorator */ -.chroma .nd { - @apply text-purple-300 font-bold; -} - -/* NameEntity */ +/* Names - Orange (NameEntity) */ .chroma .ni { @apply text-orange-400; } -/* NameException */ +/* Names - Orange Bold (NameClass, NameException) */ +.chroma .nc, .chroma .ne { @apply text-orange-400 font-bold; } -/* NameFunction */ +/* Names - Purple Bold (NameDecorator, NameFunction) */ +.chroma .nd, .chroma .nf { @apply text-purple-300 font-bold; } -/* NameFunctionMagic */ -.chroma .fm {} +/* Names - Blue (NameProperty, NameVariable) */ +.chroma .py, +.chroma .nv { + @apply text-blue-400; +} -/* NameLabel */ +/* Names - Blue Bold (NameConstant, NameLabel) */ +.chroma .no, .chroma .nl { @apply text-blue-400 font-bold; } -/* NameNamespace */ +/* Names - Red (NameNamespace) */ .chroma .nn { @apply text-red-400; } -/* NameOther */ -.chroma .nx {} - -/* NameProperty */ -.chroma .py { - @apply text-blue-400; -} - -/* NameTag */ +/* Names - Green (NameTag) */ .chroma .nt { @apply text-green-400; } -/* NameVariable */ -.chroma .nv { - @apply text-blue-400 -} - -/* NameVariableClass */ -.chroma .vc {} - -/* NameVariableGlobal */ -.chroma .vg {} - -/* NameVariableInstance */ -.chroma .vi {} - -/* NameVariableMagic */ -.chroma .vm {} - -/* Literal */ -.chroma .l { - @apply text-blue-400; -} - -/* LiteralDate */ -.chroma .ld { - @apply text-blue-400; -} - -/* LiteralString */ -.chroma .s { - @apply text-blue-400; -} - -/* LiteralStringAffix */ -.chroma .sa { - @apply text-blue-400 -} - -/* LiteralStringBacktick */ -.chroma .sb { - @apply text-blue-400; -} - -/* LiteralStringChar */ -.chroma .sc { - @apply text-blue-400; -} - -/* LiteralStringDelimiter */ -.chroma .dl { - @apply text-blue-400 -} - -/* LiteralStringDoc */ -.chroma .sd { - @apply text-blue-400; -} - -/* LiteralStringDouble */ -.chroma .s2 { - @apply text-blue-400; -} - -/* LiteralStringEscape */ -.chroma .se { - @apply text-blue-400 -} - -/* LiteralStringHeredoc */ -.chroma .sh { - @apply text-blue-400 -} - -/* LiteralStringInterpol */ -.chroma .si { - @apply text-blue-400; -} - -/* LiteralStringOther */ -.chroma .sx { - @apply text-blue-400; -} - -/* LiteralStringRegex */ -.chroma .sr { - @apply text-blue-400 -} - -/* LiteralStringSingle */ -.chroma .s1 { - @apply text-blue-400; -} - -/* LiteralStringSymbol */ -.chroma .ss { - @apply text-blue-400; -} - -/* LiteralNumber */ -.chroma .m { - @apply text-blue-400; -} - -/* LiteralNumberBin */ -.chroma .mb { - @apply text-blue-400; -} - -/* LiteralNumberFloat */ -.chroma .mf { - @apply text-blue-400; -} - -/* LiteralNumberHex */ -.chroma .mh { - @apply text-blue-400; -} - -/* LiteralNumberInteger */ -.chroma .mi { - @apply text-blue-400; -} - -/* LiteralNumberIntegerLong */ -.chroma .il { - @apply text-blue-400; -} - -/* LiteralNumberOct */ +/* Literals - Blue (All literal types: Literal, LiteralDate, LiteralString*, LiteralNumber*) */ +.chroma .l, +.chroma .ld, +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .se, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .sr, +.chroma .s1, +.chroma .ss, +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, .chroma .mo { @apply text-blue-400; } -/* Operator */ -.chroma .o { - @apply text-red-400 font-bold; -} - -/* OperatorWord */ +/* Operators - Red Bold (Operator, OperatorWord) */ +.chroma .o, .chroma .ow { @apply text-red-400 font-bold; } -/* Punctuation */ -.chroma .p {} - -/* Comment */ -.chroma .c { - @apply text-slate-500; - font-style: italic -} - -/* CommentHashbang */ -.chroma .ch { - @apply text-slate-500; - font-style: italic -} - -/* CommentMultiline */ -.chroma .cm { - @apply text-slate-500 italic; -} - -/* CommentSingle */ +/* Comments - Slate Italic (Comment, CommentHashbang, CommentMultiline, CommentSingle) */ +.chroma .c, +.chroma .ch, +.chroma .cm, .chroma .c1 { @apply text-slate-500 italic; } -/* CommentSpecial */ -.chroma .cs { - @apply text-slate-500 font-bold italic; -} - -/* CommentPreproc */ -.chroma .cp { - @apply text-slate-500 font-bold italic; -} - -/* CommentPreprocFile */ +/* Comments - Slate Bold Italic (CommentSpecial, CommentPreproc, CommentPreprocFile) */ +.chroma .cs, +.chroma .cp, .chroma .cpf { @apply text-slate-500 font-bold italic; } -/* Generic */ -.chroma .g {} - -/* GenericDeleted */ +/* Generic - Red (GenericDeleted with background, GenericError) */ .chroma .gd { @apply text-red-300 bg-red-900; } -/* GenericEmph */ -.chroma .ge { - @apply italic; -} - -/* GenericError */ .chroma .gr { @apply text-red-300; } -/* GenericHeading */ +/* Generic - Red 400 (GenericTraceback) */ +.chroma .gt { + @apply text-red-400; +} + +/* Generic - Blue (GenericHeading with bold, GenericSubheading) */ .chroma .gh { @apply text-blue-400 font-bold; } -/* GenericInserted */ +.chroma .gu { + @apply text-blue-400; +} + +/* Generic - Green (GenericInserted) */ .chroma .gi { @apply text-green-400 bg-green-900; } -/* GenericOutput */ -.chroma .go { +/* Generic - Slate (GenericOutput, GenericPrompt) */ +.chroma .go, +.chroma .gp { @apply text-slate-400; } -/* GenericPrompt */ -.chroma .gp { - @apply text-slate-400; +/* Generic - Formatting (GenericEmph, GenericStrong, GenericUnderline) */ +.chroma .ge { + @apply italic; } -/* GenericStrong */ .chroma .gs { @apply font-bold; } -/* GenericSubheading */ -.chroma .gu { - @apply text-blue-400; -} - -/* GenericTraceback */ -.chroma .gt { - @apply text-red-400; -} - -/* GenericUnderline */ .chroma .gl { @apply underline; } diff --git a/assets/scss/_font.scss b/assets/scss/_font.scss deleted file mode 100644 index f359cf6a23..0000000000 --- a/assets/scss/_font.scss +++ /dev/null @@ -1,163 +0,0 @@ -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-SuperItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-SuperItalic-Web.woff') format('woff'); - font-weight: 900; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Super-Web.woff2') format('woff2'), - url('/fonts/Graphik-Super-Web.woff') format('woff'); - font-weight: 900; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-BlackItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-BlackItalic-Web.woff') format('woff'); - font-weight: 800; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Black-Web.woff2') format('woff2'), - url('/fonts/Graphik-Black-Web.woff') format('woff'); - font-weight: 800; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-BoldItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-BoldItalic-Web.woff') format('woff'); - font-weight: 700; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Bold-Web.woff2') format('woff2'), - url('/fonts/Graphik-Bold-Web.woff') format('woff'); - font-weight: 700; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-SemiboldItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-SemiboldItalic-Web.woff') format('woff'); - font-weight: 600; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Semibold-Web.woff2') format('woff2'), - url('/fonts/Graphik-Semibold-Web.woff') format('woff'); - font-weight: 600; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-MediumItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-MediumItalic-Web.woff') format('woff'); - font-weight: 500; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Medium-Web.woff2') format('woff2'), - url('/fonts/Graphik-Medium-Web.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-RegularItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-RegularItalic-Web.woff') format('woff'); - font-weight: 400; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Regular-Web.woff2') format('woff2'), - url('/fonts/Graphik-Regular-Web.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-LightItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-LightItalic-Web.woff') format('woff'); - font-weight: 300; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Light-Web.woff2') format('woff2'), - url('/fonts/Graphik-Light-Web.woff') format('woff'); - font-weight: 300; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-ExtralightItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-ExtralightItalic-Web.woff') format('woff'); - font-weight: 200; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Extralight-Web.woff2') format('woff2'), - url('/fonts/Graphik-Extralight-Web.woff') format('woff'); - font-weight: 200; - font-style: normal; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-ThinItalic-Web.woff2') format('woff2'), - url('/fonts/Graphik-ThinItalic-Web.woff') format('woff'); - font-weight: 100; - font-style: italic; - font-stretch: normal; -} - -@font-face { - font-family: 'Graphik Web'; - src: url('/fonts/Graphik-Thin-Web.woff2') format('woff2'), - url('/fonts/Graphik-Thin-Web.woff') format('woff'); - font-weight: 100; - font-style: normal; - font-stretch: normal; -} - -$font-family: 'Graphik Web', Helvetica, Arial, sans-serif; diff --git a/assets/scss/pages/bazzar.scss b/assets/scss/pages/bazzar.scss deleted file mode 100644 index 9424a9f934..0000000000 --- a/assets/scss/pages/bazzar.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../partials/docs-nav'; - -.bazzar-group { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); - gap: 1rem; -} - -.bazzar-section { - grid-column: 1 / -1; -} - -.bazzar-list { - display: grid; - grid-template-columns: 15ch 1fr auto auto auto auto; - gap: 1rem; -} - diff --git a/assets/scss/pages/command.scss b/assets/scss/pages/command.scss deleted file mode 100644 index 3b35b278c5..0000000000 --- a/assets/scss/pages/command.scss +++ /dev/null @@ -1,48 +0,0 @@ -body > section { - $mobileMaxWidth: 45em; - - display: flex; - gap: 1em; - - @media screen and (max-width: $mobileMaxWidth) { - flex-direction: column; - } - - > main { - flex: 1 1 0; - - > h1, > h2 { - margin: 0.75em 0; - } - - > h1 { - font-size: 2.5em; - } - - > h2 { - font-size: 2em; - margin: 0.75em 0; - } - - > div { - margin: 0.75em 0; - - > span.title { - font-weight: 500; - } - } - } - - > aside { - flex: 0 0 var(--nav-width); - - > ul { - list-style: none; - padding: 0; - - > li { - margin-block: 0.5em; - } - } - } -} diff --git a/assets/scss/pages/commands.scss b/assets/scss/pages/commands.scss deleted file mode 100644 index 346bded9cc..0000000000 --- a/assets/scss/pages/commands.scss +++ /dev/null @@ -1,102 +0,0 @@ -form { - display: block; - padding: 1em; - font-size: 0.85em; - - // @media (max-width: $mobile) { - // .container { - // display: flex; - // flex-direction: column; - // } - // } - - label { - margin-right: 0; - - &[for="name-filter"] { - position: relative; - - &:before { - background: url("/images/search-icon.svg") no-repeat; - background-size: contain; - content: ''; - height: 16px; - left: .5rem; - position: absolute; - top: 50%; - transform: translateY(-36%); - width: 16px; - } - - input { - padding-left: 2rem; - } - - // @media (max-width: $tablet-norm) { - // margin-left: 2rem; - // } - - // @media (max-width: $mobile) { - // margin-left: 0; - // margin-top: 1rem; - // } - } - - // @media (max-width: $tablet-norm) { - // width: 50%; - // } - - // @media (max-width: $mobile) { - // width: 100%; - // } - } - - select, input[type="search"] { - border: none; - border-bottom: 1px solid var(--neutral-text-color)!important; - border-radius: 0; - color: var(--neutral-text-color); - font-size: 18px; - padding-bottom: 0; - width: 300px; - - // @media (max-width: $tablet-norm) { - // width: 100%; - // } - } - - select { - margin-right: 2rem; - } -} - -// #commands-grid { -// display: grid; -// grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); -// gap: 1.875rem; - -// > a { -// background-color: #ffffff; -// border-top: 2px solid transparent; -// box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.05); -// padding: 1em; - -// &:hover, &:focus { -// border-top-color: var(--secondary-color); -// text-decoration: none; -// } - -// > .name { -// margin-bottom: .5rem; -// overflow: hidden; -// text-overflow: ellipsis; -// white-space: nowrap; -// font-weight: 500; - -// > span { -// font-weight: 400; -// font-size: 0.8em; -// } -// } -// } -// } diff --git a/assets/scss/pages/docs.scss b/assets/scss/pages/docs.scss deleted file mode 100644 index 9aadc2d4a7..0000000000 --- a/assets/scss/pages/docs.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import '../partials/docs-nav'; - -body > section > main { - > aside { - display: inline-block; - border: 1px solid #eeeeee; - padding: 1em; - - > p { - margin: 0; - } - - > nav > ul { - list-style: none; - margin: 0; - padding: 0; - } - } - - > nav { - border-top: 1px solid var(--neutral-text-color); - - > ul { - list-style: none; - padding: 0; - - > li { - margin-block: 1em; - - > a { - font-weight: 500; - } - - > p { - margin: 0; - } - } - } - } -} diff --git a/assets/scss/pages/home.scss b/assets/scss/pages/home.scss deleted file mode 100644 index 0d672244c9..0000000000 --- a/assets/scss/pages/home.scss +++ /dev/null @@ -1,68 +0,0 @@ -.cli-window { - $triangleMargin: 2em; - - position: relative; - padding: $triangleMargin $triangleMargin 0 0; - background: url('/images/triangle-lines.svg') no-repeat top right; -} - -.chrome { - background-color: black; - border-radius: 2px 2px 0 0; - height: 2em; - width: 100%; -} - -.cli { - width: 100%; -} - -body > main > section { - // background: linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%); - padding: 1.5em 0; - - &.hero { - - - div.stat { - font-weight: 500; - font-size: 2.625em; - color: #51ccca; - } - } - - > div.description { - > div span { - color: #51ccca; - } - } - - // .grid { - // display: grid; - // grid-template-columns: repeat(3, 1fr); - // gap: 2em; - - // @media screen and (max-width: 70em) { - // grid-template-columns: 1fr; - // } - - // > h2 { - // grid-column: 1 / -1; - // } - - // > div { - // display: flex; - // gap: 0.5em; - // flex-direction: column; - - // > p { - // flex: 1 1 0; - // } - // } - - // &.with-border > div { - // border-top: 2px solid var(--secondary-color); - // padding-top: 1em; - // } - // } -} diff --git a/assets/scss/partials/_docs-nav.scss b/assets/scss/partials/_docs-nav.scss deleted file mode 100644 index c443720062..0000000000 --- a/assets/scss/partials/_docs-nav.scss +++ /dev/null @@ -1,37 +0,0 @@ -body > section { - // display: flex; - // gap: 1em; - - > nav { - flex: 0 0 var(--nav-width); - - ul { - list-style: none; - margin: 0 0 0 1em; - padding: 0; - font-weight: 400; - - > li { - margin: 0.5em 0; - - > a { - color: var(--neutral-text-color); - } - - &.active > a { - color: var(--secondary-color); - } - } - } - - > ul { - margin: 0; - font-weight: 500; - } - } - - > main { - flex: 1 1 0; - - } -} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 099fbbe35d..40b14adca8 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,59 +1,4 @@ -@import './root', './font'; - -// * { -// box-sizing: border-box; -// } - -// html, body { -// font-size: 16px; -// margin: 0; -// font-family: $font-family; -// line-height: 1.5; -// } - -// pre { -// white-space: pre-wrap; -// } - -// b, strong, em, .bold { -// font-weight: 500; -// } - -// h1, h2, h3, h4, h5, h6 { -// margin: 0; -// padding: 0; -// font-weight: 500; -// color: var(--primary-text-color); -// } - -// h1 { -// font-size: 3.5rem; -// } - -// h2 { -// font-size: 2.625rem; -// } - -// h3 { -// font-size: 2.125rem; -// } - -// h4 { -// font-size: 1.5em; -// } - -// a { -// color: var(--secondary-color); -// text-decoration: none; - -// &:hover, &:focus { -// text-decoration: underline; -// } -// } - -// .text-center { -// text-align: center; -// } +@import './root'; .primary-background-color { background-color: var(--primary-color); @@ -85,47 +30,6 @@ padding: 0; } -// .button, .button-outline, .button-outline-white { -// display: inline-block; -// padding: 1em; -// border-radius: 2px; -// font-weight: 500; -// text-decoration: none; -// transition: -// background-color var(--transition-duration), -// border var(--transition-duration); -// } - -// .button { -// --color: var(--secondary-color); -// background-color: var(--color); -// border: 1px solid var(--color); -// color: var(--text-on-secondary-color); - -// &:hover, &:focus-within { -// --color: var(--secondary-color-shade); -// } -// } - -// .button-outline, .button-outline-white { -// border: 1px solid var(--color); -// color: var(--color); - -// &:hover, &:focus-within { -// --color: #ffffff; -// background-color: var(--secondary-color); -// border-color: var(--secondary-color); -// } -// } - -// .button-outline { -// --color: var(--primary-color); -// } - -// .button-outline-white { -// --color: #ffffff; -// } - .full-width, .full-width-container > * { width: Min(100%, var(--max-width)); padding: var(--min-padding); @@ -166,144 +70,4 @@ body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; - - // > header { - // position: sticky; - // z-index: 1; - // top: 0; - // font-size: 0.875em; - // box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); - - // > div.full-width { - // display: flex; - // align-items: center; - // gap: 1rem; - // font-weight: 500; - // height: var(--header-height); - - // > div.logo { - // height: 100%; - // padding-block: 0.5em; - // width: var(--nav-width); - - // > a, > a > svg { - // height: 100%; - // } - // } - - // > button { - // display: none; - // } - - // > nav { - // display: contents; - - // > ul { - // display: contents; - // list-style: none; - - // a { - // display: block; - // color: inherit; - // } - - // &.links > li { - // position: relative; - - // > a { - // margin-inline-end: 1em; - // } - - // > ul { - // $padding: 1em; - // $topMargin: 1em; - - // display: none; - // width: 10em; - // position: absolute; - // top: calc(100% + #{$topMargin}); - // left: -$padding; - // z-index: 1; - // list-style: none; - // padding: 0; - // margin: 0; - // background: var(--secondary-color); - // border-radius: 3px; - - // > li { - // padding: $padding; - // } - - // // triangle - // &:before { - // content: ''; - // $size: 0.5em; - // position: absolute; - // top: -$size; - // left: $padding; - // border-left: $size solid transparent; - // border-right: $size solid transparent; - // border-bottom: $size solid var(--secondary-color); - // margin-left: -$size / 2; - // } - - // // extend the "hoverable" area - // &:after { - // content: ''; - // height: $topMargin; - // position: absolute; - // top: -$topMargin; - // width: 100%; - // } - // } - - // &:focus-within, &:hover { - // > ul { - // display: block; - // } - // } - // } - - // &.buttons > li { - // &:first-child { - // margin-inline-start: auto; - // } - // } - // } - // } - - // @media screen and (max-width: 70em) { - // flex-wrap: wrap; - - // > button { - // display: block; - // margin-inline-start: auto; - // } - - // > nav { - // display: none; - // flex-basis: 100%; - - // &.open { - // display: block; - // } - - // > ul { - // flex-direction: column; - - // &.links { - // margin: 1em 0; - // } - // } - // } - // } - // } - // } - - // > footer { - // a { - // color: inherit; - // font-weight: 500; - // } - // } } diff --git a/syntax.css b/syntax.css deleted file mode 100644 index fc2ec0a504..0000000000 --- a/syntax.css +++ /dev/null @@ -1,85 +0,0 @@ -/* Background */ .bg { color: #f8f8f2; background-color: #272822 } -/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } -/* CodeLine */ .chroma .cl { } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #66d9ef } -/* KeywordConstant */ .chroma .kc { color: #66d9ef } -/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } -/* KeywordNamespace */ .chroma .kn { color: #f92672 } -/* KeywordPseudo */ .chroma .kp { color: #66d9ef } -/* KeywordReserved */ .chroma .kr { color: #66d9ef } -/* KeywordType */ .chroma .kt { color: #66d9ef } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #a6e22e } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #a6e22e } -/* NameConstant */ .chroma .no { color: #66d9ef } -/* NameDecorator */ .chroma .nd { color: #a6e22e } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { color: #a6e22e } -/* NameFunction */ .chroma .nf { color: #a6e22e } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { color: #a6e22e } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #f92672 } -/* NameVariable */ .chroma .nv { } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { color: #ae81ff } -/* LiteralDate */ .chroma .ld { color: #e6db74 } -/* LiteralString */ .chroma .s { color: #e6db74 } -/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } -/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } -/* LiteralStringChar */ .chroma .sc { color: #e6db74 } -/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } -/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } -/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } -/* LiteralStringEscape */ .chroma .se { color: #ae81ff } -/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } -/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } -/* LiteralStringOther */ .chroma .sx { color: #e6db74 } -/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } -/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } -/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } -/* LiteralNumber */ .chroma .m { color: #ae81ff } -/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } -/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } -/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } -/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } -/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } -/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } -/* Operator */ .chroma .o { color: #f92672 } -/* OperatorWord */ .chroma .ow { color: #f92672 } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #75715e } -/* CommentHashbang */ .chroma .ch { color: #75715e } -/* CommentMultiline */ .chroma .cm { color: #75715e } -/* CommentSingle */ .chroma .c1 { color: #75715e } -/* CommentSpecial */ .chroma .cs { color: #75715e } -/* CommentPreproc */ .chroma .cp { color: #75715e } -/* CommentPreprocFile */ .chroma .cpf { color: #75715e } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #f92672 } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { color: #a6e22e } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #75715e } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { }