thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Better layout for when nav is long and scrolls

This commit is contained in:
Patrick Marsceill 2018-10-24 14:06:12 -04:00
parent 45abf03b48
commit f97f504284
No known key found for this signature in database
GPG Key ID: 286B93882D828F40
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
_sass/layout.scss
View File

@ -17,13 +17,15 @@
.side-bar {
z-index: 100;
display: flex;
flex-wrap: wrap;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
background-color: $grey-lt-000;
@include mq(md) {
flex-wrap: nowrap;
position: absolute;
display: flex;
width: $nav-width + 16px;
height: 100%;
padding-top: $gutter-spacing * 2;
@ -107,11 +109,9 @@
.navigation {
@include mq(md) {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding-top: $sp-8;
overflow-y: auto;
flex: 1 1 auto;
}
}
@ -127,9 +127,14 @@ body {
.site-footer {
position: absolute;
bottom: $sp-3;
bottom: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
@include mq(md) {
right: 0;
position: static;
align-self: flex-end;
justify-self: end;
background-color: $grey-lt-000;
}
}

15
_sass/navigation.scss
View File

@ -4,9 +4,7 @@
.site-title {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 1 1 auto;
background-color: $grey-lt-000;
@include mq(md) {
@ -27,7 +25,7 @@
list-style: none;
@include mq(md) {
margin-top: $sp-10;
margin-top: 0;
}
}
@ -91,15 +89,6 @@
}
}
.side-bar {
display: flex;
flex-wrap: wrap;
@include mq(md) {
display: block;
overflow-y: auto;
}
}
.navigation-list-toggle {
position: absolute;