From cc9677da77e844c5618125926118c5565579a1d7 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 27 Jan 2019 15:52:30 +0000
Subject: [PATCH] about styling complete

---
 assets/scss/_base.scss     |  19 +++++-
 assets/scss/style.scss     |   4 ++
 components/ContentPage.vue |  22 ++++--
 pages/about.vue            | 134 +++++++++++++++++++++++++++++++------
 pages/services.vue         |   3 +-
 5 files changed, 153 insertions(+), 29 deletions(-)

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 903e96c..a7030c5 100644
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -10,12 +10,27 @@ html {
 body {
   font-family: 'Raleway', sans-serif;
   font-size: 100%;
+  line-height: 1.6;
 }
 
 a {
   font-family: 'Montserrat', sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Montserrat', sans-serif;
+.content {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', sans-serif;
+    margin: 0 0 3rem;
+    text-transform: none;
+  }
+
+  h2, h3, h4, h5, h6 {
+    color: $color__neutral-400;
+  }
+
+  blockquote {
+    background-color: initial;
+    @include font-cursive();
+    border: 0;
+  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 12f2c7d..fecf12c 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -87,3 +87,7 @@
   }
 }
 
+.background-tint {
+  background-color: rgba($color__primary-100, .7);
+}
+
diff --git a/components/ContentPage.vue b/components/ContentPage.vue
index ef1ca0f..b81c199 100644
--- a/components/ContentPage.vue
+++ b/components/ContentPage.vue
@@ -49,7 +49,7 @@ $z-index-top: 10;
     padding:  0 0 0 $site-menu__header-width;
   }
 
