mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
Merge remote-tracking branch 'upstream/master'
This commit is contained in:
Henrique Vianna
@@ -14,6 +14,7 @@
|
||||
|
||||
html {
|
||||
@include fs-4;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -24,25 +25,18 @@ body {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
table,
|
||||
div,
|
||||
fieldset,
|
||||
form,
|
||||
hr,
|
||||
noscript,
|
||||
table {
|
||||
form,
|
||||
fieldset,
|
||||
noscript .table-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -52,14 +46,15 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 0.8em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 500;
|
||||
line-height: $body-heading-line-height;
|
||||
color: $body-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@@ -86,7 +81,7 @@ a:not([class]) {
|
||||
|
||||
code {
|
||||
font-family: $mono-font-family;
|
||||
font-size: 12px;
|
||||
font-size: 0.75em;
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,9 +14,11 @@ code {
|
||||
pre.highlight,
|
||||
figure.highlight {
|
||||
padding: $sp-3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: $code-background-color;
|
||||
border-radius: $border-radius;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
@@ -26,8 +28,6 @@ figure.highlight {
|
||||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight .c {
|
||||
|
||||
@@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
|
||||
$code-background-color: $grey-dk-250;
|
||||
$search-background-color: $grey-dk-250;
|
||||
$table-background-color: $grey-dk-250;
|
||||
$feedback-color: darken($sidebar-color, 3%);
|
||||
|
||||
0
_sass/color_schemes/light.scss
Normal file
0
_sass/color_schemes/light.scss
Normal file
@@ -5,9 +5,19 @@
|
||||
//
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||
|
||||
.page-content {
|
||||
.main-content {
|
||||
line-height: $content-line-height;
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
.table-wrapper {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -19,6 +29,12 @@
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
@@ -132,7 +148,7 @@
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: $link-color;
|
||||
color: $link-color;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -156,5 +172,22 @@
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
|
||||
+ table,
|
||||
+ .table-wrapper,
|
||||
+ .code-example,
|
||||
+ .highlighter-rouge {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
////
|
||||
//// Typography
|
||||
////
|
||||
|
||||
//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", "segoe ui", helvetica, roboto, noto, arial, sans-serif;
|
||||
//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
|
||||
//$root-font-size: 16px; // Base font-size for rems
|
||||
//$body-line-height: 1.4;
|
||||
//$content-line-height: 1.5;
|
||||
//$body-heading-line-height: 1.15;
|
||||
|
||||
////
|
||||
//// Colors
|
||||
////
|
||||
|
||||
//$white: #fff;
|
||||
|
||||
//$grey-dk-000: #959396;
|
||||
//$grey-dk-100: #5c5962;
|
||||
//$grey-dk-200: #44434d;
|
||||
//$grey-dk-250: #302d36;
|
||||
//$grey-dk-300: #27262b;
|
||||
|
||||
//$grey-lt-000: #f5f6fa;
|
||||
//$grey-lt-100: #eeebee;
|
||||
//$grey-lt-200: #ecebed;
|
||||
//$grey-lt-300: #e6e1e8;
|
||||
|
||||
//$purple-000: #7253ed;
|
||||
//$purple-100: #5e41d0;
|
||||
//$purple-200: #4e26af;
|
||||
//$purple-300: #381885;
|
||||
|
||||
//$blue-000: #2c84fa;
|
||||
//$blue-100: #2869e6;
|
||||
//$blue-200: #264caf;
|
||||
//$blue-300: #183385;
|
||||
|
||||
//$green-000: #41d693;
|
||||
//$green-100: #11b584;
|
||||
//$green-200: #009c7b;
|
||||
//$green-300: #026e57;
|
||||
|
||||
//$yellow-000: #ffeb82;
|
||||
//$yellow-100: #fadf50;
|
||||
//$yellow-200: #f7d12e;
|
||||
//$yellow-300: #e7af06;
|
||||
|
||||
//$red-000: #f77e7e;
|
||||
//$red-100: #f96e65;
|
||||
//$red-200: #e94c4c;
|
||||
//$red-300: #dd2e2e;
|
||||
|
||||
//$body-background-color: $white;
|
||||
//$sidebar-color: $grey-lt-000;
|
||||
//$search-background-color: $white;
|
||||
//$table-background-color: $white;
|
||||
//$code-background-color: $grey-lt-000;
|
||||
|
||||
//$body-text-color: $grey-dk-100;
|
||||
//$body-heading-color: $grey-dk-300;
|
||||
//$search-result-preview-color: $grey-dk-000;
|
||||
//$nav-child-link-color: $grey-dk-100;
|
||||
//$link-color: $purple-000;
|
||||
//$btn-primary-color: $purple-100;
|
||||
//$base-button-color: #f7f7f7;
|
||||
|
||||
////
|
||||
//// Spacing
|
||||
////
|
||||
|
||||
//$spacing-unit: 1rem; // 1rem == 16px
|
||||
|
||||
//$spacers: (
|
||||
//sp-0: 0,
|
||||
//sp-1: $spacing-unit * 0.25,
|
||||
//sp-2: $spacing-unit * 0.5,
|
||||
//sp-3: $spacing-unit * 0.75,
|
||||
//sp-4: $spacing-unit,
|
||||
//sp-5: $spacing-unit * 1.5,
|
||||
//sp-6: $spacing-unit * 2,
|
||||
//sp-7: $spacing-unit * 2.5,
|
||||
//sp-8: $spacing-unit * 3,
|
||||
//sp-9: $spacing-unit * 3.5,
|
||||
//sp-10: $spacing-unit * 4
|
||||
//);
|
||||
|
||||
//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
//$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
|
||||
//$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
|
||||
//$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
|
||||
//$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
|
||||
//$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
|
||||
//$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
||||
//$sp-9: map-get($spacers, sp-9); // 4 rem == 48px
|
||||
//$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
|
||||
|
||||
////
|
||||
//// Borders
|
||||
////
|
||||
|
||||
//$border: 1px solid;
|
||||
//$border-radius: 4px;
|
||||
//$border-color: $grey-lt-100;
|
||||
|
||||
////
|
||||
//// Grid system
|
||||
////
|
||||
|
||||
//$gutter-spacing: $sp-6;
|
||||
//$gutter-spacing-sm: $sp-4;
|
||||
//$nav-width: 264px;
|
||||
//$nav-width-md: 248px;
|
||||
//$content-width: 800px;
|
||||
//$header-height: 60px;
|
||||
//$search-results-width: 500px;
|
||||
|
||||
////
|
||||
//// Media queries in pixels
|
||||
////
|
||||
|
||||
//$media-queries: (
|
||||
//xs: 320px,
|
||||
//sm: 500px,
|
||||
//md: $content-width,
|
||||
//lg: $content-width + $nav-width,
|
||||
//xl: 1400px
|
||||
//);
|
||||
|
||||
@@ -6,16 +6,17 @@
|
||||
.label-blue {
|
||||
display: inline-block;
|
||||
padding-top: 0.16em;
|
||||
padding-right: 0.42em;
|
||||
padding-right: 0.56em;
|
||||
padding-bottom: 0.16em;
|
||||
padding-left: 0.42em;
|
||||
margin-right: $sp-1;
|
||||
margin-left: $sp-1;
|
||||
padding-left: 0.56em;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
background-color: $blue-100;
|
||||
@include fs-2;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.label-green {
|
||||
|
||||
@@ -2,28 +2,15 @@
|
||||
// The basic two column layout
|
||||
//
|
||||
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
z-index: 100;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-wrap: nowrap;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
width: $nav-width-md;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
@@ -37,20 +24,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.main {
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
max-width: $content-width;
|
||||
@@ -64,11 +38,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.js-main-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
.main-content-wrap {
|
||||
@include container;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
@@ -79,16 +49,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@include container;
|
||||
.main-header {
|
||||
z-index: 0;
|
||||
display: none;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
height: $header-height;
|
||||
background-color: $body-background-color;
|
||||
border-bottom: $border $border-color;
|
||||
@@ -103,7 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-nav,
|
||||
.site-header,
|
||||
.site-footer {
|
||||
width: 100%;
|
||||
@@ -113,10 +81,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include container;
|
||||
.site-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-8;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
overflow-y: auto;
|
||||
@@ -130,7 +103,6 @@
|
||||
align-items: center;
|
||||
|
||||
@include mq(md) {
|
||||
z-index: 101;
|
||||
height: $header-height;
|
||||
max-height: $header-height;
|
||||
border-bottom: $border $border-color;
|
||||
@@ -165,27 +137,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
appearance: none;
|
||||
.site-button {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: $gutter-spacing-sm;
|
||||
align-items: center;
|
||||
color: $link-color;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
@include mq(md) {
|
||||
.site-header .site-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.site-button:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: $sp-10;
|
||||
overflow-y: scroll;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
@@ -202,9 +189,17 @@ body {
|
||||
left: 0;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
color: $grey-dk-000;
|
||||
@include fs-2;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $sp-5;
|
||||
height: $sp-5;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
20
_sass/modules.scss
Normal file
20
_sass/modules.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Import external dependencies
|
||||
//
|
||||
@import "./vendor/normalize.scss/normalize.scss";
|
||||
|
||||
//
|
||||
// Modules
|
||||
//
|
||||
@import "./base";
|
||||
@import "./layout";
|
||||
@import "./content";
|
||||
@import "./navigation";
|
||||
@import "./typography";
|
||||
@import "./labels";
|
||||
@import "./buttons";
|
||||
@import "./search";
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
@import "./print";
|
||||
@@ -1,89 +1,165 @@
|
||||
//
|
||||
// Main nav, breadcrumb, etc...
|
||||
//
|
||||
.navigation-list {
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
.nav-list-item {
|
||||
@include fs-4;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.nav-list-link {
|
||||
display: block;
|
||||
min-height: $nav-list-item-height-sm;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
|
||||
@if $nav-list-expander-right {
|
||||
padding-right: $nav-list-item-height-sm;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
} @else {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-left: $nav-list-item-height-sm;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
min-height: $nav-list-item-height;
|
||||
line-height: #{$nav-list-item-height - 2 * $sp-1};
|
||||
@if $nav-list-expander-right {
|
||||
padding-right: $nav-list-item-height;
|
||||
padding-left: $gutter-spacing;
|
||||
} @else {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $nav-list-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list-expander {
|
||||
position: absolute;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
@if $nav-list-expander-right {
|
||||
right: 0;
|
||||
}
|
||||
width: $nav-list-item-height-sm;
|
||||
height: $nav-list-item-height-sm;
|
||||
padding-top: #{$nav-list-item-height-sm / 4};
|
||||
padding-right: #{$nav-list-item-height-sm / 4};
|
||||
padding-bottom: #{$nav-list-item-height-sm / 4};
|
||||
padding-left: #{$nav-list-item-height-sm / 4};
|
||||
color: $link-color;
|
||||
|
||||
@include mq(md) {
|
||||
width: $nav-list-item-height;
|
||||
height: $nav-list-item-height;
|
||||
padding-top: #{$nav-list-item-height / 4};
|
||||
padding-right: #{$nav-list-item-height / 4};
|
||||
padding-bottom: #{$nav-list-item-height / 4};
|
||||
padding-left: #{$nav-list-item-height / 4};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@if $nav-list-expander-right {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: none;
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
|
||||
.nav-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.nav-list-expander {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $body-text-color;
|
||||
> .nav-list-expander svg {
|
||||
@if $nav-list-expander-right {
|
||||
transform: rotate(-90deg);
|
||||
} @else {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@include fs-4;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.navigation-list-child-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-link {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $body-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.main-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// Aux nav
|
||||
|
||||
.aux-nav {
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
@include fs-2;
|
||||
|
||||
.aux-nav-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.aux-nav-list-item {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
|
||||
.breadcrumb-nav {
|
||||
@include mq(md) {
|
||||
margin-top: -$sp-4;
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
//
|
||||
// Custom overrides from a user.
|
||||
//
|
||||
40
_sass/print.scss
Normal file
40
_sass/print.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
|
||||
|
||||
@media print {
|
||||
.site-footer,
|
||||
.site-button,
|
||||
#edit-this-page,
|
||||
#back-to-top,
|
||||
.site-nav,
|
||||
.main-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: $root-font-size !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -4,91 +4,115 @@
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
z-index: 2;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
margin-bottom: $sp-3;
|
||||
height: $sp-10;
|
||||
padding: $sp-2;
|
||||
transition: padding linear #{$transition-duration / 2};
|
||||
|
||||
@include mq(md) {
|
||||
margin-bottom: 0;
|
||||
position: relative !important;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: $sp-2;
|
||||
background-color: $search-background-color;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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);
|
||||
transition: height linear #{$transition-duration / 2};
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
background-color: $body-background-color;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: $search-results-width;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: width ease $transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
height: 100%;
|
||||
padding-top: $sp-2;
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: #{$gutter-spacing-sm + $sp-5};
|
||||
font-size: 16px;
|
||||
background-color: $search-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
order: 2;
|
||||
@include fs-4;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
padding-left: #{$gutter-spacing + $sp-5};
|
||||
font-size: 14px;
|
||||
background-color: $body-background-color;
|
||||
transition: padding-left linear #{$transition-duration / 2};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
fill: $link-color;
|
||||
+ .search-label .search-icon {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $body-background-color;
|
||||
@include fs-3;
|
||||
padding-left: $gutter-spacing;
|
||||
transition: padding-left linear #{$transition-duration / 2};
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: #{$sp-4 * 1.2};
|
||||
height: #{$sp-4 * 1.2};
|
||||
align-self: center;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
align-self: center;
|
||||
margin-right: $sp-2;
|
||||
fill: $grey-dk-000;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.search-results-wrap {
|
||||
.search-results {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: $search-background-color;
|
||||
border-radius: $border-radius;
|
||||
max-height: calc(100% - #{$sp-10});
|
||||
overflow-y: auto;
|
||||
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);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
top: 100%;
|
||||
width: $search-results-width;
|
||||
max-height: calc(100vh - 200%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-top: $sp-1;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-4;
|
||||
@@ -112,31 +136,58 @@
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $sp-4;
|
||||
padding-left: $sp-4;
|
||||
background-color: $feedback-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-right: $sp-4;
|
||||
padding-bottom: $sp-2;
|
||||
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
word-wrap: break-word;
|
||||
padding-right: $sp-2;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-doc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.search-result-doc-parent {
|
||||
opacity: 0.5;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: $sp-4;
|
||||
height: $sp-4;
|
||||
margin-right: $sp-2;
|
||||
color: $link-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-result-doc-title {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-section {
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.search-result-rel-url {
|
||||
display: block;
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
overflow: hidden;
|
||||
color: $search-result-preview-color;
|
||||
text-overflow: ellipsis;
|
||||
@@ -144,12 +195,14 @@
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.search-result-preview {
|
||||
.search-result-previews {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-4;
|
||||
margin-left: $sp-2;
|
||||
color: $search-result-preview-color;
|
||||
word-wrap: break-word;
|
||||
border-left: $border;
|
||||
border-left-color: $border-color;
|
||||
@include fs-2;
|
||||
@@ -157,11 +210,112 @@
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
padding-left: $sp-2;
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-preview + .search-result-preview {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
|
||||
.search-result-highlight {
|
||||
font-weight: bold;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
.search-no-result {
|
||||
padding-top: $sp-2;
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: fixed;
|
||||
right: $sp-4;
|
||||
bottom: $sp-4;
|
||||
display: flex;
|
||||
width: $sp-9;
|
||||
height: $sp-9;
|
||||
background-color: $search-background-color;
|
||||
border: 1px solid rgba($link-color, 0.3);
|
||||
border-radius: #{$sp-9 / 2};
|
||||
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;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: opacity ease $transition-duration, width 0s $transition-duration,
|
||||
height 0s $transition-duration;
|
||||
}
|
||||
|
||||
.search-active {
|
||||
.search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
height: $sp-10;
|
||||
border-radius: 0;
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background-color: $search-background-color;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: #{$sp-4 * 1.25 + $sp-5};
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
@include mq(md) {
|
||||
padding-left: #{$sp-4 * 1.25};
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity ease $transition-duration, width 0s, height 0s;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
.main {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding-top: $sp-10;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,8 +7,8 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
|
||||
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
|
||||
$root-font-size: 16px !default; // Base font-size for rems
|
||||
$body-line-height: 1.4 !default;
|
||||
$content-line-height: 1.5 !default;
|
||||
$body-heading-line-height: 1.15 !default !default;
|
||||
$content-line-height: 1.6 !default;
|
||||
$body-heading-line-height: 1.25 !default;
|
||||
|
||||
//
|
||||
// Colors
|
||||
@@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
|
||||
$search-background-color: $white !default;
|
||||
$table-background-color: $white !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
$feedback-color: darken($sidebar-color, 3%) !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
@@ -94,8 +95,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
|
||||
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
|
||||
|
||||
//
|
||||
// Borders
|
||||
@@ -113,9 +114,13 @@ $gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 264px !default;
|
||||
$nav-width-md: 248px !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;
|
||||
$search-results-width: 500px !default;
|
||||
$search-results-width: $content-width - $nav-width !default;
|
||||
$transition-duration: 400ms;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 14px !important;
|
||||
font-size: 15px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 16px !important;
|
||||
@@ -45,11 +45,13 @@
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 24px !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 24px !important;
|
||||
line-height: $body-heading-line-height;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 32px !important;
|
||||
@@ -58,6 +60,7 @@
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 32px !important;
|
||||
line-height: $body-heading-line-height;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 36px !important;
|
||||
@@ -66,6 +69,7 @@
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 36px !important;
|
||||
line-height: $body-heading-line-height;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 42px !important;
|
||||
@@ -74,6 +78,7 @@
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 42px !important;
|
||||
line-height: $body-heading-line-height;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 48px !important;
|
||||
|
||||
@@ -22,7 +22,7 @@ h3,
|
||||
h4,
|
||||
.text-delta {
|
||||
@include fs-2;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
@@ -39,12 +39,6 @@ h6,
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
@@ -53,6 +47,14 @@ li {
|
||||
font-family: $mono-font-family !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
@@ -47,6 +47,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal alignment
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.flex-justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.flex-justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.flex-justify-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.flex-justify-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
// Vertical alignment
|
||||
|
||||
.v-align-baseline {
|
||||
|
||||
@@ -7,6 +7,11 @@
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
@@ -42,11 +47,10 @@
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
.mx-#{$scale}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
|
||||
Reference in New Issue
Block a user