steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Improve side navigation spacing in relation to masthead

Browse Source
This commit is contained in:
Michael Rose
2018-08-09 15:06:00 -04:00
parent 676b9cc0e3
commit e707057fa8
6 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
_sass/minimal-mistakes/_navigation.scss
View File

@@ -176,15 +176,17 @@
.greedy-nav {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: $nav-height;
background: $background-color;
a {
display: block;
margin: 0 1rem;
padding: 0.5rem 0;
color: $masthead-link-color;
text-decoration: none;
@@ -198,7 +200,7 @@
}
&__toggle {
padding: 0 0.5rem;
-ms-flex-item-align: stretch;
align-self: stretch;
border: 0;
outline: none;
@@ -209,15 +211,19 @@
.visible-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
li {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
@@ -235,13 +241,13 @@
-webkit-transition: $global-transition;
transition: $global-transition;
-webkit-transform: scaleX(0) translate3d(0, 0, 0);
transform: scaleX(0) translate3d(0, 0, 0); /* hide*/
transform: scaleX(0) translate3d(0, 0, 0); // hide
}
&:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1); /* reveal*/
transform: scaleX(1); // reveal
}
}
}
@@ -255,6 +261,8 @@
border: 1px solid $border-color;
border-radius: $border-radius;
background: $background-color;
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
0 2px 10px 0 rgba(#000, 0.12);
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
&.hidden {
@@ -331,7 +339,7 @@
display: none;
}
@include breakpoint(max-width ($large - 1px)) {
@include breakpoint(max-width($large - 1px)) {
label {
position: relative;
display: inline-block;
@@ -437,7 +445,7 @@
font-weight: bold;
}
@include breakpoint(max-width ($large - 1px)) {
@include breakpoint(max-width($large - 1px)) {
position: relative;
max-height: 0;
opacity: 0%;
@@ -451,7 +459,7 @@
}
}
@include breakpoint(max-width ($large - 1px)) {
@include breakpoint(max-width($large - 1px)) {
.nav__list input:checked ~ .nav__items {
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
@@ -496,6 +504,7 @@
background-color: $background-color;
border: 1px solid $border-color;
border-radius: $border-radius;
-webkit-box-shadow: $box-shadow;
box-shadow: $box-shadow;
.nav__title {