diff --git a/TODO.md b/TODO.md index 5576b60..248e2c6 100644 --- a/TODO.md +++ b/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 diff --git a/components/SiteMenu.vue b/components/SiteMenu.vue index 9577cec..f739dd3 100644 --- a/components/SiteMenu.vue +++ b/components/SiteMenu.vue @@ -79,11 +79,11 @@ export default { data () { return { siteNav: [ - { 'to': '/', 'text': 'Home', bgImgUrl: 'https://via.placeholder.com/300x800/ff0000'}, - { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: 'https://via.placeholder.com/300x800/00ff00' }, - { 'to': '/services', 'text': 'Services', bgImgUrl: 'https://via.placeholder.com/300x800/0000ff' }, - { 'to': '/about', 'text': 'About Me', bgImgUrl: 'https://via.placeholder.com/300x800/00ffff' }, - { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: 'https://via.placeholder.com/300x800/ffff00' }, + { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'}, + { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' }, + { 'to': '/services', 'text': 'Services', bgImgUrl: '/img/camera--bw.jpg' }, + { 'to': '/about', 'text': 'About Me', bgImgUrl: '/img/silhouette--dark.jpg' }, + { '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: { - } } @@ -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, .5), + 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 2s; - opacity: .05; + transition: opacity 1s; + 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; } diff --git a/static/img/camera--bw.jpg b/static/img/camera--bw.jpg new file mode 100755 index 0000000..eb2dad8 Binary files /dev/null and b/static/img/camera--bw.jpg differ diff --git a/static/img/camera.jpg b/static/img/camera.jpg new file mode 100644 index 0000000..7a3ff38 Binary files /dev/null and b/static/img/camera.jpg differ diff --git a/static/img/devices--bw.jpg b/static/img/devices--bw.jpg new file mode 100755 index 0000000..b2e1e35 Binary files /dev/null and b/static/img/devices--bw.jpg differ diff --git a/static/img/mail--bw.jpg b/static/img/mail--bw.jpg new file mode 100755 index 0000000..f25e4ba Binary files /dev/null and b/static/img/mail--bw.jpg differ diff --git a/static/img/mail.jpg b/static/img/mail.jpg new file mode 100644 index 0000000..e27f859 Binary files /dev/null and b/static/img/mail.jpg differ diff --git a/static/img/photo-box--bw.jpg b/static/img/photo-box--bw.jpg new file mode 100755 index 0000000..e6a4505 Binary files /dev/null and b/static/img/photo-box--bw.jpg differ diff --git a/static/img/photo-box.jpg b/static/img/photo-box.jpg new file mode 100644 index 0000000..83030c9 Binary files /dev/null and b/static/img/photo-box.jpg differ diff --git a/static/img/silhouette--dark.jpg b/static/img/silhouette--dark.jpg new file mode 100755 index 0000000..b6ccac2 Binary files /dev/null and b/static/img/silhouette--dark.jpg differ diff --git a/static/img/silhouette.jpg b/static/img/silhouette.jpg new file mode 100644 index 0000000..2171618 Binary files /dev/null and b/static/img/silhouette.jpg differ