steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-09-13 05:13:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into add-chromatic

Browse Source
This commit is contained in:
Matthew Wang
2023-08-30 10:28:05 -07:00
parent 3c816ce3de 4556629454
commit 8ebca95cdd
56 changed files with 10145 additions and 8866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_sass/base.scss
View File

@@ -1,6 +1,10 @@
// Base element style overrides
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
:root {
color-scheme: $color-scheme;
}
* {
box-sizing: border-box;
}
@@ -104,6 +108,6 @@ blockquote {
// resets user-agent stylesheets for blockquotes
margin-block-start: 0;
margin-inline-start: 0;
padding-left: 15px;
padding-left: 1rem;
border-left: 3px solid $border-color;
}

18
_sass/buttons.scss
View File

@@ -17,7 +17,9 @@
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
&:focus {
@@ -87,7 +89,9 @@
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
box-shadow:
inset 0 0 0 2px $grey-dk-100,
0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
@@ -111,3 +115,13 @@
.btn-green {
@include btn-color($white, $green-100);
}
.btn-reset {
background: none;
border: none;
margin: 0;
text-align: inherit;
font: inherit;
border-radius: 0;
appearance: none;
}

1
_sass/color_schemes/dark.scss
View File

@@ -1,3 +1,4 @@
$color-scheme: dark;
$body-background-color: $grey-dk-300;
$body-heading-color: $grey-lt-000;
$body-text-color: $grey-lt-300;

1
_sass/color_schemes/light.scss
View File

@@ -1,3 +1,4 @@
$color-scheme: light !default;
$body-background-color: $white !default;
$body-heading-color: $grey-dk-300 !default;
$body-text-color: $grey-dk-100 !default;

16
_sass/labels.scss
View File

@@ -1,7 +1,11 @@
// Labels (not the form kind)
.label,
.label-blue {
// this :not() prevents a style clash with Mermaid.js's
// diagram labels, which also use .label
// for more, see https://github.com/just-the-docs/just-the-docs/issues/1272
// and the accompanying PR
.label:not(g),
.label-blue:not(g) {
display: inline-block;
padding: 0.16em 0.56em;
margin-right: $sp-2;
@@ -15,19 +19,19 @@
border-radius: 12px;
}
.label-green {
.label-green:not(g) {
background-color: $green-200;
}
.label-purple {
.label-purple:not(g) {
background-color: $purple-100;
}
.label-red {
.label-red:not(g) {
background-color: $red-200;
}
.label-yellow {
.label-yellow:not(g) {
color: $grey-dk-200;
background-color: $yellow-200;
}

2
_sass/print.scss
View File

@@ -21,7 +21,7 @@
}
.site-title {
font-size: $root-font-size !important;
font-size: 1rem !important;
font-weight: 700 !important;
}

29
_sass/search.scss
View File

@@ -23,7 +23,9 @@
height: $sp-8;
overflow: hidden;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
transition: height linear #{$transition-duration * 0.5};
@include mq(md) {
@@ -42,7 +44,7 @@
width: 100%;
height: 100%;
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
font-size: 16px;
font-size: 1rem;
color: $body-text-color;
background-color: $search-background-color;
border-top: 0;
@@ -53,7 +55,7 @@
@include mq(md) {
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
font-size: 14px;
font-size: 0.875rem;
background-color: $body-background-color;
transition: padding-left linear #{$transition-duration * 0.5};
}
@@ -96,7 +98,9 @@
background-color: $search-background-color;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
@include mq(md) {
top: 100%;
@@ -230,7 +234,9 @@
background-color: $search-background-color;
border: 1px solid rgba($link-color, 0.3);
border-radius: #{$sp-9 * 0.5};
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
align-items: center;
justify-content: center;
}
@@ -244,7 +250,9 @@
height: 0;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity ease $transition-duration, width 0s $transition-duration,
transition:
opacity ease $transition-duration,
width 0s $transition-duration,
height 0s $transition-duration;
}
@@ -264,7 +272,9 @@
@include mq(md) {
width: $search-results-width;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
}
}
@@ -290,7 +300,10 @@
width: 100%;
height: 100%;
opacity: 1;
transition: opacity ease $transition-duration, width 0s, height 0s;
transition:
opacity ease $transition-duration,
width 0s,
height 0s;
}
@include mq(md) {

9
_sass/support/_functions.scss
View File

@@ -1,9 +0,0 @@
@function rem($size, $unit: "") {
$rem-size: $size / $root-font-size;
@if $unit == false {
@return #{$rem-size};
} @else {
@return #{$rem-size}rem;
}
}

43
_sass/support/_variables.scss
View File

@@ -1,9 +1,10 @@
// Typography
// prettier-ignore
$body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
roboto, "Helvetica Neue", arial, sans-serif !default;
roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
$mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
$body-line-height: 1.4 !default;
$content-line-height: 1.6 !default;
$body-heading-line-height: 1.25 !default;
@@ -11,18 +12,18 @@ $body-heading-line-height: 1.25 !default;
// Font size
// `-sm` suffix is the size at the small (and above) media query
$font-size-1: 9px !default;
$font-size-1-sm: 10px !default;
$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 12px !default; // h5
$font-size-4: 14px !default;
$font-size-5: 16px !default; // h3
$font-size-6: 18px !default; // h2
$font-size-7: 24px !default;
$font-size-8: 32px !default; // h1
$font-size-9: 36px !default;
$font-size-10: 42px !default;
$font-size-10-sm: 48px !default;
$font-size-1: 0.5625rem !default;
$font-size-1-sm: 0.625rem !default;
$font-size-2: 0.6875rem !default; // h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 0.75rem !default; // h5
$font-size-4: 0.875rem !default;
$font-size-5: 1rem !default; // h3
$font-size-6: 1.125rem !default; // h2
$font-size-7: 1.5rem !default;
$font-size-8: 2rem !default; // h1
$font-size-9: 2.25rem !default;
$font-size-10: 2.625rem !default;
$font-size-10-sm: 3rem !default;
// Colors
@@ -95,22 +96,22 @@ $border-color: $grey-lt-100 !default;
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
$nav-width: 16.5rem !default;
$nav-width-md: 15.5rem !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$content-width: 50rem !default;
$header-height: 3.75rem !default;
$search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
// Media queries in pixels
$media-queries: (
xs: 320px,
sm: 500px,
xs: 20rem,
sm: 31.25rem,
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px,
xl: 87.5rem,
) !default;

4
_sass/support/mixins/_buttons.scss
View File

@@ -4,7 +4,9 @@
color: $fg;
background-color: darken($bg, 2%);
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.25),
0 4px 10px rgba(0, 0, 0, 0.12);
&:hover,
&.zeroclipboard-is-hover {

2
_sass/support/mixins/_layout.scss
View File

@@ -12,7 +12,7 @@
// If the key exists in the map
@if $value {
// Prints a media query based on the value
@media (width >= rem($value)) {
@media (min-width: $value) {
@content;
}
} @else {

1
_sass/support/support.scss
View File

@@ -1,3 +1,2 @@
@import "./variables";
@import "./functions";
@import "./mixins/mixins";

6
_sass/tables.scss
View File

@@ -8,7 +8,9 @@
margin-bottom: $sp-5;
overflow-x: auto;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 3px 10px rgba(0, 0, 0, 0.08);
}
table {
@@ -21,7 +23,7 @@ th,
td {
@include fs-3;
min-width: 120px;
min-width: 7.5rem;
padding: $sp-2 $sp-3;
background-color: $table-background-color;
border-bottom: $border rgba($border-color, 0.5);