From e9f016ac0f691112e8e6b192ddfeb096581da6bf Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@dc-square.de>
Date: Sun, 12 May 2019 21:49:19 +0200
Subject: [PATCH] Improved responsiveness of sidebar
---
_sass/layout.scss | 4 ++--
_sass/support/_variables.scss | 25 +++++++++++++------------
assets/js/just-the-docs.js | 3 ++-
3 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 068b6abb..0dc4c08c 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -24,7 +24,7 @@
@include mq(md) {
flex-wrap: nowrap;
position: absolute;
- width: $nav-width;
+ width: $nav-width-md;
height: 100%;
flex-direction: column;
border-right: $border $border-color;
@@ -54,7 +54,7 @@
@include mq(md) {
position: relative;
max-width: $content-width;
- margin-left: $nav-width;
+ margin-left: $nav-width-md;
}
@include mq(lg) {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 59a7c4ef..4e1bf8d7 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -61,18 +61,6 @@ $link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
-//
-// Media queries in pixels
-//
-
-$media-queries: (
- xs: 320px,
- sm: 500px,
- md: 740px,
- lg: 1120px,
- xl: 1400px
-) !default;
-
//
// Spacing
//
@@ -119,5 +107,18 @@ $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;
$content-width: 800px !default;
$header-height: 60px !default;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+ xs: 320px,
+ sm: 500px,
+ md: $content-width,
+ lg: $content-width + $nav-width,
+ xl: 1400px
+) !default;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index bc0a6357..a8ae98e2 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -14,7 +14,8 @@ function toggleNav(){
const pageHeader = document.querySelector('.js-page-header');
const navTrigger = document.querySelector('.js-main-nav-trigger');
- addEvent(navTrigger, 'click', function(){
+ addEvent(navTrigger, 'click', function(e){
+ e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
--
GitLab