site-menu styling/layout/functionality
This commit is contained in:
ManjaroOne666
parent
ad14611129
commit
11654f494c
|
|
@ -6,3 +6,16 @@
|
|||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
$link: $color__neutral-800;
|
||||
$link-hover: $color__primary-500;
|
||||
|
||||
$primary: #f00;
|
||||
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
@import "~bulma/bulma.sass";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'palette';
|
||||
@import 'mixins';
|
||||
|
||||
$bp__m: 40em;
|
||||
|
||||
|
|
@ -6,7 +7,9 @@ $bp__m: 40em;
|
|||
$bp__layout: 40em;
|
||||
|
||||
$z-index__page: 50;
|
||||
$z-index__page-overlay: 75;
|
||||
$z-index__menu: 100;
|
||||
|
||||
$site-menu__width: 25rem;
|
||||
$site-menu__header-width: 3rem;
|
||||
$site-menu__header-height: 3rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
@mixin font-body($weight: 400) {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
@mixin font-title($weight: 400) {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
@import 'buefy';
|
||||
@import 'base';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<section :class="{ 'is-open': isOpen }"
|
||||
class="menu-drawer menu-layout"
|
||||
@click="$emit('toggleMenu')"
|
||||
>
|
||||
<div class="menu-header__item menu-toggle"
|
||||
@click="$emit('toggleMenu')"
|
||||
>
|
||||
<div class="menu-bars"></div>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="menu-close">close</div>
|
||||
<nav class="menu-content__body">
|
||||
|
|
@ -29,20 +33,20 @@
|
|||
>
|
||||
<b-icon class="social-nav__icon"
|
||||
:icon="item.icon"
|
||||
>
|
||||
</b-icon>
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="menu-content__footer">
|
||||
<p class="footer-attr">Copyright © 2019 Marc Leopold Photography</p>
|
||||
<p class="footer-attr">Copyright © {{ new Date().getFullYear() }} Marc Leopold Photography</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="menu-header">
|
||||
<div class="menu-header"
|
||||
@click="$emit('toggleMenu')"
|
||||
>
|
||||
<div class="menu-header__inner">
|
||||
<span class="menu-header__item site-title">Marc Leopold Photography</span>
|
||||
<div class="menu-header__item menu-toggle">X</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -81,7 +85,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$transition-timing: .5s;
|
||||
|
||||
.menu-drawer {
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -90,7 +97,7 @@ export default {
|
|||
|
||||
font-size: 1rem;
|
||||
|
||||
transition: transform .5s;
|
||||
transition: transform $transition-timing;
|
||||
transform: translate3d(0, $site-menu__header-width, 0);
|
||||
|
||||
&.is-open {
|
||||
|
|
@ -98,7 +105,7 @@ export default {
|
|||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
width: 25em;
|
||||
width: $site-menu__width;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
transform: translate3d($site-menu__header-width, 0, 0);
|
||||
|
|
@ -160,15 +167,34 @@ export default {
|
|||
}
|
||||
|
||||
.menu-header {
|
||||
$color-bg: $color__primary-300;
|
||||
$color-shade: darken($color__primary-300, 5);
|
||||
|
||||
position: relative;
|
||||
flex: 0 0 $site-menu__header-height;
|
||||
|
||||
color: $color__neutral-700;
|
||||
background-color: $color__neutral-300;
|
||||
opacity: .97;
|
||||
color: $color__primary-100;
|
||||
background-color: $color-bg;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$color-shade,
|
||||
$color-bg,
|
||||
$color-bg,
|
||||
$color-shade
|
||||
);
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
max-width: $site-menu__header-width;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$color-shade,
|
||||
$color-bg,
|
||||
$color-bg,
|
||||
$color-shade
|
||||
);
|
||||
opacity: .97;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,30 +236,14 @@ export default {
|
|||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
|
||||
@include font-title();
|
||||
@include font-title($weight: 400);
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 1.3px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
$width: 2rem;
|
||||
$margin: ($site-menu__header-width - $width) / 2;
|
||||
width: $width;
|
||||
height: $width;
|
||||
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: $margin;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
background-color: rgba(yellow, .3); // TEMP
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
display: none;
|
||||
|
||||
|
|
@ -296,9 +306,70 @@ export default {
|
|||
}
|
||||
|
||||
.footer-attr {
|
||||
color: $color__neutral-500;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
$width: 2rem;
|
||||
$margin: ($site-menu__header-width - $width) / 2;
|
||||
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
width: $width;
|
||||
height: $width;
|
||||
right: $margin;
|
||||
bottom: $margin;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: opacity .2s;
|
||||
opacity: .6;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
bottom: auto;
|
||||
top: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bars {
|
||||
$color: $color__primary-800;
|
||||
$width: 4px;
|
||||
$padding: 4px; // padding on top/bottom
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: $padding;
|
||||
bottom: $padding;
|
||||
left: 0;
|
||||
|
||||
border-top: $width solid $color;
|
||||
border-bottom: $width solid $color;
|
||||
|
||||
transition: transform .3s .2s ease-out;
|
||||
transform: scale(1, .7);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $width;
|
||||
left: 0;
|
||||
top: calc(50% - #{$width / 2});
|
||||
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@at-root .menu.is-open & {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -307,5 +378,4 @@ export default {
|
|||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page">
|
||||
<div class="page-overlay"
|
||||
:class="{ 'is-active': isMenuOpen }"
|
||||
@click="closeMenu"
|
||||
>
|
||||
</div>
|
||||
<nuxt />
|
||||
</div>
|
||||
<SiteMenu class="menu"
|
||||
|
|
@ -27,7 +32,10 @@ export default {
|
|||
methods: {
|
||||
toggleMenu () {
|
||||
this.isMenuOpen = !this.isMenuOpen
|
||||
}
|
||||
},
|
||||
closeMenu () {
|
||||
this.isMenuOpen = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -51,6 +59,37 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.page-overlay {
|
||||
$color: $color__primary-100;
|
||||
z-index: $z-index__page-overlay;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: rgba($color, .6);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($color, 1),
|
||||
rgba($color, 1) $site-menu__width + 3rem,
|
||||
rgba($color, .8),
|
||||
rgba($color, 1)
|
||||
);
|
||||
box-shadow: 0 0 70px 40px $color inset;
|
||||
|
||||
transition: opacity .5s .2s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: $z-index__menu;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ module.exports = {
|
|||
{ hid: 'description', name: 'description', content: pkg.description }
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Raleway:400,500,600,700,800,900' },
|
||||
]
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue