Browse Source

Reduced size of nav menu

master
Kenneth Skovhede 8 years ago
parent
commit
42f5b6a7ec
  1. 30
      _sass/_sliding-menu.scss

30
_sass/_sliding-menu.scss

@ -9,10 +9,10 @@
.slide { .slide {
transform: translateX(-100%); transform: translateX(-100%);
@include media($medium) { @include media($medium) {
transform: translateX(em(-600)); transform: translateX(em(-400));
} }
@include media($large) { @include media($large) {
transform: translateX(em(-900)); transform: translateX(em(-600));
} }
} }
@ -44,10 +44,10 @@
background: $danger-color; background: $danger-color;
transform: translateX(0); /* don't slide close button on small screens only */ transform: translateX(0); /* don't slide close button on small screens only */
@include media($medium) { @include media($medium) {
transform: translateX(em(-600)); /* reset slide position */ transform: translateX(em(-400)); /* reset slide position */
} }
@include media($large) { @include media($large) {
transform: translateX(em(-900)); /* reset slide position */ transform: translateX(em(-600)); /* reset slide position */
} }
} }
} }
@ -66,10 +66,10 @@
text-align: left; text-align: left;
@include size(100% 100%); @include size(100% 100%);
@include media($small) { @include media($small) {
width: em(600); width: em(400);
} }
@include media($large) { @include media($large) {
width: em(900); width: em(600);
} }
transform: translateX(100%); transform: translateX(100%);
transition: $sliding-menu-animation; transition: $sliding-menu-animation;
@ -94,9 +94,9 @@
} }
span { span {
display: block; display: block;
@include font-size(32,no,1); @include font-size(16,no,1);
@include media($small) { @include media($small) {
@include font-size(48,no,1); @include font-size(18,no,1);
} }
font-family: $base-font; font-family: $base-font;
text-transform: uppercase; text-transform: uppercase;
@ -116,10 +116,10 @@
li { li {
display: block; display: block;
position: relative; position: relative;
padding-bottom: 1em; padding-bottom: 0.01em;
min-height: 70px; min-height: 20px;
@include media($small) { @include media($small) {
min-height: 100px; min-height: 40px;
} }
} }
.menu-item { .menu-item {
@ -145,13 +145,13 @@
} }
.title { .title {
display: block; display: block;
margin-left: 60px; margin-left: 40px;
font-family: $alt-font; font-family: $alt-font;
@include font-size(24,no); @include font-size(16,no);
font-weight: 700; font-weight: 700;
@include media($small) { @include media($small) {
margin-left: 170px; margin-left: 80px;
@include font-size(32,no); @include font-size(18,no);
} }
} }
.excerpt { .excerpt {

Loading…
Cancel
Save