More progress towards the blog.

exciting-io · Nov 4, 2013 · c17b161 · c17b161
1 parent 11f1bda
commit c17b161
Show file tree

Hide file tree

Showing 22 changed files with 290 additions and 118 deletions.
diff --git a/_assets/stylesheets/blog.scss b/_assets/stylesheets/blog.scss
@@ -0,0 +1,49 @@
+#blog {
+  .content {
+    @include make-row();
+
+    .posts {
+      @include make-sm-column(12);
+      @include make-md-column(8);
+      @include make-lg-column(7);
+    }
+  }
+
+  .posts {
+    ul {
+      list-style: none;
+      padding-left: 0;
+
+      .post {
+        margin-top: $line-height-computed;
+        margin-bottom: $line-height-computed;
+
+        h1 {
+          @include font-heading;
+          font-style: normal;
+          margin-top: 0;
+          font-size: $font-size-base * 1.6;
+        }
+
+        .date {
+          @include font-body-italic;
+          font-size: $font-size-small;
+          line-height: $font-size-small;
+          margin-left: $font-size-small;
+          margin-bottom: $font-size-small;
+          color: $gray-light;
+        }
+
+        .excerpt {
+          a {
+            color: $text-colour;
+
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/_assets/stylesheets/footer.scss b/_assets/stylesheets/footer.scss
@@ -7,9 +7,6 @@ footer {
   font-size: $font-size-small;
 
   p {
-    // @include make-sm-column(6);
-    // @include make-md-column(5);
-    // @include make-lg-column(4);
     margin-bottom: 0;
   }
 }
diff --git a/_assets/stylesheets/home.scss b/_assets/stylesheets/home.scss
@@ -1,13 +1,4 @@
 #home {
-  .strapline-row {
-    @include make-row();
-
-    .strapline {
-      @include make-md-column(10);
-      @include make-lg-column(8);
-    }
-  }
-
   .hero, .content {
     @include make-row();
   }
@@ -44,18 +35,13 @@
     @include font-body-italic;
   }
 
-  .strapline {
-    @include font-body-italic;
-  }
+  .hero {
+    margin-bottom: $line-height-computed;
 
-  .strapline {
-    @include font-body-italic;
-    color: $gray;
-    opacity: 0.7;
-    margin-bottom: 0;
-  }
+    @media (min-width: $screen-sm) {
+      margin-bottom: 0;
+    }
 
-  .hero {
     .product-image {
       text-align: center;
       margin-bottom: $font-size-base;
@@ -80,6 +66,21 @@
   }
 
   .content {
+    h2 {
+      color: $gray-light;
+      opacity: 0.7;
+      border-top: 1px solid $gray-lighter;
+      margin-top: $line-height-computed / 1.3;
+      margin-bottom: 0;
+
+      span {
+        background-color: white;
+        position: relative;
+        top: -($line-height-computed / 1.3);
+        padding-right: $line-height-computed / 2;
+      }
+    }
+
     .work {
       ul {
         li {

diff --git a/_assets/stylesheets/main.scss b/_assets/stylesheets/main.scss
@@ -11,6 +11,7 @@ $font-size-base: 20px;
 @import 'banner';
 @import 'projects';
 @import 'home';
+@import 'blog';
 
 .content {
   clear: both;
@@ -36,24 +37,13 @@ a {
 }
 
 section, article {
-  margin-top: $line-height-computed;
-  margin-bottom: $line-height-computed * 2;
-
-  &:last-child {
-    margin-bottom: $line-height-computed;
-  }
-
-  @media (min-width: $screen-xs) {
-    margin-bottom: 0;
-  }
-
   h1 {
     @include font-heading;
+    font-size: 2em;
   }
 
   h2 {
     @include font-body-italic;
-    color: $gray-light;
     opacity: 0.7;
     font-size: 1.4em;
     border-top: 1px solid $gray-lighter;
@@ -67,4 +57,38 @@ section, article {
       padding-right: $line-height-computed / 2;
     }
   }
+
+  h3 {
+    @include font-heading;
+    font-size: 1.2em;
+  }
+}
+
+section {
+  margin-top: $line-height-computed;
+  margin-bottom: $line-height-computed * 2;
+
+  &:last-child {
+    margin-bottom: $line-height-computed;
+  }
+
+  @media (min-width: $screen-xs) {
+    margin-bottom: 0;
+  }
+}
+
+.strapline-row {
+  @include make-row();
+
+  .strapline {
+    @include make-md-column(10);
+    @include make-lg-column(8);
+  }
+
+  .strapline {
+    @include font-body-italic;
+    color: $gray;
+    opacity: 0.7;
+    margin-bottom: 0;
+  }
 }
diff --git a/_assets/stylesheets/posts.scss b/_assets/stylesheets/posts.scss
@@ -1,23 +1,31 @@
-.post-container {
-  .meta {
-    font-style: italic;
-    margin-bottom: 2em;
-  }
+.post {
 
   article {
-    @include make-md-column(9);
+    @include make-sm-column(10);
+    @include make-md-column(8);
     @include make-lg-column(7);
   }
-}
 
-.post {
+  .date {
+    font-style: italic;
+    margin-bottom: 2em;
+  }
+
   h2 {
     border-top: 2px solid #eee;
-    padding: 0.5em 0;
+    padding: 1em 0;
   }
 
   img {
+    @include img-responsive;
     margin-top: ($line-height-computed / 2);
     margin-bottom: ($line-height-computed / 2);
   }
+
+  .footnotes {
+    margin-top: $line-height-computed;
+    padding-top: $line-height-computed;
+    border-top: 1px solid $gray-lighter;
+    font-size: $font-size-small;
+  }
 }
diff --git a/_assets/stylesheets/typography.scss b/_assets/stylesheets/typography.scss
@@ -1,22 +1,5 @@
 @mixin font-body() {
-  // 1
-  // font-family: 'Gentium Book Basic', serif;
-  // font-weight: 400;
-
-  // 2
   font-family: ff-tisa-web-pro;
-
-  // 3
-  // font-family: jubilat, serif;
-
-  // 4
-  // font-family: adelle, serif;
-
-  // 5
-  // font-family: ff-tisa-web-pro;
-
-  // 6
-  // font-family: ff-meta-serif-web-pro, serif;
 }
 
 @mixin font-body-italic() {
@@ -25,28 +8,7 @@
 }
 
 @mixin font-heading() {
-  // 1
-  // font-family: 'Open Sans', sans-serif;
-  // font-weight: 800;
-
-  // 2
-  // font-family: freight-sans-pro, sans-serif;
-  // font-weight: 900;
-  // font-style: normal;
-
-  // 3
   font-family: brandon-grotesque, sans-serif;
   font-weight: normal;
-
-  // 4
-  // font-family: proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif;
-
-  // 5
-  // font-family: futura-pt, Futura, sans-serif;
-
-  // 6
-  // font-family: brandon-grotesque, sans-serif;
-  // font-weight: 900;
-
   text-transform: uppercase;
 }
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,23 +1,15 @@
 ---
 layout: default
 ---
-<div class="post-container">
-  {% if page.banner_image_url %}
-    <div style="background-image: url('{{ page.banner_image_url }}');" class="banner">
-      <div class="container">
-        <h2>{{ page.title }}</h2>
-      </div>
-    </div>
-  {% endif %}
-  <div class="container">
+
+<main class="post container">
+  <div class="row">
     <article>
-      {% if page.banner_image_url == null %}
-        <h2>{{ page.title }}</h2>
-      {% endif %}
-      <p class="meta">{{ page.date | date_to_long_string }}</p>
+      <h1>{{ page.title }}</h1>
+      <p class="date">{{ page.date | date_to_long_string }}</p>
       <div class="post">
       {{ content }}
       </div>
     </article>
   </div>
-</div>
+</main>
diff --git a/_posts/2012-04-12-hello-printer.markdown b/_posts/2012-04-12-hello-printer.markdown
@@ -323,6 +323,6 @@ I am _sure_ you have better ideas for how to use an internet-enabled small print
 * [Source code](http://github.com/freerange/printer)
 
 
-[Timmy]: /timmy
+[Timmy]: http://gofreerange.com/timmy
 [hack]: http://en.wikipedia.org/wiki/Kludge
 [hackcircus]: http://enemyofchaos.wordpress.com/2011/06/21/hack-circus-for-interesting-11-thank-you/