deleted unneeded comments

TODO.md

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

components/SiteMenu.vue

@@ -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;
+  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-
-  @media (min-width: $bp__layout) {
-    right: $site-menu__header-width;
-  }
 }
 
-.menu-link-background {
+@media (min-width: $bp__layout) {
-  background-size: cover;
+  .menu-background {
-  background-position: center center;
+    z-index: 1;
-
+    display: initial;
-  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: .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 {
+  .menu-link-background {
-    transition: opacity 1s;
+    background-size: cover;
-    opacity: .15;
+    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;
+    }
   }
 
 

pages/services.vue

@@ -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"