menu background images

TODO.md

@@ -1,5 +1,6 @@
 ## Menu
 * Proper background images for hover effect
+* don't load background images on mobile
 
 ## contact
 * form background image
@@ -11,9 +12,6 @@
 * facebook/twitter social card thingies
 * page titles
 
-## Image viewer
-* close icon
-
 ## Services
 * background image for mobile
 

components/SiteMenu.vue

@@ -79,11 +79,11 @@ export default {
   data () {
     return {
       siteNav: [
-        { 'to': '/', 'text': 'Home', bgImgUrl: 'https://via.placeholder.com/300x800/ff0000'},
+        { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
-        { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: 'https://via.placeholder.com/300x800/00ff00' },
+        { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
-        { 'to': '/services', 'text': 'Services', bgImgUrl: 'https://via.placeholder.com/300x800/0000ff' },
+        { 'to': '/services', 'text': 'Services', bgImgUrl: '/img/camera--bw.jpg' },
-        { 'to': '/about', 'text': 'About Me', bgImgUrl: 'https://via.placeholder.com/300x800/00ffff' },
+        { 'to': '/about', 'text': 'About Me', bgImgUrl: '/img/silhouette--dark.jpg' },
-        { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: 'https://via.placeholder.com/300x800/ffff00' },
+        { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: '/img/mail--bw.jpg' },
       ],
       socialNav: [
         { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
@@ -93,9 +93,6 @@ export default {
       ]
     }
   },
-
-  methods: {
-  }
 }
 </script>
 
@@ -497,6 +494,7 @@ $transition-timing: .5s;
 
 .menu-link-background {
   background-size: cover;
+  background-position: center center;
 
   transition: opacity .5s;
   opacity: 0;
@@ -514,16 +512,31 @@ $transition-timing: .5s;
     background: linear-gradient(
                   to bottom,
                   rgba($color, 0),
-                  rgba($color, .5),
+                  rgba($color, .7),
-                  rgba($color, .5),
+                  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 2s;
+    transition: opacity 1s;
-    opacity: .05;
+    opacity: .4;
   }
 
 .social-background {
@@ -541,7 +554,7 @@ $transition-timing: .5s;
   }
 
   .social-nav-item:hover .social-background {
-    transition: opacity 2s;
+    transition: opacity 1s;
     opacity: .15;
   }