Homepage details

epixa · Dec 13, 2015 · d709b76 · d709b76
1 parent f9f67a1
commit d709b76
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 29 deletions.
diff --git a/_sass/_defaults.scss b/_sass/_defaults.scss
@@ -12,14 +12,44 @@ body {
   font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
+
+  @include media-query($on-laptop) {
+    padding-bottom: $spacing-unit;
+  }
 }
 
-.page {
-  background-color: $content-bg-color;
+/**
+ * Content positioning
+ */
+.content {
   margin: 0 auto;
   max-width: $max-content-width;
 }
 
+/**
+ * Page layout
+ */
+.page {
+  background-color: $content-bg-color;
+  padding-top: $spacing-unit;
+
+  @include media-query($on-laptop) {
+    margin-top: 2.5em;
+  }
+}
+
+.footnote {
+  color: $grey-color-dark;
+  font-size: 0.8em;
+  padding-top: 0.1em;
+  text-align: right;
+
+  a {
+    color: $grey-color-dark;
+    text-decoration: none;
+  }
+}
+
 aside {
   color: $grey-color;
 
@@ -65,6 +95,8 @@ aside {
 
       a {
         float: right;
+        line-height: 1.4;
+        margin-bottom: 0.5em;
         width: calc(100% - 1em);
       }
 
@@ -103,8 +135,3 @@ img {
     width: 0.7em;
   }
 }
-
-// page setup
-// fonts
-// colors
-// vertical flow
diff --git a/_sass/_home.scss b/_sass/_home.scss
@@ -3,7 +3,7 @@
  */
 
 
-$headshot-dimension:   4.5em;
+$headshot-dimension:   4em;
 $min-left-col-width:   20em;
 $min-social-col-width: 15em;
 
@@ -14,10 +14,32 @@ $left-col-heading-color: #6f6f6f;
  * Page
  */
 .page {
+  > header.col, > aside.col, > section.col {
+    margin-bottom: $spacing-unit;
+  }
+
+  aside.block {
+    text-align: justify;
+  }
+
   @include media-query($on-laptop) {
-    > header.col { width: $min-left-col-width; }
-    > section.col { float: right; width: calc(100% - #{$min-left-col-width}); }
-    > aside.col { clear: left; width: $min-left-col-width; }
+    padding-bottom: 2.5em - $spacing-unit;
+    padding-top: 2.5em;
+
+    > header.col {
+      padding-left: 2.5em;
+      width: $min-left-col-width;
+    }
+    > section.col {
+      float: right;
+      padding-right: 2.5em;
+      width: calc(100% - #{$min-left-col-width});
+    }
+    > aside.col {
+      clear: left;
+      padding-left: 2.5em;
+      width: $min-left-col-width;
+    }
   }
 }
 
@@ -43,7 +65,7 @@ $left-col-heading-color: #6f6f6f;
     // end hack for safari
 
     line-height: 1.2;
-    padding-left: $spacing-unit / 2;
+    padding-left: $spacing-unit / 3;
   }
 
   h1, h2 {
@@ -93,3 +115,57 @@ $left-col-heading-color: #6f6f6f;
     li, li:nth-child(even) { float: none; width: 100%; }
   }
 }
+
+/**
+ * Post list
+ */
+
+.post-list {
+  > section {
+    h3 {
+      color: $grey-color-light;
+      font-size: 1.5em;
+      letter-spacing: 0.1em;
+      text-align: right;
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        @extend %vertical-rhythm;
+      }
+
+      h1 {
+        a {
+          color: $text-color;
+          text-decoration: none;
+        }
+
+        a:active {
+          color: $red-color;
+        }
+      }
+
+      .date {
+        color: $grey-color;
+        font-size: 0.9em;
+        display: inline-block;
+        padding-right: 0.3em;
+        padding-top: 0.1em;
+        vertical-align: top;
+        text-transform: uppercase;
+      }
+    }
+
+    @include media-query($on-tablet) {
+      ul h1 { font-size: 1.25em; }
+    }
+  }
+
+  > section:first-of-type h3 { display: none; }
+
+  @include media-query($on-laptop) {
+    margin-top: 0.6em;
+  }
+}
diff --git a/css/styles.scss b/css/styles.scss
@@ -50,7 +50,3 @@ $on-laptop:         54em;
   "home",
   "document"
 ;
-
-.page > section {
-  background-color: #ccc;
-}
diff --git a/design.html b/design.html
@@ -16,7 +16,7 @@
 
   <body>
 
-    <div class="page row">
+    <div class="content page row">
 
       <header class="col">
         <div class="row">
@@ -53,9 +53,9 @@ <h2>Software Engineer, Elastic</h2>
         </div>
       </header>
 
-      <section class="col">
+      <section class="col post-list">
         <section>
-          <h3 class="article-list-header">2015</h3>
+          <h3>2015</h3>
           <ul class="article-list">
             <li>
               <h1><a href="/2013/02/pub-standards-lancaster.html">I'm back!</a></h1>
@@ -65,8 +65,8 @@ <h1><a href="/2013/02/pub-standards-lancaster.html">I'm back!</a></h1>
           </ul>
         </section>
         <section>
-          <h3 class="article-list-header">2013</h3>
-          <ul class="article-list">
+          <h3>2013</h3>
+          <ul>
             <li>
               <h1><a href="/2013/02/pub-standards-lancaster.html">Pub Standards Lancaster</a></h1>
               <span class="date">Feb 2013</span>
@@ -75,8 +75,8 @@ <h1><a href="/2013/02/pub-standards-lancaster.html">Pub Standards Lancaster</a><
           </ul>
         </section>
         <section>
-          <h3 class="article-list-header">2012</h3>
-          <ul class="article-list">
+          <h3>2012</h3>
+          <ul>
             <li>
               <h1><a href="/2013/02/pub-standards-lancaster.html">How PHP is Broken and How It Can Be Fixed</a></h1>
               <span class="date">Aug 2012</span>
@@ -91,7 +91,7 @@ <h1><a href="/2013/02/pub-standards-lancaster.html">How to Stay Productive When
         </section>
       </section>
 
-      <aside class="col about">
+      <aside class="col block">
         <h1>About</h1>
         <p>
           I lead the UX Engineering team at Engine Yard, write a lot of JavaScript,
@@ -101,7 +101,7 @@ <h1>About</h1>
         </p>
       </aside>
 
-      <aside class="col projects">
+      <aside class="col">
         <h1>Projects</h1>
         <ul>
           <li><i class="icon icon-small">{% include icon-right-caret.svg %}</i><a href="https://github.com/epixa/epixa-resource">epixa-resource - Memoized REST model mapping for angular.js</a></li>
@@ -115,10 +115,12 @@ <h1>Projects</h1>
 
     </div>
 
-    <div class="footnote">
-      Icons by <a href="http://www.flaticon.com/authors/dave-gandy" title="Dave Gandy" target="_blank">Dave Gandy</a>
-      - <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC BY 3.0</a>
-    </div>
+    <footer class="content">
+      <div class="footnote">
+        Icons by <a href="http://www.flaticon.com/authors/dave-gandy" target="_blank">Dave Gandy</a>
+        - <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>
+      </div>
+    </footer>
 
   </body>