rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

menu header styling

This commit is contained in:
ManjaroOne666 2019-01-23 11:53:25 +00:00
parent 12a8b98e75
commit c9e5a04789
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/SiteMenu.vue
View File

@ -28,8 +28,7 @@
</li> </li>
</ul> </ul>
<ul class="site-nav__footer social-nav"> <ul class="site-nav__footer social-nav">
<li class="social-nav__item" <li v-for="item in socialNav"
v-for="item in socialNav"
:key="item.to" :key="item.to"
> >
<a class="social-nav__link" <a class="social-nav__link"
@ -186,18 +185,17 @@ $transition-timing: .5s;
} }
.menu-header { .menu-header {
$color-bg: $color__primary-300; $color-bg: $color__neutral-300;
$color-shade: darken($color__primary-300, 5); $color-shade: darken($color__neutral-300, 5);
// $color-shade: $color__neutral-200;
position: relative; position: relative;
flex: 0 0 $site-menu__header-height; flex: 0 0 $site-menu__header-height;
color: $color__primary-100; color: $color__primary-900;
background-color: $color-bg; background-color: $color-bg;
background: linear-gradient( background: linear-gradient(
to right, to right,
$color-shade,
$color-bg,
$color-bg, $color-bg,
$color-shade $color-shade
); );
@ -251,7 +249,7 @@ $transition-timing: .5s;
.site-title { .site-title {
font-size: 1.2rem; font-size: 0.9rem;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1; line-height: 1.1;
opacity: .8; opacity: .8;
@ -259,7 +257,7 @@ $transition-timing: .5s;
@include font-title($weight: 400); @include font-title($weight: 400);
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
font-size: 1.4rem; font-size: 1.0rem;
letter-spacing: 1.3px; letter-spacing: 1.3px;
} }
} }
@ -368,9 +366,6 @@ $transition-timing: .5s;
} }
} }
.social-nav__item {
}
.social-nav__link { .social-nav__link {
display: block; display: block;
height: 2em; height: 2em;
@ -419,7 +414,7 @@ $transition-timing: .5s;
} }
.menu-bars { .menu-bars {
$color: $color__primary-800; $color: $color__neutral-900;
$width: 4px; $width: 4px;
$padding: 4px; // padding on top/bottom $padding: 4px; // padding on top/bottom