-  background-color: rgba(black, .1); // TEMP
+  background-color: $color__neutral-100;
 }
 
 .content-container {
@@ -75,13 +75,13 @@ $z-index-top: 10;
   top: 0;
   right: 0;
 
-  padding: .5rem;
+  padding: .5rem 1rem 2rem;
 
   @media (min-width: $bp__layout) {
     width: 50%;
     padding: 1rem;
 
-    background-color: rgba(0, 0, 0, .3);
+    background-color: rgba(0, 0, 0, .5);
   }
 
   color: #fff; // TEMP
@@ -90,18 +90,24 @@ $z-index-top: 10;
 .page-heading {
   z-index: $z-index-top;
   position: relative;
-  margin: 2rem 1rem 1rem 2rem;
+  margin: 1rem;
 
   @media (min-width: $bp__layout) {
     width: 14em;
     max-width: calc(50% - #{$site-menu__header-width} - 3rem);
+    margin: 2rem 1rem 1rem 2rem;
   }
 }
 
 .title {
   @include font-title();
   color: $color__neutral-900;
-  font-size: 3.7vw;
+  text-align: center;
+
+  @media (min-width: $bp__layout) {
+    font-size: 3.7vw;
+    text-align: left;
+  }
 
   @media (min-width: 90em) {
     font-size: 3.5rem;
@@ -115,5 +121,11 @@ $z-index-top: 10;
   height: 100%;
   top: 0;
   left: 0;
+
+  opacity: .5;
+
+  @media (min-width: $bp__layout) {
+    opacity: 1;
+  }
 }
 </style>
diff --git a/pages/about.vue b/pages/about.vue
index 08a09ab..0696e2c 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,34 +1,47 @@
 <template>
-  <ContentPage heading="The About Page Heading">
-    <h2>I Imagine Myself</h2>
-    <blockquote><p>"As a photographic artist, my creative pursuit is to escape the attempts to categorize, characterize, compartmentalize, explain, or limit my photographic expression. It is always pleasing to see how observers respond with delight to the ultimate visualizations of my quest. My fondest wish is to pursue my life as a photographer, unbridled and always with a resolve to improve and be the best I can, with a constant yearning to be better."</p></blockquote>
-    <ul class="about-list">
-      <li>I imagine myself peering from behind a photographer's blind, always observing, but rarely participating.</li>
-      <li>I have an ephemeral sensation of being a camouflaged moth on a tree.</li>
-      <li>I imagine seeing my life from that perspective, that tree, as a solitary instant in eternity.</li>
-      <li>Preserving life's moments and sharing them, makes the most, I think, of my photographic proclivity.</li>
-      <li>I get great satisfaction from the responses viewers have to these images of my perceived realities.</li>
-      <li>As an artist and photographer, this is my mantra.</li>
-      <li>I am convinced that my creative potential escapes the propensity to categorize, characterize, compartmentalize, explain, or limit my photographic expression.</li>
-      <li>I will succeed in a career as a photographer, and I always resolve to improve, and be the best I can; however, I want to be much better than that.</li>
-    </ul>
-    <h2>The Essence of the Image</h2>
-    <p>The photographer Marc Leopold was born in Chicago, Illinois in 1964. He credits his artistry in photography to the benevolence of renowned mentors, and to his own constant search for the resources, intricacies and techniques that capture the essence of the image.</p>
-    <p>While Marc's work tends toward nature and representational photography, he also uses his talents in both formal and commercial situations. He works, there, to achieve the same essence that he strives for when shooting nature.</p>
-    <p>Marc's images are in many private collections and corporate and educational institutions. They have also appeared in a number of publications. His photographs appear in several books, including 'Two Weeks the Raven Sings', by David Reston, and in 'Once we Talk', by Jayne deVeres. Marc has also published in a wide variety of magazines and newspapers, including The International Review of Irish American Art, Erik Tweeds' Two Worlds Magazine, EVE Magazine, Parfolio, Essence, The Chicago Tribune, Chicago Derry News, Business News Today, and One Day Journal.</p>
-    <p>In addition to this media exposure, Marc has exhibited at The Chicago College of Art, The Irish American Museum in Detroit, The Sur Dez Gallery in San Antonio, Phoenix City Gallery in Arizona, Wellner Department stores nationwide, Torren Gallery in California, and The Tide Gallery in Boston, and elsewhere.</p>
-    <p>Marc's artistic philosophy is based on his ability to capture a fleeting moment, a solitary instant in eternity, where he feels almost transparent, like a camouflaged moth in the midst of a lush green forest, defining for posterity through his photography an elusive moment in life, captured to share with others.</p>
+  <ContentPage heading="About Me" class="about">
+    <div class="about-content">
+      <h2 class="heading heading-top">I Imagine Myself</h2>
+      <blockquote class="quote">
+        <p class="quote-text">"As a photographic artist, my creative pursuit is to escape the attempts to categorize, characterize, compartmentalize, explain, or limit my photographic expression. It is always pleasing to see how observers respond with delight to the ultimate visualizations of my quest. My fondest wish is to pursue my life as a photographer, unbridled and always with a resolve to improve and be the best I can, with a constant yearning to be better."</p>
+      </blockquote>
+      <ul class="about-list">
+        <li class="about-list__item">I imagine myself peering from behind a photographer's blind, always observing, but rarely participating.</li>
+        <li class="about-list__item">I have an ephemeral sensation of being a camouflaged moth on a tree.</li>
+        <li class="about-list__item">I imagine seeing my life from that perspective, that tree, as a solitary instant in eternity.</li>
+        <li class="about-list__item">Preserving life's moments and sharing them, makes the most, I think, of my photographic proclivity.</li>
+        <li class="about-list__item">I get great satisfaction from the responses viewers have to these images of my perceived realities.</li>
+        <li class="about-list__item">As an artist and photographer, this is my mantra.</li>
+        <li class="about-list__item">I am convinced that my creative potential escapes the propensity to categorize, characterize, compartmentalize, explain, or limit my photographic expression.</li>
+        <li class="about-list__item">I will succeed in a career as a photographer, and I always resolve to improve, and be the best I can; however, I want to be much better than that.</li>
+      </ul>
+      <h2 class="heading">The Essence of the Image</h2>
+      <p>The photographer Marc Leopold was born in Chicago, Illinois in 1964. He credits his artistry in photography to the benevolence of renowned mentors, and to his own constant search for the resources, intricacies and techniques that capture the essence of the image.</p>
+      <p>While Marc's work tends toward nature and representational photography, he also uses his talents in both formal and commercial situations. He works, there, to achieve the same essence that he strives for when shooting nature.</p>
+      <p>Marc's images are in many private collections and corporate and educational institutions. They have also appeared in a number of publications. His photographs appear in several books, including 'Two Weeks the Raven Sings', by David Reston, and in 'Once we Talk', by Jayne deVeres.</p>
+      <p>Marc has also published in a wide variety of magazines and newspapers, including The International Review of Irish American Art, Erik Tweeds' Two Worlds Magazine, EVE Magazine, Parfolio, Essence, The Chicago Tribune, Chicago Derry News, Business News Today, and One Day Journal.</p>
+      <p>In addition to this media exposure, Marc has exhibited at The Chicago College of Art, The Irish American Museum in Detroit, The Sur Dez Gallery in San Antonio, Phoenix City Gallery in Arizona, Wellner Department stores nationwide, Torren Gallery in California, and The Tide Gallery in Boston, and elsewhere.</p>
+      <p>Marc's artistic philosophy is based on his ability to capture a fleeting moment, a solitary instant in eternity, where he feels almost transparent, like a camouflaged moth in the midst of a lush green forest, defining for posterity through his photography an elusive moment in life, captured to share with others.</p>
+    </div>
+    <BackgroundImageLoader slot="background"
+                           class="background"
+                           image-url="https://via.placeholder.com/1920x1080"
+    >
+      <div slot="overlay" class="background-tint background-overlay"></div>
+    </BackgroundImageLoader>
   </ContentPage>
 </template>
 
 <script>
 import ContentPage from '@/components/ContentPage'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
 
   components: {
-    ContentPage
+    ContentPage,
+    BackgroundImageLoader,
   },
 
   data() {
@@ -39,5 +52,86 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.about {
+  font-size: 1rem;
+}
+
+.about-content {
+  color: $color__neutral-800;
+  text-shadow: 0 0 3px #000;
+
+  @media (min-width: 60em) {
+    padding: 1rem 2rem;
+  }
+}
+
+.about-content .quote {
+  font-size: 1.4em;
+  margin-bottom: 1.5rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.quote-text {
+  color: $color__neutral-700;
+  text-shadow: 0 0 3px #000;
+}
+
+.heading {
+  color: $color__neutral-900;
+  font-weight: 300;
+  text-align: center;
+}
+
+  .heading-top {
+    margin-bottom: 1.5rem;
+  }
+
+.content .about-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  font-size: 1.2em;
+  line-height: 1.2;
+  margin-bottom: 4.5rem;
+}
+
+  .about-list__item {
+    position: relative;
+    padding: 1.25rem 0 1.25rem;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 2rem;
+      height: 1px;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+
+      background-color: rgba($color__neutral-500, .6);
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+.background-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
 </style>
 
diff --git a/pages/services.vue b/pages/services.vue
index 4a3abe5..8b570a8 100644
--- a/pages/services.vue
+++ b/pages/services.vue
@@ -6,7 +6,7 @@
                               :image-urls="backgroundImageUrls"
                               :active-index="activeIndex"
     >
-      <div slot="overlay" class="background preloader-overlay"></div>
+      <div slot="overlay" class="background-tint background preloader-overlay"></div>
     </BackgroundImagePreloader>
 
     <ul class="services-list">
@@ -245,7 +245,6 @@ export default {
 
 .preloader-overlay {
   z-index: 10;
-  background-color: rgba($color__primary-100, .7);
 }
 </style>