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

deleted unneeded comments

This commit is contained in:
ManjaroOne666 2019-01-30 20:06:55 +00:00
parent 86dc804b03
commit c1cb8fed89
3 changed files with 77 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

@ -1,7 +1,3 @@
## Menu
* Proper background images for hover effect
* don't load background images on mobile
## contact
* form background image

146
components/SiteMenu.vue
View File

@ -78,6 +78,7 @@ export default {
data () {
return {
loadMenuImages: false,
siteNav: [
{ 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
{ 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
@ -479,83 +480,90 @@ $transition-timing: .5s;
}
.menu-background {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
@media (min-width: $bp__layout) {
right: $site-menu__header-width;
}
display: none;
}
.menu-link-background {
background-size: cover;
background-position: center center;
transition: opacity .5s;
opacity: 0;
&::after {
$color: $site-menu__color-bg; //color of gradient overlay
content: '';
@media (min-width: $bp__layout) {
.menu-background {
z-index: 1;
display: initial;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(
to bottom,
rgba($color, 0),
rgba($color, .7),
rgba($color, .7),
rgba($color, 0)
),
linear-gradient(
to right,
rgba($color, 1),
rgba($color, .2) 50%,
rgba($color, 0) 90%,
rgba($color, 1)
),
linear-gradient(
to bottom,
rgba($color, 1),
rgba($color, 0) 20%,
rgba($color, 0) 80%,
rgba($color, 1) 90%,
rgba($color, 1)
);
}
}
.site-nav__item:hover .menu-link-background {
transition: opacity 1s;
opacity: .4;
}
.social-background {
transition: opacity .5s;
opacity: 0;
}
.social-background__icon {
position: absolute;
align-items: flex-end;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
@media (min-width: $bp__layout) {
right: $site-menu__header-width;
}
}
.social-nav-item:hover .social-background {
transition: opacity 1s;
opacity: .15;
.menu-link-background {
background-size: cover;
background-position: center center;
transition: opacity .5s;
opacity: 0;
&::after {
$color: $site-menu__color-bg; //color of gradient overlay
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(
to bottom,
rgba($color, 0),
rgba($color, .7),
rgba($color, .7),
rgba($color, 0)
),
linear-gradient(
to right,
rgba($color, 1),
rgba($color, .2) 50%,
rgba($color, 0) 90%,
rgba($color, 1)
),
linear-gradient(
to bottom,
rgba($color, 1),
rgba($color, 0) 20%,
rgba($color, 0) 80%,
rgba($color, 1) 90%,
rgba($color, 1)
);
}
}
.site-nav__item:hover .menu-link-background {
transition: opacity 1s;
opacity: .3;
}
.social-background {
transition: opacity .5s;
opacity: 0;
}
.social-background__icon {
position: absolute;
align-items: flex-end;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
.social-nav-item:hover .social-background {
transition: opacity 1s;
opacity: .15;
}
}

1
pages/services.vue
View File

@ -1,6 +1,5 @@
<template>
<ContentPage heading="My Services">
<!-- TODO need to disable this if on mobile -->
<BackgroundImagePreloader v-if="showPreloaderBackground" slot="background"
class="background-preloader"
:image-urls="backgroundImageUrls"