blog design

asterism612 · Jan 24, 2014 · 6792136 · 6792136
1 parent 939dc89
commit 6792136
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 50 deletions.
diff --git a/_/css/style.css b/_/css/style.css
diff --git a/_/sass/application/_base.scss b/_/sass/application/_base.scss
@@ -11,6 +11,7 @@ body {
 
 h1, h2, h3, h4 {
   line-height: 1.5;
+  font-weight: 400;
 }
 
 .hover {

diff --git a/_/sass/application/modules/_article.scss b/_/sass/application/modules/_article.scss
@@ -43,18 +43,6 @@
   }
 }
 
-.article-date {
-  @include font-height(12px, 14px);
-  display: inline-block;
-  color: #AAA;
-  margin: 0 10px 16px 0;
-}
-
-.article-author {
-  @include font-height(12px, 14px);
-  display: inline-block;
-  margin: 0 0 16px;
-}
 
 .article-tags {
   color: #AAA;

diff --git a/_/sass/application/modules/_blog.scss b/_/sass/application/modules/_blog.scss
@@ -5,24 +5,53 @@
 }
 
 .blog-post {
-  margin-top: 27px;
-  &:first-child {
-    margin: 0;
+  margin-bottom: 34px;
+
+  .blog-title {
+    text-transform: uppercase;
+    margin-bottom: 8px;
+
+    a {
+      @extend %extended-pointer-area;
+      @extend %link;
+      @extend %link_style_grey-red;
+      color: #48484A;
+    }
   }
-}
 
-.blog-date {
-  @include font-height(12px, 14px);
-  color: #AAA;
-  margin: 0 0 7px;
+  .blog-meta {
+    color: #AAA;
+
+    .blog-meta-date {
+      display: inline-block;
+      margin-right: 4px;
+    }
+
+    .blog-meta-author {
+      display: inline-block;
+      margin: 0;
+
+      .__red {
+        color: #C22030;
+      }
+    }
+  }
 }
 
-.blog-title {
-  text-transform: uppercase;
+.blog-header {
+  padding: 20px 0 !important;
+
+  .blog-header-left {
+    margin: 0;
 
-  > a {
-    @extend %extended-pointer-area;
-    @extend %link;
-    @extend %link_style_grey-red;
+    a {
+      color: #666;
+      text-decoration: none;
+    }
   }
-}
+
+  .blog-header-right {
+    line-height: 40px;
+  }
+}
+
diff --git a/_/sass/application/modules/_diptych.scss b/_/sass/application/modules/_diptych.scss
@@ -8,6 +8,11 @@
     padding: 35px 0;
   }
 
+  &.__bordered {
+    border-top: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+  }
+
   h2 {
     @include font-height(22px, 26px);
     color: #48484a;
@@ -31,4 +36,4 @@
   &:first-child {
     margin-right: 8%;
   }
-}
+}
diff --git a/_/sass/application/modules/_facebook.scss b/_/sass/application/modules/_facebook.scss
@@ -0,0 +1,5 @@
+.facebook {
+  margin-bottom: 24px;
+  border: 1px solid #C5C6C6;
+  border-radius: 2px;
+}
diff --git a/_/sass/application/modules/_hell.scss b/_/sass/application/modules/_hell.scss
@@ -18,17 +18,18 @@
 
   > a {
     @include size(42px);
-    background: #a8aaad;
+    background: #37afdb;
     border-radius: 21px;
     box-shadow: $base-box-shadow, inset 0 1px 2px #6e6f71;
     float: left;
     line-height: 42px;
     text-align: center;
     margin: -11px 0 -11px 27px;
+    @include transition(all 0.15s);
 
     &:hover {
-      background: #37afdb;
       box-shadow: $base-box-shadow;
+      @include transform(scale(1.15));
     }
 
     &:active {

diff --git a/_includes/blog/facebook.html b/_includes/blog/facebook.html
@@ -0,0 +1,19 @@
+
+<div id="fb-root"></div>
+
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=486035601506024";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<div class="facebook fb-like-box"
+  data-href="http://www.facebook.com/Startersquad"
+  data-colorscheme="light"
+  data-show-faces="true"
+  data-header="false"
+  data-stream="false"
+  data-show-border="false"
+></div>
diff --git a/_includes/blog/headline.html b/_includes/blog/headline.html
@@ -1,5 +1,10 @@
-<div class="headline">
-  <h1>Things we can't keep to ourselves</h1>
-  <!--<h1>This is how we roll</h1>
-  <h1>Too good to be true</h1>-->
-</div>
+<div class="diptych diptych-inset __bordered blog-header">
+  <div class="arkush diptych-inner">
+    <h1 class="blog-header-left pull-left">
+      <a href="/blog">Our blog about technology and creativity</a>
+    </h1>
+    <div class="blog-header-right pull-right">
+      {% include social.html %}
+    </div>
+  </div>
+</div>
diff --git a/_includes/blog/post.html b/_includes/blog/post.html
@@ -1,4 +1,9 @@
 <div class="blog-post">
-  <div class="blog-date">{{ post.date | date: '%B %d, %Y' }}</div>
-  <div class="blog-title"><a class="link_complex" href="{{ post.url }}"><u>{{ post.title }}</u></a></div>
+  <h2 class="blog-title">
+    <a class="link_complex" href="{{ post.url }}">{{ post.title }}</a>
+  </h2>
+  <div class="blog-meta">
+    <span class="blog-meta-date">{{ post.date | date: '%A, %B %d, %Y' }}</span>
+    <span class="blog-meta-author">by <span class="__red">{{ post.author }}</span></span>
+  </div>
 </div>
diff --git a/_includes/hell.html b/_includes/hell.html
@@ -1,12 +1,7 @@
 <div class="hell">
   <div class="arkush clearfix">
     <div class="pull-left">
-      Find us on web:
-      <div class="hell-social">
-        <a href="//twitter.com/StarterSquad"><span class="asset asset-twitter">Twitter,</span></a>
-        <a href="//github.com/StarterSquad"><span class="asset asset-github">GitHub,</span></a>
-        <a href="//coderwall.com/team/startersquad"><span class="asset asset-coderwall">Coderwall</span></a>
-      </div>
+      {% include social.html %}
     </div>
     <div class="hell__legal pull-right">
       ©&nbsp;2013

diff --git a/_includes/social.html b/_includes/social.html
@@ -0,0 +1,6 @@
+Find us on web:
+<div class="hell-social">
+  <a href="//twitter.com/StarterSquad"><span class="asset asset-twitter">Twitter,</span></a>
+  <a href="//github.com/StarterSquad"><span class="asset asset-github">GitHub,</span></a>
+  <a href="//coderwall.com/team/startersquad"><span class="asset asset-coderwall">Coderwall</span></a>
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,19 +4,26 @@
 force_menu_link: true
 ---
 
+{% include blog/headline.html %}
+
 <div class="arkush">
-  {% include blog/headline.html %}
   <table class="layout-table">
     <col width="72%">
     <col width="9%">
     <col width="19%">
     <tr>
       <td class="layout-table-cell">
         <div class="article text-bound">
-          <div class="article-date">{{ page.date | date: '%B %d, %Y' }}</div>
-          <div class="article-author">by {{ page.author }}</div>
-          <h1>{{page.title}}</h1>
+          <div class="blog-post">
+            <h1 class="blog-title">{{ page.title }}</h1>
+            <div class="blog-meta">
+              <span class="blog-meta-date">{{ page.date | date: '%A, %B %d, %Y' }}</span>
+              <span class="blog-meta-author">by <span class="__red">{{ page.author }}</span></span>
+            </div>
+          </div>
+
           {{ content }}
+
           <div class="article-tags">
             <b>Tags:</b>
             {% for tag in page.tags %}
@@ -34,6 +41,7 @@ <h1>{{page.title}}</h1>
       </td>
       <td class="layout-table-cell"></td>
       <td class="layout-table-cell">
+        {% include blog/facebook.html %}
         {% include blog/tags.html %}
       </td>
     </tr>

diff --git a/blog/index.html b/blog/index.html
@@ -4,8 +4,9 @@
 menu_index: 3
 ---
 
+{% include blog/headline.html %}
+
 <div class="arkush">
-  {% include blog/headline.html %}
   <table class="layout-table">
     <col width="72%">
     <col width="9%">
@@ -20,6 +21,7 @@
       </td>
       <td class="layout-table-cell"></td>
       <td class="layout-table-cell">
+        {% include blog/facebook.html %}
         {% include blog/tags.html %}
       </td>
     </tr>

diff --git a/blog/tags.html b/blog/tags.html
@@ -3,8 +3,9 @@
 title: Blog Tags
 ---
 
+{% include blog/headline.html %}
+
 <div class="arkush">
-  {% include blog/headline.html %}
   <table class="layout-table">
     <col width="72%">
     <col width="9%">
@@ -23,6 +24,7 @@ <h2 id="{{ tag[0] }}">{{ tag[0] }}</h2>
       </td>
       <td class="layout-table-cell"></td>
       <td class="layout-table-cell">
+        {% include blog/facebook.html %}
         <div class="tags">
           <h2>Tags</h2>
           <ul>