mirror of
https://github.com/thangisme/notes.git
synced 2024-12-22 14:36:51 -05:00
Improved responsiveness of sidebar
This commit is contained in:
parent
8c603aac1e
commit
e9f016ac0f
@ -24,7 +24,7 @@
|
|||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: $nav-width;
|
width: $nav-width-md;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-right: $border $border-color;
|
border-right: $border $border-color;
|
||||||
@ -54,7 +54,7 @@
|
|||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: $content-width;
|
max-width: $content-width;
|
||||||
margin-left: $nav-width;
|
margin-left: $nav-width-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(lg) {
|
@include mq(lg) {
|
||||||
|
@ -61,18 +61,6 @@ $link-color: $purple-000 !default;
|
|||||||
$btn-primary-color: $purple-100 !default;
|
$btn-primary-color: $purple-100 !default;
|
||||||
$base-button-color: #f7f7f7 !default;
|
$base-button-color: #f7f7f7 !default;
|
||||||
|
|
||||||
//
|
|
||||||
// Media queries in pixels
|
|
||||||
//
|
|
||||||
|
|
||||||
$media-queries: (
|
|
||||||
xs: 320px,
|
|
||||||
sm: 500px,
|
|
||||||
md: 740px,
|
|
||||||
lg: 1120px,
|
|
||||||
xl: 1400px
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Spacing
|
// Spacing
|
||||||
//
|
//
|
||||||
@ -119,5 +107,18 @@ $border-color: $grey-lt-100 !default;
|
|||||||
$gutter-spacing: $sp-6 !default;
|
$gutter-spacing: $sp-6 !default;
|
||||||
$gutter-spacing-sm: $sp-4 !default;
|
$gutter-spacing-sm: $sp-4 !default;
|
||||||
$nav-width: 264px !default;
|
$nav-width: 264px !default;
|
||||||
|
$nav-width-md: 248px !default;
|
||||||
$content-width: 800px !default;
|
$content-width: 800px !default;
|
||||||
$header-height: 60px !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;
|
||||||
|
@ -14,7 +14,8 @@ function toggleNav(){
|
|||||||
const pageHeader = document.querySelector('.js-page-header');
|
const pageHeader = document.querySelector('.js-page-header');
|
||||||
const navTrigger = document.querySelector('.js-main-nav-trigger');
|
const navTrigger = document.querySelector('.js-main-nav-trigger');
|
||||||
|
|
||||||
addEvent(navTrigger, 'click', function(){
|
addEvent(navTrigger, 'click', function(e){
|
||||||
|
e.preventDefault();
|
||||||
var text = navTrigger.innerText;
|
var text = navTrigger.innerText;
|
||||||
var textToggle = navTrigger.getAttribute('data-text-toggle');
|
var textToggle = navTrigger.getAttribute('data-text-toggle');
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user