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 { .side-bar {
z-index: 100; z-index: 100;
display: flex;
flex-wrap: wrap;
padding-top: $gutter-spacing-sm; padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm;
background-color: $grey-lt-000; background-color: $grey-lt-000;
@include mq(md) { @include mq(md) {
flex-wrap: nowrap;
position: absolute; position: absolute;
display: flex;
width: $nav-width + 16px; width: $nav-width + 16px;
height: 100%; height: 100%;
padding-top: $gutter-spacing * 2; padding-top: $gutter-spacing * 2;
@ -107,11 +109,9 @@
.navigation { .navigation {
@include mq(md) { @include mq(md) {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding-top: $sp-8; padding-top: $sp-8;
overflow-y: auto;
flex: 1 1 auto;
} }
} }
@ -127,9 +127,14 @@ body {
.site-footer { .site-footer {
position: absolute; position: absolute;
bottom: $sp-3; bottom: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
@include mq(md) { @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 { .site-title {
display: block; display: block;
flex-grow: 1; flex: 1 1 auto;
flex-shrink: 1;
flex-basis: auto;
background-color: $grey-lt-000; background-color: $grey-lt-000;
@include mq(md) { @include mq(md) {
@ -27,7 +25,7 @@
list-style: none; list-style: none;
@include mq(md) { @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 { .navigation-list-toggle {
position: absolute; position: absolute;