diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh index 024aa811aa..a2c8e3a93b 100755 --- a/.devcontainer/on-create.sh +++ b/.devcontainer/on-create.sh @@ -5,10 +5,13 @@ set -euo pipefail cd $(mktemp -d) # hugo -scurl -O https://github.com/gohugoio/hugo/releases/download/v0.142.0/hugo_extended_0.142.0_linux-amd64.deb +scurl -O https://github.com/gohugoio/hugo/releases/download/v0.142.0/hugo_0.142.0_linux-amd64.deb sudo dpkg -i hugo*.deb rm hugo*.deb +# dart sass +sudo npm install -g sass-embedded@1.97.3 + # htmltest scurl https://htmltest.wjdp.uk | bash sudo mv bin/htmltest /usr/local/bin diff --git a/.gitignore b/.gitignore index 11815fd0c8..d59bc3171d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,8 @@ -.vscode -node_modules .*.swp .DS_Store -tmp .idea -bin/htmltest \ No newline at end of file +.vscode +.zed +bin/htmltest +node_modules +tmp diff --git a/Makefile b/Makefile index f1ae1b7d68..678f6db6b2 100644 --- a/Makefile +++ b/Makefile @@ -18,6 +18,7 @@ endef HAS_GSUTIL := $(shell command -v gsutil;) HAS_FLARECTL := $(shell command -v flarectl;) HAS_HUGO := $(shell command -v hugo;) +HAS_SASS := $(shell command -v sass;) HAS_HTMLTEST := $(shell command -v htmltest;) HAS_MDLINT := $(shell command -v markdownlint;) @@ -115,6 +116,9 @@ build-linkerd.io: get-versions tmp/linkerd.io @# Build linkerd.io ifndef HAS_HUGO @printf "Install hugo first. For OSX: brew install hugo\n"; exit 1 +endif +ifndef HAS_SASS + @printf "Install Dart Sass first: npm install sass\n"; exit 1 endif cd tmp/linkerd.io && ./build @@ -146,5 +150,3 @@ has-env-%: .PHONY: clean clean: rm -rf tmp - - diff --git a/linkerd.io/Makefile b/linkerd.io/Makefile index 504e8e97bb..ea61365c44 100644 --- a/linkerd.io/Makefile +++ b/linkerd.io/Makefile @@ -1,10 +1,12 @@ production-build: - hugo \ + npm install --save-dev sass-embedded + PATH="$(CURDIR)/node_modules/.bin:$$PATH" hugo \ --cleanDestinationDir \ --minify preview-build: - hugo \ + npm install --save-dev sass-embedded + PATH="$(CURDIR)/node_modules/.bin:$$PATH" hugo \ --baseURL $(DEPLOY_PRIME_URL) \ --buildDrafts \ --buildFuture \ diff --git a/linkerd.io/README.md b/linkerd.io/README.md index 6f36f088bc..aa485f37de 100644 --- a/linkerd.io/README.md +++ b/linkerd.io/README.md @@ -12,15 +12,27 @@ docker run \ ### Install Hugo to develop locally -For Mac users: +Install Dart Sass first: + +```bash +brew install sass/sass/sass +``` + +Then install Hugo: ```bash brew install hugo ``` -Or download the **extended** release of Hugo from the GitHub +Or download the release of Hugo from the GitHub [release page](https://github.com/gohugoio/hugo/releases/). +## Hugo version requirements + +The minimum version of Hugo needed to build the site is `v0.142.0`. + +When linkerd.io is deployed to production, we use Hugo `v0.142.0`. + ### Run Hugo locally From the root `/website` directory, build site and run Hugo in development mode: @@ -32,12 +44,6 @@ hugo server -s linkerd.io You should see the site on localhost:1313, and it should reload automatically upon file write. -## Hugo version requirements - -The minimum version of Hugo needed to build the site is `v0.142.0`. - -When linkerd.io is deployed to production, we use Hugo `v0.142.0`. - ## Website images Please do not put files in the `static` directory that are referenced on diff --git a/linkerd.io/assets/scss/_base.scss b/linkerd.io/assets/scss/_base.scss deleted file mode 100644 index 79e1f0b187..0000000000 --- a/linkerd.io/assets/scss/_base.scss +++ /dev/null @@ -1,272 +0,0 @@ -:root { - font-size: $font-size-base; - - @media (prefers-reduced-motion: no-preference) { - scroll-behavior: smooth; - } -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - text-size-adjust: 100%; -} - -body { - margin: 0; - background-color: $white; - color: $navy; - font-family: $font-family-base; - font-size: $font-size-base; - font-weight: $font-weight-normal; - line-height: $line-height-base; -} - -// Block elements - -h1, h2, h3, h4, h5, h6 { - margin: 0; - margin-bottom: spacer(3); - font-family: $font-family-base; - font-weight: $font-weight-bold; - line-height: $line-height-tight; -} - -h1 { - font-size: $font-size-h1; -} - -h2 { - font-size: $font-size-h2; -} - -h3 { - font-size: $font-size-h3; -} - -h4 { - font-size: $font-size-h4; -} - -h5 { - font-size: $font-size-h5; -} - -h6 { - font-size: $font-size-h6; -} - -p, ul, ol, dl, figure { - margin: 0; - margin-bottom: spacer(3); - font-family: $font-family-base; - font-size: $font-size-base; - font-weight: $font-weight-normal; - line-height: $line-height-base; -} - -dt { - font-weight: $font-weight-bold; -} - -dd { - margin: 0; - padding-left: spacer(4); -} - -ul, ol { - padding-left: spacer(4); -} - -ul ul, -ol ol, -ol ul, -ul ol { - margin-bottom: 0; - padding-top: spacer(2); -} - -li { - margin-bottom: spacer(1); - &:last-child { - margin-bottom: 0; - } -} - -figure img { - display: block; - height: auto; - max-width: 100%; -} - -blockquote { - margin: 0; - margin-bottom: spacer(3); - padding: spacer(4); - border-left: solid 4px $blue; - background-color: $light-blue; - border-radius: $border-radius; - - & > :last-child { - margin-bottom: 0; - } -} - -hr { - overflow: visible; - height: 0; - margin: 0; - margin-bottom: spacer(3); - box-sizing: content-box; - border: none; - border-top: solid 2px $border-color; -} - -pre { - margin: 0; - margin-bottom: spacer(3); - font-size: 90%; - // Prevent pre content from overflowing parent if it's a flex item - overflow-x: auto; - max-width: 0; - min-width: -webkit-fill-available; - min-width: -moz-available; - min-width: stretch; - font-family: $font-family-mono; -} - -// Inline elements - -img { - border-style: none; -} - -a { - color: $link-color; - text-decoration: none; - transition: color .2s ease; - - &:hover, - &:active { - color: $link-color-hover; - } -} - -strong, -b { - font-weight: $font-weight-heavy; -} - -code { - font-family: $font-family-mono; - - // Code elements without a pre parent - &:not(pre code) { - padding: 1px 3px; - background-color: $light-blue; - border-radius: $border-radius; - font-size: 90%; - mix-blend-mode: multiply; - } -} - -figcaption { - padding-top: spacer(2); - color: $gray; - font-size: $font-size-sm; - text-align: center; -} - -// Tables - -table { - width: 100%; - margin: 0; - margin-bottom: spacer(3); - border-collapse: collapse; - border-top: solid 1px $border-color; -} - -th, td { - padding: spacer(2) spacer(3); - border-bottom: solid 1px $border-color; - text-align: left; -} - -th { - font-size: $font-size-sm; - font-weight: $font-weight-bold; -} - -thead tr, -tr:nth-child(even) { - background-color: $light-gray; -} - -// Forms - -select, -input, -textarea, -button { - font-family: $font-family-base; - font-size: $font-size-base; - font-weight: $font-weight-normal; - line-height: $line-height-base; -} - -select { - appearance: none; - padding: spacer(2) spacer(5) spacer(2) spacer(3); - border: solid 1px $border-color; - background-color: $white; - color: $navy; - border-radius: $border-radius; - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; - background-position: right spacer(2) center; - background-size: spacer(4) spacer(4); -} - -input[type=text], -input[type=email], -textarea { - padding: spacer(1) spacer(2); - width: 100%; - border: solid 1px $border-color; - border-radius: $border-radius; - background-color: $white; - color: $navy; - - &:focus { - outline: $blue; - } - &::placeholder { - color: $gray; - } -} - -input[type=submit], -button { - @include make-button; - @include make-button--primary; - border: none; -} - -input[type=text] { - // Remove Chrome's autofill background color - // https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus, - &:-webkit-autofill:active { - -webkit-text-fill-color: $navy; - transition: background-color 5000s ease-in-out 0s; - } -} diff --git a/linkerd.io/assets/scss/_functions.scss b/linkerd.io/assets/scss/_functions.scss deleted file mode 100644 index 6ebb3b00f9..0000000000 --- a/linkerd.io/assets/scss/_functions.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Return deeply nested values from a map -@function map-deep-get($map, $keys...) { - @each $key in $keys { - $map: map-get($map, $key); - } - @return $map; -} - -// Color functions - -// Mix a color with white -@function tint-color($color, $percentage) { - @return mix(white, $color, $percentage); -} - -// Mix a color with black -@function shade-color($color, $percentage) { - @return mix(black, $color, $percentage); -} - -// Return a state color value -@function state-color($state, $name) { - @return map-deep-get($state-colors, $state, $name); -} - -// Sizing functions - -// Return a spacer value -@function spacer($key) { - @return map-get($spacers, $key); -} - -// Return an icon size value -@function icon-size($key) { - @return map-get($icon-sizes, $key); -} - -// Layout functions - -// Return a breakpoint min-width value -@function breakpoint-min-width($breakpoint) { - @return map-get($breakpoint-min-widths, $breakpoint); -} - -// Return a breakpoint max-width value -@function breakpoint-max-width($breakpoint) { - @return map-get($breakpoint-max-widths, $breakpoint); -} - -// Return a container max-width value -@function container-max-width($breakpoint) { - @return map-get($container-max-widths, $breakpoint); -} diff --git a/linkerd.io/assets/scss/_variables.scss b/linkerd.io/assets/scss/abstracts/_abstracts.scss similarity index 68% rename from linkerd.io/assets/scss/_variables.scss rename to linkerd.io/assets/scss/abstracts/_abstracts.scss index 5e0eafd4d9..3ed40f96e3 100644 --- a/linkerd.io/assets/scss/_variables.scss +++ b/linkerd.io/assets/scss/abstracts/_abstracts.scss @@ -1,4 +1,65 @@ -// Type +@use "sass:color"; +@use "sass:map"; + +// Functions + +// Return deeply nested values from a map +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map.get($map, $key); + } + @return $map; +} + +// Color functions + +// Mix a color with white +@function tint-color($color, $percentage) { + @return color.mix(white, $color, $percentage); +} + +// Mix a color with black +@function shade-color($color, $percentage) { + @return color.mix(black, $color, $percentage); +} + +// Return a state color value +@function state-color($state, $name) { + @return map-deep-get($state-colors, $state, $name); +} + +// Sizing functions + +// Return a size value +@function size($key) { + @return map.get($sizes, $key); +} + +// Return an icon size value +@function icon-size($key) { + @return map.get($icon-sizes, $key); +} + +// Layout functions + +// Return a breakpoint min-width value +@function breakpoint-min-width($breakpoint) { + @return map.get($breakpoint-min-widths, $breakpoint); +} + +// Return a breakpoint max-width value +@function breakpoint-max-width($breakpoint) { + @return map.get($breakpoint-max-widths, $breakpoint); +} + +// Return a container max-width value +@function container-max-width($breakpoint) { + @return map.get($container-max-widths, $breakpoint); +} + +// Variables + +// Type variables $font-family-base: "Open Sans", Helvetica, Arial, sans-serif; $font-family-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; @@ -23,7 +84,7 @@ $font-size-h4: 20px; $font-size-h5: 18px; $font-size-h6: 16px; -// Colors +// Color variables $white: rgb(255, 255, 255); $offwhite: rgb(250, 250, 250); @@ -79,9 +140,9 @@ $state-colors: ( ), ); -// Sizing +// Sizing variables -$spacers: ( +$sizes: ( 0: 0, 1: 4px, 2: 8px, @@ -113,12 +174,12 @@ $image-sizes: ( 256: 256px, ); -// Styles +// Style variables $border-radius: 4px; $box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.1); -// Layout +// Layout variables $breakpoint-min-widths: ( xs: 0, @@ -145,7 +206,7 @@ $container-max-widths: ( xxl: 1320px, ); -$container-padding: spacer(4); +$container-padding: size(4); // Component variables diff --git a/linkerd.io/assets/scss/abstracts/_index.scss b/linkerd.io/assets/scss/abstracts/_index.scss new file mode 100644 index 0000000000..7852b59014 --- /dev/null +++ b/linkerd.io/assets/scss/abstracts/_index.scss @@ -0,0 +1,5 @@ +@forward "abstracts"; + +@forward "mixins/button"; +@forward "mixins/card"; +@forward "mixins/stack"; diff --git a/linkerd.io/assets/scss/abstracts/mixins/_button.scss b/linkerd.io/assets/scss/abstracts/mixins/_button.scss new file mode 100644 index 0000000000..09eb860e05 --- /dev/null +++ b/linkerd.io/assets/scss/abstracts/mixins/_button.scss @@ -0,0 +1,102 @@ +@use "sass:color"; +@use "../abstracts"; + +@mixin make-button { + display: inline-block; + padding: 8.5px 16px; + color: abstracts.$blue; + background-color: transparent; + border-radius: abstracts.$border-radius; + outline-width: 0; + white-space: nowrap; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-family: abstracts.$font-family-base; + font-weight: abstracts.$font-weight-bold; + font-size: abstracts.$font-size-base; + line-height: abstracts.$line-height-base; + cursor: pointer; + transition: background-color 0.2s ease; + + &:focus { + outline: 0; + } + &:hover, + &:active { + color: abstracts.shade-color(abstracts.$blue, 20%); + background-color: abstracts.$light-blue; + } +} +@mixin make-button--primary { + color: abstracts.$white; + background-color: abstracts.$blue; + + &:hover, + &:active { + color: abstracts.$white; + background-color: abstracts.shade-color(abstracts.$blue, 20%); + } +} +@mixin make-button--secondary { + color: abstracts.$navy; + background-color: abstracts.$green; + + &:hover, + &:active { + color: abstracts.$navy; + background-color: color.adjust(abstracts.$green, $lightness: -15%); + } +} +@mixin make-button--outline { + background-color: transparent; + outline: solid 1px abstracts.$border-color; + transition: color 0.2s ease, border-color 0.2s ease; + + &.button--primary { + color: abstracts.$blue; + outline-color: abstracts.$blue; + + &:hover, + &:active { + color: abstracts.shade-color(abstracts.$blue, 20%); + outline-color: abstracts.shade-color(abstracts.$blue, 20%); + background-color: transparent; + } + } + &.button--secondary { + color: color.adjust(abstracts.$green, $lightness: -30%); + outline-color: color.adjust(abstracts.$green, $lightness: -30%); + + &:hover, + &:active { + color: color.adjust(abstracts.$green, $lightness: -35%); + outline-color: color.adjust(abstracts.$green, $lightness: -35%); + background-color: transparent; + } + } +} +@mixin make-button--lg { + padding: 13px 24px; + font-size: abstracts.$font-size-lg; +} +@mixin make-button--md { + padding: 8.5px 16px; + font-size: abstracts.$font-size-base; +} +@mixin make-button--sm { + padding: 8px 14px; + font-size: abstracts.$font-size-sm; +} +@mixin make-button--xs { + padding: 2px 8px; + font-size: abstracts.$font-size-xs; +} +@mixin make-button--block { + display: block; + width: 100%; +} +@mixin make-button--disabled { + pointer-events: none; + opacity: 0.25; +} diff --git a/linkerd.io/assets/scss/mixins/_card.scss b/linkerd.io/assets/scss/abstracts/mixins/_card.scss similarity index 67% rename from linkerd.io/assets/scss/mixins/_card.scss rename to linkerd.io/assets/scss/abstracts/mixins/_card.scss index c23d82588d..1647f51db6 100644 --- a/linkerd.io/assets/scss/mixins/_card.scss +++ b/linkerd.io/assets/scss/abstracts/mixins/_card.scss @@ -1,31 +1,34 @@ +@use "../abstracts"; +@use "stack"; + @mixin make-card { --card--center-body: center; display: flex; flex-direction: column; - padding: spacer(2); - background-color: $white; - border-radius: $border-radius; - box-shadow: $box-shadow; + padding: abstracts.size(2); + background-color: abstracts.$white; + border-radius: abstracts.$border-radius; + box-shadow: abstracts.$box-shadow; .card__body { display: flex; flex-direction: column; - gap: spacer(4); + gap: abstracts.size(4); flex-grow: 1; - padding: spacer(3); + padding: abstracts.size(3); } .card__header { - @include make-stack(1); + @include stack.make-stack(1); } .card__content { - @include make-stack(3); + @include stack.make-stack(3); flex-grow: 1; } .card__footer { display: flex; flex-direction: row; - gap: spacer(3); + gap: abstracts.size(3); } } @@ -33,8 +36,8 @@ // Add padding around media to align with content @mixin make-card--inset-media { - gap: spacer(4); - padding: spacer(4); + gap: abstracts.size(4); + padding: abstracts.size(4); .card__body { padding: 0; @@ -70,7 +73,7 @@ @mixin make-card-link { display: block; transition: all 0.3s ease-out; - color: $navy; + color: abstracts.$navy; .card { height: 100%; @@ -79,7 +82,7 @@ transform: scale(1.05); .card { - background-image: linear-gradient(160deg, tint-color($light-blue, 50%), $white); + background-image: linear-gradient(160deg, abstracts.tint-color(abstracts.$light-blue, 50%), abstracts.$white); } } } diff --git a/linkerd.io/assets/scss/abstracts/mixins/_stack.scss b/linkerd.io/assets/scss/abstracts/mixins/_stack.scss new file mode 100644 index 0000000000..4a2f745005 --- /dev/null +++ b/linkerd.io/assets/scss/abstracts/mixins/_stack.scss @@ -0,0 +1,18 @@ +@use "../abstracts"; + +@mixin make-stack($size) { + & > * { + margin-bottom: 0; + } + & > * + * { + margin-top: abstracts.size($size); + } +} +@mixin make-stack-recursive($size) { + & * { + margin-bottom: 0; + } + & * + * { + margin-top: abstracts.size($size); + } +} diff --git a/linkerd.io/assets/scss/app/_ambassadors-apply.scss b/linkerd.io/assets/scss/app/_ambassadors-apply.scss deleted file mode 100644 index d063348b17..0000000000 --- a/linkerd.io/assets/scss/app/_ambassadors-apply.scss +++ /dev/null @@ -1,24 +0,0 @@ -/* -@markup See: layouts/community/ambassadors-apply.html -*/ - -.ambassadors-apply { - // Override all h2s on the page - h2 { - font-size: $font-size-h1; - } - .page__container { - @include make-stack(7); - } - @media (min-width: breakpoint-min-width("lg")) { - section { - padding-left: spacer(6); - padding-right: spacer(6); - } - .card { - @include make-card--horz; - @include make-card--reverse; - padding: spacer(6); - } - } -} diff --git a/linkerd.io/assets/scss/app/_enterprise.scss b/linkerd.io/assets/scss/app/_enterprise.scss deleted file mode 100644 index 1f559e40d3..0000000000 --- a/linkerd.io/assets/scss/app/_enterprise.scss +++ /dev/null @@ -1,24 +0,0 @@ -/* -@markup See: layouts/enterprise/list.html -*/ - -.enterprise { - // Override all h2s on the page - h2 { - font-size: $font-size-h1; - } - .page__container { - @include make-stack(7); - } - .enterprise__section { - @include make-stack(5); - } - @media (min-width: breakpoint-min-width("lg")) { - .card { - @include make-card--horz; - @include make-card--reverse; - gap: spacer(6); - padding: spacer(6); - } - } -} diff --git a/linkerd.io/assets/scss/app/_main-announcement.scss b/linkerd.io/assets/scss/app/_main-announcement.scss deleted file mode 100644 index 21910c3296..0000000000 --- a/linkerd.io/assets/scss/app/_main-announcement.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* -@markup See: layouts/partials/main-announcement.html -*/ - -.main-announcement { - padding: spacer(2); - background-color: $navy; - color: $white; - font-size: $font-size-sm; - text-align: center; - - a { - color: $white; - font-weight: $font-weight-bold; - text-decoration: underline; - text-decoration-thickness: 2px; - text-decoration-color: rgba($white, 0.4); - } - .main-announcement__link { - display: inline-block; - padding-left: spacer(2); - } -} diff --git a/linkerd.io/assets/scss/app/_search.scss b/linkerd.io/assets/scss/app/_search.scss deleted file mode 100644 index 9addfa6f82..0000000000 --- a/linkerd.io/assets/scss/app/_search.scss +++ /dev/null @@ -1,42 +0,0 @@ -/* -@markup See: layouts/search/list.html -*/ - -.search { - padding: spacer(6) 0; - - @media (min-width: breakpoint-min-width("md")) { - padding: spacer(7) 0; - } -} - -// .search-results - -.search-results { - @include make-stack(4); - - // Add extra space between header and entries - & > :nth-child(2) { - margin-top: spacer(6); // Override stack - } -} - -// .search-results-entry - -.search-results-entry { - @include make-stack(3); - padding-bottom: spacer(4); - border-bottom: solid 1px $border-color; - - &:last-of-type { - padding-bottom: 0; - border-bottom: none; - } - .search-results-entry__section { - color: $gray; - font-size: $font-size-sm; - } - .search-results-entry__title { - margin-top: spacer(1); // Override stack - } -} diff --git a/linkerd.io/assets/scss/base/_base.scss b/linkerd.io/assets/scss/base/_base.scss new file mode 100644 index 0000000000..f3f529673a --- /dev/null +++ b/linkerd.io/assets/scss/base/_base.scss @@ -0,0 +1,274 @@ +@use "../abstracts"; + +:root { + font-size: abstracts.$font-size-base; + + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; + } +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + text-size-adjust: 100%; +} + +body { + margin: 0; + background-color: abstracts.$white; + color: abstracts.$navy; + font-family: abstracts.$font-family-base; + font-size: abstracts.$font-size-base; + font-weight: abstracts.$font-weight-normal; + line-height: abstracts.$line-height-base; +} + +// Block elements + +h1, h2, h3, h4, h5, h6 { + margin: 0; + margin-bottom: abstracts.size(3); + font-family: abstracts.$font-family-base; + font-weight: abstracts.$font-weight-bold; + line-height: abstracts.$line-height-tight; +} + +h1 { + font-size: abstracts.$font-size-h1; +} + +h2 { + font-size: abstracts.$font-size-h2; +} + +h3 { + font-size: abstracts.$font-size-h3; +} + +h4 { + font-size: abstracts.$font-size-h4; +} + +h5 { + font-size: abstracts.$font-size-h5; +} + +h6 { + font-size: abstracts.$font-size-h6; +} + +p, ul, ol, dl, figure { + margin: 0; + margin-bottom: abstracts.size(3); + font-family: abstracts.$font-family-base; + font-size: abstracts.$font-size-base; + font-weight: abstracts.$font-weight-normal; + line-height: abstracts.$line-height-base; +} + +dt { + font-weight: abstracts.$font-weight-bold; +} + +dd { + margin: 0; + padding-left: abstracts.size(4); +} + +ul, ol { + padding-left: abstracts.size(4); +} + +ul ul, +ol ol, +ol ul, +ul ol { + margin-bottom: 0; + padding-top: abstracts.size(2); +} + +li { + margin-bottom: abstracts.size(1); + &:last-child { + margin-bottom: 0; + } +} + +figure img { + display: block; + height: auto; + max-width: 100%; +} + +blockquote { + margin: 0; + margin-bottom: abstracts.size(3); + padding: abstracts.size(4); + border-left: solid 4px abstracts.$blue; + background-color: abstracts.$light-blue; + border-radius: abstracts.$border-radius; + + & > :last-child { + margin-bottom: 0; + } +} + +hr { + overflow: visible; + height: 0; + margin: 0; + margin-bottom: abstracts.size(3); + box-sizing: content-box; + border: none; + border-top: solid 2px abstracts.$border-color; +} + +pre { + margin: 0; + margin-bottom: abstracts.size(3); + font-size: 90%; + // Prevent pre content from overflowing parent if it's a flex item + overflow-x: auto; + max-width: 0; + min-width: -webkit-fill-available; + min-width: -moz-available; + min-width: stretch; + font-family: abstracts.$font-family-mono; +} + +// Inline elements + +img { + border-style: none; +} + +a { + color: abstracts.$link-color; + text-decoration: none; + transition: color .2s ease; + + &:hover, + &:active { + color: abstracts.$link-color-hover; + } +} + +strong, +b { + font-weight: abstracts.$font-weight-heavy; +} + +code { + font-family: abstracts.$font-family-mono; + + // Code elements without a pre parent + &:not(pre code) { + padding: 1px 3px; + background-color: abstracts.$light-blue; + border-radius: abstracts.$border-radius; + font-size: 90%; + mix-blend-mode: multiply; + } +} + +figcaption { + padding-top: abstracts.size(2); + color: abstracts.$gray; + font-size: abstracts.$font-size-sm; + text-align: center; +} + +// Tables + +table { + width: 100%; + margin: 0; + margin-bottom: abstracts.size(3); + border-collapse: collapse; + border-top: solid 1px abstracts.$border-color; +} + +th, td { + padding: abstracts.size(2) abstracts.size(3); + border-bottom: solid 1px abstracts.$border-color; + text-align: left; +} + +th { + font-size: abstracts.$font-size-sm; + font-weight: abstracts.$font-weight-bold; +} + +thead tr, +tr:nth-child(even) { + background-color: abstracts.$light-gray; +} + +// Forms + +select, +input, +textarea, +button { + font-family: abstracts.$font-family-base; + font-size: abstracts.$font-size-base; + font-weight: abstracts.$font-weight-normal; + line-height: abstracts.$line-height-base; +} + +select { + appearance: none; + padding: abstracts.size(2) abstracts.size(5) abstracts.size(2) abstracts.size(3); + border: solid 1px abstracts.$border-color; + background-color: abstracts.$white; + color: abstracts.$navy; + border-radius: abstracts.$border-radius; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right abstracts.size(2) center; + background-size: abstracts.size(4) abstracts.size(4); +} + +input[type=text], +input[type=email], +textarea { + padding: abstracts.size(1) abstracts.size(2); + width: 100%; + border: solid 1px abstracts.$border-color; + border-radius: abstracts.$border-radius; + background-color: abstracts.$white; + color: abstracts.$navy; + + &:focus { + outline: abstracts.$blue; + } + &::placeholder { + color: abstracts.$gray; + } +} + +input[type=submit], +button { + @include abstracts.make-button; + @include abstracts.make-button--primary; + border: none; +} + +input[type=text] { + // Remove Chrome's autofill background color + // https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-text-fill-color: abstracts.$navy; + transition: background-color 5000s ease-in-out 0s; + } +} diff --git a/linkerd.io/assets/scss/_fonts.scss b/linkerd.io/assets/scss/base/_fonts.scss similarity index 100% rename from linkerd.io/assets/scss/_fonts.scss rename to linkerd.io/assets/scss/base/_fonts.scss diff --git a/linkerd.io/assets/scss/components/_accordion.scss b/linkerd.io/assets/scss/components/_accordion.scss index 13425138e8..b826ee7001 100644 --- a/linkerd.io/assets/scss/components/_accordion.scss +++ b/linkerd.io/assets/scss/components/_accordion.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
@@ -10,32 +12,32 @@ */ .accordion { - border-top: solid 1px $border-color; + border-top: solid 1px abstracts.$border-color; details { - padding-top: spacer(3); - padding-bottom: spacer(3); - border-bottom: solid 1px $border-color; + padding-top: abstracts.size(3); + padding-bottom: abstracts.size(3); + border-bottom: solid 1px abstracts.$border-color; summary { - padding-right: spacer(5); + padding-right: abstracts.size(5); list-style-type: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right center; - background-size: spacer(4) spacer(4); + background-size: abstracts.size(4) abstracts.size(4); cursor: pointer; transition: color .2s ease; &:hover { - color: $link-color; + color: abstracts.$link-color; } > * { margin-bottom: 0; } } &[open] summary { - margin-bottom: spacer(4); + margin-bottom: abstracts.size(4); background-image: url('data:image/svg+xml;utf8,'); } } diff --git a/linkerd.io/assets/scss/components/_alert.scss b/linkerd.io/assets/scss/components/_alert.scss index 449254731b..bb3d0f860c 100644 --- a/linkerd.io/assets/scss/components/_alert.scss +++ b/linkerd.io/assets/scss/components/_alert.scss @@ -1,3 +1,6 @@ +@use "sass:map"; +@use "../abstracts"; + /* @markup
@@ -12,15 +15,15 @@ */ .alert { - @include make-stack(3); - background-color: $light-gray; - border: solid 1px $border-color; - border-radius: $border-radius; - padding: spacer(3) spacer(4); + @include abstracts.make-stack(3); + background-color: abstracts.$light-gray; + border: solid 1px abstracts.$border-color; + border-radius: abstracts.$border-radius; + padding: abstracts.size(3) abstracts.size(4); .alert__title { display: flex; - gap: spacer(2); + gap: abstracts.size(2); align-items: center; & > * { @@ -28,7 +31,7 @@ } } .alert__content { - @include make-stack(3); + @include abstracts.make-stack(3); } // @options @@ -40,7 +43,7 @@ border-bottom: none; } &.alert--condensed { - padding: spacer(2) spacer(3); + padding: abstracts.size(2) abstracts.size(3); } &.alert--center { .alert__title { @@ -50,11 +53,11 @@ text-align: center; } } - @each $state, $colors in $state-colors { + @each $state, $colors in abstracts.$state-colors { &.alert--#{$state} { - color: map-get($colors, "text"); - background-color: map-get($colors, "background"); - border-color: map-get($colors, "border"); + color: map.get($colors, "text"); + background-color: map.get($colors, "background"); + border-color: map.get($colors, "border"); } } } diff --git a/linkerd.io/assets/scss/components/_anchor.scss b/linkerd.io/assets/scss/components/_anchor.scss index 010993c125..fb3844c8e8 100644 --- a/linkerd.io/assets/scss/components/_anchor.scss +++ b/linkerd.io/assets/scss/components/_anchor.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup See: See: /layouts/docs/_markup/render-heading.html

@@ -9,7 +11,7 @@ */ .anchor { - scroll-margin-top: $header-min-height; + scroll-margin-top: abstracts.$header-min-height; .anchor__link { opacity: 0; diff --git a/linkerd.io/assets/scss/components/_avatar.scss b/linkerd.io/assets/scss/components/_avatar.scss index ff58c8737e..eaa05a47e0 100644 --- a/linkerd.io/assets/scss/components/_avatar.scss +++ b/linkerd.io/assets/scss/components/_avatar.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
@@ -12,15 +14,15 @@ .avatar { display: flex; - gap: spacer(3); + gap: abstracts.size(3); align-items: center; & > * { margin-bottom: 0; } .avatar__title { - color: $gray; - font-weight: $font-weight-normal; + color: abstracts.$gray; + font-weight: abstracts.$font-weight-normal; } } @@ -38,12 +40,12 @@ Make the whole avatar clickable. .avatar-link { display: block; - color: $navy; + color: abstracts.$navy; &:hover, &:active { .avatar__title { - color: $link-color-hover; + color: abstracts.$link-color-hover; } } } diff --git a/linkerd.io/assets/scss/components/_badge.scss b/linkerd.io/assets/scss/components/_badge.scss index d8a46df3a6..ab4ce91e77 100644 --- a/linkerd.io/assets/scss/components/_badge.scss +++ b/linkerd.io/assets/scss/components/_badge.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup Text @@ -5,8 +7,8 @@ .badge { display: inline-block; - padding: spacer(1) spacer(3); - background-color: $green; + padding: abstracts.size(1) abstracts.size(3); + background-color: abstracts.$green; border-radius: 999px; - font-size: $font-size-sm; + font-size: abstracts.$font-size-sm; } diff --git a/linkerd.io/assets/scss/components/_button.scss b/linkerd.io/assets/scss/components/_button.scss index 7f8942450a..cd09b7a7a5 100644 --- a/linkerd.io/assets/scss/components/_button.scss +++ b/linkerd.io/assets/scss/components/_button.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup Text @@ -5,35 +7,35 @@ .button, button { - @include make-button; + @include abstracts.make-button; // @options &.button--primary { - @include make-button--primary; + @include abstracts.make-button--primary; } &.button--secondary { - @include make-button--secondary; + @include abstracts.make-button--secondary; } &.button--outline { - @include make-button--outline; + @include abstracts.make-button--outline; } &.button--lg { - @include make-button--lg; + @include abstracts.make-button--lg; } &.button--md { - @include make-button--md; + @include abstracts.make-button--md; } &.button--sm { - @include make-button--sm; + @include abstracts.make-button--sm; } &.button--xs { - @include make-button--xs; + @include abstracts.make-button--xs; } &.button--block { - @include make-button--block; + @include abstracts.make-button--block; } &.button--disabled { - @include make-button--disabled; + @include abstracts.make-button--disabled; } } diff --git a/linkerd.io/assets/scss/components/_card.scss b/linkerd.io/assets/scss/components/_card.scss index bf85f29397..2fc0f48bbe 100644 --- a/linkerd.io/assets/scss/components/_card.scss +++ b/linkerd.io/assets/scss/components/_card.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
@@ -19,21 +21,21 @@ */ .card { - @include make-card; + @include abstracts.make-card; // @options &.card--inset-media { - @include make-card--inset-media; + @include abstracts.make-card--inset-media; } &.card--horz { - @include make-card--horz; + @include abstracts.make-card--horz; } &.card--reverse { - @include make-card--reverse; + @include abstracts.make-card--reverse; } &.card--center { - @include make-card--center; + @include abstracts.make-card--center; } } @@ -49,5 +51,5 @@ */ .card-link { - @include make-card-link; + @include abstracts.make-card-link; } diff --git a/linkerd.io/assets/scss/components/_form-control.scss b/linkerd.io/assets/scss/components/_form-control.scss index 22a10bb59e..64e389ca2d 100644 --- a/linkerd.io/assets/scss/components/_form-control.scss +++ b/linkerd.io/assets/scss/components/_form-control.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
@@ -7,9 +9,9 @@ */ .form-control { - @include make-stack(2); + @include abstracts.make-stack(2); label { - font-weight: $font-weight-bold; + font-weight: abstracts.$font-weight-bold; } } diff --git a/linkerd.io/assets/scss/components/_hero.scss b/linkerd.io/assets/scss/components/_hero.scss index 1fae18c57e..7e046dec49 100644 --- a/linkerd.io/assets/scss/components/_hero.scss +++ b/linkerd.io/assets/scss/components/_hero.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* If the `hero--has-background-image` class is applied, the `background-image` rule needs to @@ -44,39 +46,39 @@ Using a parent component: */ .hero { - background-color: $white; + background-color: abstracts.$white; .hero__container { - padding-top: spacer(6); - padding-bottom: spacer(6); + padding-top: abstracts.size(6); + padding-bottom: abstracts.size(6); } .hero__body { - @include make-stack(4); + @include abstracts.make-stack(4); } .hero__header { h1 { margin-bottom: 0; - background-image: -webkit-linear-gradient(0deg, $navy, $blue); + background-image: -webkit-linear-gradient(0deg, abstracts.$navy, abstracts.$blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - font-weight: $font-weight-heavy; + font-weight: abstracts.$font-weight-heavy; letter-spacing: -1.4px; } } .hero__content { - @include make-stack(3); + @include abstracts.make-stack(3); max-width: 980px; } .hero__footer { display: flex; flex-direction: column; - gap: spacer(3); + gap: abstracts.size(3); } - @media (min-width: breakpoint-min-width("md")) { + @media (min-width: abstracts.breakpoint-min-width("md")) { .hero__container { - padding-top: spacer(7); - padding-bottom: spacer(7); + padding-top: abstracts.size(7); + padding-bottom: abstracts.size(7); } .hero__header { h1 { @@ -87,7 +89,7 @@ Using a parent component: flex-direction: row; } } - @media (min-width: breakpoint-min-width("lg")) { + @media (min-width: abstracts.breakpoint-min-width("lg")) { .hero__header { h1 { font-size: 60px; @@ -101,7 +103,7 @@ Using a parent component: .hero__container { background-size: 0 0;// Hide background image } - @media (min-width: breakpoint-min-width("lg")) { + @media (min-width: abstracts.breakpoint-min-width("lg")) { .hero__container { background-repeat: no-repeat; background-size: auto 300px; @@ -111,12 +113,12 @@ Using a parent component: max-width: 700px; } } - @media (min-width: breakpoint-min-width("xl")) { + @media (min-width: abstracts.breakpoint-min-width("xl")) { .hero__container { background-size: auto 400px; } } - @media (min-width: breakpoint-min-width("xxl")) { + @media (min-width: abstracts.breakpoint-min-width("xxl")) { .hero__container { background-size: auto 500px; } diff --git a/linkerd.io/assets/scss/components/_highlight.scss b/linkerd.io/assets/scss/components/_highlight.scss index 00c7e56c69..09749c7731 100644 --- a/linkerd.io/assets/scss/components/_highlight.scss +++ b/linkerd.io/assets/scss/components/_highlight.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* .highlight class added by Hugo's syntax highlighter .highlight__copy class added by: /assets/js/highlight-copy.js @@ -15,17 +17,17 @@ .highlight { position: relative; // Needed to position copy button overflow: hidden; - margin-bottom: spacer(3); + margin-bottom: abstracts.size(3); pre { margin-bottom: 0; - padding: spacer(3); - border-radius: $border-radius; + padding: abstracts.size(3); + border-radius: abstracts.$border-radius; } .highlight__copy { position: absolute; - right: spacer(1); - top: spacer(1); + right: abstracts.size(1); + top: abstracts.size(1); opacity: 0; transition: opacity .2s ease; } diff --git a/linkerd.io/assets/scss/components/_icon-button.scss b/linkerd.io/assets/scss/components/_icon-button.scss index 90b0ec9c9b..7b8ff3ea87 100644 --- a/linkerd.io/assets/scss/components/_icon-button.scss +++ b/linkerd.io/assets/scss/components/_icon-button.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../abstracts"; + /* @markup @@ -9,14 +12,14 @@ .icon-button { display: inline-block; - padding: spacer(2); - border-radius: $border-radius; + padding: abstracts.size(2); + border-radius: abstracts.$border-radius; cursor: pointer; transition: background-color 0.2s ease; &:hover, &:active { - background-color: $light-blue; + background-color: abstracts.$light-blue; } .icon { display: block; @@ -25,26 +28,26 @@ // @options &.icon-button--primary { - background-color: $blue; + background-color: abstracts.$blue; &:hover, &:active { - background-color: shade-color($blue, 20%); + background-color: abstracts.shade-color(abstracts.$blue, 20%); } } &.icon-button--secondary { - background-color: $green; + background-color: abstracts.$green; &:hover, &:active { - background-color: darken($green, 15%); + background-color: color.adjust(abstracts.$green, $lightness: -15%); } } &.icon-button--primary, &.icon-button--secondary { .icon { path { - fill: $white; + fill: abstracts.$white; } } } diff --git a/linkerd.io/assets/scss/components/_icon.scss b/linkerd.io/assets/scss/components/_icon.scss index 6b77c20636..6615a94121 100644 --- a/linkerd.io/assets/scss/components/_icon.scss +++ b/linkerd.io/assets/scss/components/_icon.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup @@ -8,8 +10,8 @@ .icon { display: inline-block; vertical-align: middle; - width: icon-size("md"); - height: icon-size("md"); + width: abstracts.icon-size("md"); + height: abstracts.icon-size("md"); path { fill: currentColor; @@ -19,32 +21,32 @@ &.icon--primary { path { - fill: $primary-color; + fill: abstracts.$primary-color; } } &.icon--secondary { path { - fill: $secondary-color; + fill: abstracts.$secondary-color; } } &.icon--info { path { - fill: $info-color; + fill: abstracts.$info-color; } } &.icon--success { path { - fill: $success-color; + fill: abstracts.$success-color; } } &.icon--warning { path { - fill: $warning-color; + fill: abstracts.$warning-color; } } &.icon--danger { path { - fill: $danger-color; + fill: abstracts.$danger-color; } } &.icon--current { @@ -53,23 +55,23 @@ } } &.icon--xs { - width: icon-size("xs"); - height: icon-size("xs"); + width: abstracts.icon-size("xs"); + height: abstracts.icon-size("xs"); } &.icon--sm { - width: icon-size("sm"); - height: icon-size("sm"); + width: abstracts.icon-size("sm"); + height: abstracts.icon-size("sm"); } &.icon--md { - width: icon-size("md"); - height: icon-size("md"); + width: abstracts.icon-size("md"); + height: abstracts.icon-size("md"); } &.icon--lg { - width: icon-size("lg"); - height: icon-size("lg"); + width: abstracts.icon-size("lg"); + height: abstracts.icon-size("lg"); } &.icon--xl { - width: icon-size("xl"); - height: icon-size("xl"); + width: abstracts.icon-size("xl"); + height: abstracts.icon-size("xl"); } } diff --git a/linkerd.io/assets/scss/components/_img.scss b/linkerd.io/assets/scss/components/_img.scss index 27666b95b3..0802e8e534 100644 --- a/linkerd.io/assets/scss/components/_img.scss +++ b/linkerd.io/assets/scss/components/_img.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup @@ -16,7 +18,7 @@ border-radius: 999px; } &.img--rounded { - border-radius: $border-radius; + border-radius: abstracts.$border-radius; } &.img--center { margin: 0 auto; @@ -54,7 +56,7 @@ // Sizing - @each $name, $size in $image-sizes { + @each $name, $size in abstracts.$image-sizes { // Set to square &.img--#{$name} { width: #{$size}; diff --git a/linkerd.io/assets/scss/components/_keyval.scss b/linkerd.io/assets/scss/components/_keyval.scss index 3aed8e5570..90351ba72f 100644 --- a/linkerd.io/assets/scss/components/_keyval.scss +++ b/linkerd.io/assets/scss/components/_keyval.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup @@ -8,12 +10,12 @@ .keyval { // Override base styles tr { - background-color: $light-gray; + background-color: abstracts.$light-gray; } th:nth-child(1), td:nth-child(1) { - background-color: $light-blue; - border-right: solid 1px $border-color; + background-color: abstracts.$light-blue; + border-right: solid 1px abstracts.$border-color; code:not([class^=lang]) { // Override base styles @@ -21,7 +23,7 @@ background-color: transparent; mix-blend-mode: normal; - @media (min-width: breakpoint-min-width("lg")) { + @media (min-width: abstracts.breakpoint-min-width("lg")) { white-space: nowrap; } } diff --git a/linkerd.io/assets/scss/components/_loader.scss b/linkerd.io/assets/scss/components/_loader.scss index b1f2e250ac..b9b32e02ea 100644 --- a/linkerd.io/assets/scss/components/_loader.scss +++ b/linkerd.io/assets/scss/components/_loader.scss @@ -1,14 +1,16 @@ +@use "../abstracts"; + /* @markup
*/ .loader { - width: spacer(6); - height: spacer(6); + width: abstracts.size(6); + height: abstracts.size(6); display: inline-block; box-sizing: border-box; - border: 4px solid $blue; + border: 4px solid abstracts.$blue; border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite; diff --git a/linkerd.io/assets/scss/components/_page.scss b/linkerd.io/assets/scss/components/_page.scss index 7424bc7f77..2b22cb42a0 100644 --- a/linkerd.io/assets/scss/components/_page.scss +++ b/linkerd.io/assets/scss/components/_page.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
@@ -8,9 +10,9 @@ */ .page { - padding: spacer(7) 0; - background-color: $offwhite; - background-image: linear-gradient($light-blue, $offwhite); + padding: abstracts.size(7) 0; + background-color: abstracts.$offwhite; + background-image: linear-gradient(abstracts.$light-blue, abstracts.$offwhite); background-size: 100% 200px; background-repeat: no-repeat; } diff --git a/linkerd.io/assets/scss/components/_paginator.scss b/linkerd.io/assets/scss/components/_paginator.scss index 00f0c8021c..e47744ae04 100644 --- a/linkerd.io/assets/scss/components/_paginator.scss +++ b/linkerd.io/assets/scss/components/_paginator.scss @@ -1,3 +1,5 @@ +@use "../abstracts"; + /* @markup
diff --git a/linkerd.io/layouts/shortcodes/docs/cli-subcommands.html b/linkerd.io/layouts/shortcodes/docs/cli-subcommands.html new file mode 100644 index 0000000000..e6777a9fd0 --- /dev/null +++ b/linkerd.io/layouts/shortcodes/docs/cli-subcommands.html @@ -0,0 +1,37 @@ +{{- /* Get the CLI data file for the current linkerd version */}} +{{- $file := replace .Page.Section "." "-" }} +{{- $data := index site.Data.cli $file }} +{{- $cmd := .Get 0 }} +{{- /* Output data */}} +{{ if $cmd }} +
+ + + + + + + + {{ range $data.CLIReference }} + {{ if hasPrefix .Name (printf "%s " $cmd) }} + {{ $subcmd := index (split .Name " ") 1 }} + {{ $href := printf "#%s" $subcmd }} + + + + + {{ end }} + {{ end }} + +
+ Subcommand + + Description +
+ + {{ $subcmd }} + + + {{ .Synopsis | markdownify }} +
+{{ end }}