John Guidry avatar John Guidry committed bdb7fe7

Shape into more blog-like shape with distinguishable header, footer, and evenly spaced body text.

Comments (0)

Files changed (4)

content/assets/css/stylesheet.scss

 @import "compass/reset";
 @import "compass/typography";
+@import "compass/layout/sticky-footer";
 @import "960/grid";
 
+@include sticky-footer(200px,'#wrapper','#push-footer','#base');
+
+$base-font-size: 14px;
+$base-line-height: 20px;
+
+$bg-color: #343838;
+
 body {
-  @include grid-container;
-
+  @include establish-baseline;
   font-family: 'Crimson Text', arial, serif;
-  font-size: 16px;
-}
-
-@mixin all-header { 
-  font-family: 'Orbitron', arial, serif;
-}
-h1 {
-  @include all-header;
-  font-size: 350%;
-}
-h2 {
-  @include all-header;
+  
+  background-color: #fcfcf3;
 }
 li {
   list-style-type: disc;
 }
 
 #header {
-  @include grid(12);
+  background-color: $bg-color;
+}
+#logo { 
+  padding: 1em 2em;
 
-  height: 75px;
-  padding: 55px 0 35px 0;
-  margin: 0;
+  a { 
+    @include adjust-font-size-to(42px);  
+    @include unstyled-link;
+  
+    font-family: 'Monofett', cursive;
+    color: #00b4cc;
+  }
 }
-#wrapper { 
-  @include grid(12)
+#sub-header {}
+.subheader-color-bar { 
+  width: 100%;
+  height: 10px;
 }
-#sub-header { 
-  padding: 10px 20px;
+.subcolor-1 { background-color: #005F6B; }
+.subcolor-2 { background-color: #008C9E; }
+.subcolor-3 { background-color: #00DFFC; }
+
+#wrapper {
+  @include clearfix;
+}
+#content { 
+  @include grid-container;
+}
+
+.entry {
+  @include clearfix;
+  @include rhythm(1,0,0,1);
 }
 
 .left-col {
   @include grid(4);
   @include alpha;
-
-  padding-bottom: 2em;
 }
 
 .post-title {
-  font-size: 32px;
+  @include adjust-font-size-to(20px);
+  @include rhythm;
+  font-weight: 600;
+  font-style: italic;
   text-align: right;
+
+  a { @include unstyled-link; }
 }
 .post-details {
-  @include all-header;
-  font-size: 12px;
+  @include adjust-font-size-to(12px);
+  @include rhythm;
   text-align: right;
 }
 
-.post-body {
+.post-summary {
   @include grid(8);
   @include omega;
 
-  padding-bottom: 2em;
+  p {  
+    @include grid(8); 
+    @include rhythm;
+    @include adjust-font-size-to(14px);
+  }
+  
+  ul {
+    @include grid(7);
+    @include grid-push(1);
+    @include rhythm;
+    @include adjust-font-size-to(14px);
+  }
+
+  pre {
+    @include grid(4);
+    @include grid-push(2);
+    @include rhythm;
+  }
+
+  code {
+    @include adjust-font-size-to(13px);
+    font-family: 'Inconsolata', sans-serif;
+  }
 }
-.post-body p {
+
+.post-title-featured {
   @include grid(8);
-  padding: .5em 0;
+  @include grid-push(2);
+  @include adjust-font-size-to(32px);
+  @include rhythm;
+  font-weight: 600;
+  font-style: italic;
+  text-align: center; 
 }
-.post-body ul {
-  @include grid(7);
-  @include grid-push(1);
-  padding: .5em 0;
+.post-details-featured {
+  @include grid(6);
+  @include grid-push(3);
+  @include adjust-font-size-to(14px);
+  @include rhythm;
+  text-align: center; 
 }
-.post-body pre {
-  @include grid(4);
-  @include grid-push(2);
 
+.post-body {
+  @include grid(12);
+  @include rhythm(1); 
+
+  p { 
+    @include grid(12);
+    @include rhythm;
+    @include adjust-font-size-to(14px);
+  }
+  
+  ul {
+    @include grid(8);
+    @include grid-push(2);
+    @include rhythm;
+    @include adjust-font-size-to(14px);
+  }
+
+  pre {
+    @include grid(6);
+    @include grid-push(3);
+    @include rhythm;
+  }
+
+  code {
+    @include adjust-font-size-to(13px);
+    font-family: 'Inconsolata', sans-serif;
+  }
 }
-.post-body code {
-  font-family: 'Inconsolata', sans-serif;
+
+
+#base {
+  background-color: $bg-color;
 }

layouts/default.haml

           :media => 'screen'}
     %link{:rel => 'stylesheet',
           :type => 'text/css',
-          :href => 'http://fonts.googleapis.com/css?family=Orbitron:500&v1'}
+          :href => 'http://fonts.googleapis.com/css?family=Monofett&v2'}
     %link{:rel => 'stylesheet',
           :type => 'text/css',
           :href => 'http://fonts.googleapis.com/css?family=Crimson+Text:400,600italic&v2'}
           :href => 'http://fonts.googleapis.com/css?family=Inconsolata&v2'}
   %body
     #header
-      %h1
+      #logo
         %a{:href => '/'} a novel spin
+    #sub-header
+      %div{:class => ['subheader-color-bar','subcolor-1']}
+      %div{:class => ['subheader-color-bar','subcolor-2']}
+      %div{:class => ['subheader-color-bar','subcolor-3']}
     #wrapper
-      #sub-header
-        %hr
       #content
         ~ yield
+      #push-footer
+    #base
+      #sub-footer
+        %div{:class => ['subheader-color-bar','subcolor-3']}
+        %div{:class => ['subheader-color-bar','subcolor-2']}
+        %div{:class => ['subheader-color-bar','subcolor-1']}
+      #footer

layouts/post.haml

-%h1
+%h1.post-title-featured
   = @item[:title]
-%h2
-  Written at: 
+%span.post-details-featured
   = @item[:created_at]
-%p
+.post-body
   ~ yield

layouts/post_summary.haml

 %div.entry
   .left-col
-    %h2.post-title
+    %h1.post-title
       = link_to(@item[:title], @item)
-    %p.post-details
+    .post-details
       %span
         = @item[:created_at]
-  .post-body
+  .post-summary
     ~ yield
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.