From 9ace5533ab1b969d4484ac1374e3390cf5d1cd5a Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 23 Jan 2019 16:34:23 +0000
Subject: [PATCH] layout/styling update

---
 pages/services.vue | 211 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 174 insertions(+), 37 deletions(-)

diff --git a/pages/services.vue b/pages/services.vue
index efcf473..f469bc7 100644
--- a/pages/services.vue
+++ b/pages/services.vue
@@ -1,44 +1,21 @@
 <template>
   <ContentPage heading="The Services Page Heading">
     <ul class="services-list">
-      <li class="services-list__item">
-        <h2 class="services-list__heading">Portraits</h2>
-        <figure class="services-list__figure">
-          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
-        </figure>
-        <div class="services-list__body">
-          <p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>
-          <a class="services-list__gallery-link" href="#">My Portraits</a>
+      <li v-for="(service, index) in services"
+          :key="index"
+          class="services-list__item"
+          :style="{ 'z-index': services.length - index + 1}"
+      >
+        <div class="background background-image"
+             :style="{ 'background-image': `url(${service.imageUrl})` }"
+        >
         </div>
-      </li>
-      <li class="services-list__item">
-        <h2 class="services-list__heading">Dance</h2>
-        <figure class="services-list__figure">
-          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
-        </figure>
-        <div class="services-list__body">
-          <p>Photography and video production of dancers and performances for print, web, and promotion.</p>
-          <a class="services-list__gallery-link" href="#">My Dance</a>
-        </div>
-      </li>
-      <li class="services-list__item">
-        <h2 class="services-list__heading">Music</h2>
-        <figure class="services-list__figure">
-          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
-        </figure>
-        <div class="services-list__body">
-          <p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>
-          <a class="services-list__gallery-link" href="#">My Music</a>
-        </div>
-      </li>
-      <li class="services-list__item">
-        <h2 class="services-list__heading">Events</h2>
-        <figure class="services-list__figure">
-          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
-        </figure>
-        <div class="services-list__body">
-          <p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>
-          <a class="services-list__gallery-link" href="#">My Events</a>
+        <div class="background background-overlay"></div>
+        <div class="services-list__content">
+          <h2 class="services-list__heading service-heading">{{ service.heading }}</h2>
+          <div class="services-list__body" v-html="service.html">
+          </div>
+          <a class="services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a>
         </div>
       </li>
     </ul>
@@ -57,11 +34,171 @@ export default {
 
   data() {
     return {
+      services: [
+        {
+          'heading': 'Portraits',
+          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
+          'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
+          'linkUrl': '#',
+        },
+        {
+          'heading': 'Dance',
+          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
+          'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
+          'linkUrl': '#',
+        },
+        {
+          'heading': 'Music',
+          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
+          'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
+          'linkUrl': '#',
+        },
+        {
+          'heading': 'Events',
+          'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
+          'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
+          'linkUrl': '#',
+        },
+      ]
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.services-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+  .services-list__item {
+    $min-height: 32rem;
+    $overlap: 4rem;
+    $padding-vertical: 2rem;
+    $color-overlay: $color__neutral-200;
+
+    position: relative;
+    display: block;
+    min-height: $min-height;
+    padding: $overlap + $padding-vertical 2rem $overlap;
+    margin-top: 0;
+    margin-bottom: -1 * $overlap;
+
+    background-color: $color__neutral-200;
+    font-size: 1rem;
+
+    &:nth-child(odd) {
+      clip-path: polygon(0 0, 100% 0, 100% calc(100% - #{$overlap}), 0 100%);
+
+      .background-overlay {
+        background: linear-gradient(
+                      to right,
+                      rgba($color-overlay, .1),
+                      rgba($color-overlay, 1) 75%
+                    );
+      }
+
+      .services-list__heading {
+        text-align: right;
+      }
+
+      .services-list__body {
+        align-self: flex-end;
+        text-align: right;
+      }
+    }
+
+    &:nth-child(even) {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$overlap}));
+      .background-overlay {
+        background: linear-gradient(
+                      to left,
+                      rgba($color-overlay, .1),
+                      rgba($color-overlay, 1) 75%
+                    );
+      }
+
+      .background-image {
+        left: auto;
+        right: 0;
+      }
+
+      .services-list__gallery-link {
+        left: auto;
+        right: 2rem;
+      }
+    }
+
+    &:first-child {
+    min-height: $min-height - $overlap;
+      padding-top: $padding-vertical;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: $padding-vertical;
+      clip-path: none;
+    }
+  }
+
+  .services-list__img {
+    display: none;
+    position: absolute;
+    height: 20em;
+    width: auto;
+    bottom: 0;
+    right: 0;
+    opacity: .4;
+  }
+
+  .services-list__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 20em;
+  }
+
+  .services-list__body {
+    width: 100%;
+
+    @media (min-width: $bp__layout) {
+      width: 80%;
+    }
+    
+    @media (min-width: 70em) {
+      width: 50%;
+    }
+  }
+
+  .services-list__gallery-link {
+    position: absolute;
+    bottom: 3rem;
+    left: 2rem;
+  }
+
+.background {
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+
+}
+
+.background-image {
+  // opacity: .3;
+  background-size: cover;
+  filter: grayscale(.7);
+  width: 75%;
+}
+
+.service-heading {
+  @include font-title();
+  color: $color__neutral-900;
+  font-size: 2.0em;
+  // text-transform: uppercase;
+}
 </style>