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

Add nav_enabled variables for more customizable and feature-complete minimal layouts (#1441)

Browse Source 
* Add nav_enabled variables for site/layout/page-level control

* _sass: Add a space around `+` operator

* assets: Do not compile based on site.nav_enabled

* _config.yml: nav_enabled can be selectively enabled

* CHANGELOG.md: Add nav_enabled feature and docs

* docs: Prefer em dash in describing minimal layout

* docs: Add section on Selectively hiding or showing the sidebar

* _layouts: Display sidebar based on variable importance

* docs: Update documentation on the minimal layout

* docs: Document site.nav_enabled configuration variable

---------

Co-authored-by: Matt Wang <matt@matthewwang.me>
This commit is contained in:
Kevin Lin
2024-04-22 15:07:29 -07:00
committed by GitHub
parent 063a130ffd
commit a251382b7a
9 changed files with 85 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
_sass/layout.scss
View File

@@ -19,23 +19,48 @@
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
min-width: $nav-width;
}
& + .main {
@include mq(md) {
margin-left: $nav-width-md;
}
@include mq(lg) {
// stylelint-disable function-name-case
// disable for Max(), we want to use the CSS max() function
margin-left: Max(
#{$nav-width},
calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
);
// stylelint-enable function-name-case
}
.main-header {
display: none;
background-color: $sidebar-color;
@include mq(md) {
display: flex;
background-color: $body-background-color;
}
&.nav-open {
display: block;
@include mq(md) {
display: flex;
}
}
}
}
}
.main {
margin: auto;
@include mq(md) {
position: relative;
max-width: $content-width;
margin-left: $nav-width-md;
}
@include mq(lg) {
// stylelint-disable function-name-case
// disable for Max(), we want to use the CSS max() function
margin-left: Max(
#{$nav-width},
calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
);
// stylelint-enable function-name-case
}
}
@@ -53,23 +78,12 @@
.main-header {
z-index: 0;
display: none;
background-color: $sidebar-color;
border-bottom: $border $border-color;
@include mq(md) {
display: flex;
justify-content: space-between;
height: $header-height;
background-color: $body-background-color;
border-bottom: $border $border-color;
}
&.nav-open {
display: block;
@include mq(md) {
display: flex;
}
}
}