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 'improvement/navigation' into improvement/navigation-new

Browse Source 
# Conflicts:
#	_includes/nav.html
#	_layouts/default.html
This commit is contained in:
Silvio Giebl
2020-06-15 21:23:03 +02:00
parent 85fa222f49 4bb8d7612d
commit c7466e88a8
9 changed files with 310 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_sass/color_schemes/dark.scss
View File

@@ -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%);

2
_sass/content.scss
View File

@@ -5,7 +5,7 @@
//
// 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,

32
_sass/layout.scss
View File

@@ -37,7 +37,7 @@
}
}
.main-content-wrap {
.main-wrap {
@include mq(md) {
position: absolute;
top: 0;
@@ -48,9 +48,13 @@
overflow-x: hidden;
overflow-y: scroll;
}
&:focus {
outline: none;
}
}
.main-content {
.main {
@include mq(md) {
position: relative;
max-width: $content-width;
@@ -64,11 +68,7 @@
}
}
.js-main-content:focus {
outline: none;
}
.page {
.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@@ -79,7 +79,7 @@
}
}
.page-header {
.main-header {
@include container;
display: none;
padding-top: $gutter-spacing-sm;
@@ -103,7 +103,7 @@
}
}
.navigation,
.site-nav,
.site-header,
.site-footer {
width: 100%;
@@ -113,9 +113,7 @@
}
}
.navigation {
@include container;
.site-nav {
@include mq(md) {
padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm;
@@ -165,7 +163,7 @@
}
}
.menu-button {
.site-button {
appearance: none;
display: flex;
height: 100%;
@@ -175,12 +173,18 @@
text-transform: uppercase;
background: transparent;
border: 0;
@include fs-3;
@include mq(md) {
display: none;
}
}
.site-title:hover,
.site-button:hover {
background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
}
// stylelint-disable selector-max-type
body {
@@ -202,6 +206,8 @@ body {
left: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
color: $grey-dk-000;
@include fs-2;
@include mq(md) {
position: static;

177
_sass/navigation.scss
View File

@@ -1,74 +1,133 @@
//
// 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};
fill: $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 {
fill: $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 {
.site-nav {
display: none;
&.nav-open {
@@ -81,9 +140,27 @@
.aux-nav {
align-self: center;
.aux-nav-list {
padding: 0;
margin: 0;
list-style: none;
@include fs-2;
}
.aux-nav-list-item {
display: inline-block;
margin-right: $sp-2;
@include fs-2;
&:last-child {
margin-right: 0;
}
}
}
// Breadcrumb nav
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;

4
_sass/search.scss
View File

@@ -68,7 +68,7 @@
order: 1;
}
.search-results-wrap {
.search-results {
position: absolute;
z-index: 100;
display: none;
@@ -112,7 +112,7 @@
&:hover,
&.active {
background-color: $sidebar-color;
background-color: $feedback-color;
}
@include mq(md) {

4
_sass/support/_variables.scss
View File

@@ -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;
@@ -113,6 +114,9 @@ $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;