From c1cb8fed89b3f5323342750ef792e4a008f92cb7 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 30 Jan 2019 20:06:55 +0000
Subject: [PATCH] deleted unneeded comments

---
 TODO.md                 |   4 --
 components/SiteMenu.vue | 146 +++++++++++++++++++++-------------------
 pages/services.vue      |   1 -
 3 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/TODO.md b/TODO.md
index 248e2c6..d2fb1a7 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,3 @@
-## Menu
-* Proper background images for hover effect
-* don't load background images on mobile
-
 ## contact
 * form background image
 
diff --git a/components/SiteMenu.vue b/components/SiteMenu.vue
index f739dd3..3441eed 100644
--- a/components/SiteMenu.vue
+++ b/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;
-  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;
+    }
   }
 
 
diff --git a/pages/services.vue b/pages/services.vue
index ec20dd7..8340efc 100644
--- a/pages/services.vue
+++ b/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"