Update example page to match documentation site

whmii · Jun 18, 2016 · 04e6e3b · 04e6e3b
1 parent 1accbb9
commit 04e6e3b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 72 deletions.
diff --git a/contrib/assets/cask-logo.svg b/contrib/assets/cask-logo.svg
diff --git a/contrib/stylesheets/_example.scss b/contrib/stylesheets/_example.scss
@@ -3,55 +3,50 @@
 
 .header {
   @include grid-row();
-  margin-bottom: 1em;
+  font-size: $small-font-size;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  margin-bottom: 0;
+  max-width: 1100px;
+  padding: $base-spacing $base-spacing 0;
 
   .title {
-    background-color: $base-font-color;
-    color: white;
-    font-size: 6.25rem;
+    float: left;
     margin-bottom: 0;
-    padding-bottom: 0.5rem;
-    text-align: center;
-
-    small {
-      display: block;
-      font-size: 1rem;
-      line-height: 1.5;
-      margin-bottom: 1rem;
-    }
-
-    a {
-      color: white;
-
-      &.contact {
-        margin: 0 0.75em;
-      }
-    }
   }
 
-  .description li {
-    border-bottom: $base-border;
-    padding: $small-spacing;
+  .logo {
+    display: block;
+    margin-right: $base-spacing;
+    margin-top: 5px;
+    width: 157px;
   }
+  a {
+    color: $base-font-color;
+    float: left;
+    padding: $base-spacing;
 
-  @media #{$small} {
-    display: flex;
-
-    .title {
-      @include grid-column($columns: 6);
+    &:hover {
+      color: $action-color;
     }
+  }
+}
 
-    .description {
-      @include grid-column($columns: 6);
-    }
+.hero {
+  color: $alt-font-color;
+  text-align: center;
+  margin: 80px 60px 40px;
+
+  h2 {
+    margin-bottom: $large-spacing;
   }
 }
 
 .example {
 
   .section-title {
     @include grid-row($max-width: null);
-    background-color: whitesmoke;
     line-height: 4;
     text-align: center;
     white-space: nowrap;
@@ -60,9 +55,7 @@
   .row {
     @include grid-row();
     background-color: $medium-gray;
-    margin-bottom: 1em;
-    padding-bottom: em(2);
-    padding-top: em(2);
+    margin-bottom: $base-spacing;
   }
 
   .content {
@@ -77,10 +70,11 @@
     color: $base-background-color;
     display: block;
     font-family: $monospace-font-family;
-    -webkit-font-smoothing: antialiased;
     line-height: 1.5em;
+    padding: 3px 0;
     text-align: center;
     white-space: nowrap;
+    -webkit-font-smoothing: antialiased;
 
     &::after {
       border-color: $light-gray;
@@ -121,6 +115,10 @@
 
   .col-6-collapse {
 
+    &:last-child {
+      border-right: 0;
+    }
+
     @media #{$small} {
       @include grid-column($columns: 6, $collapse: true);
     }
@@ -165,16 +163,16 @@
   .col-4-shift-1 {
 
     @media #{$small} {
-      @include grid-column($columns: 4);
-      @include grid-shift($shift: 4);
+      @include grid-column($columns: 5);
+      @include grid-shift($shift: 5);
     }
   }
 
   .col-4-shift-2 {
 
     @media #{$small} {
-      @include grid-column($columns: 4);
-      @include grid-shift($shift: -4);
+      @include grid-column($columns: 5);
+      @include grid-shift($shift: -5);
     }
   }
 

diff --git a/contrib/stylesheets/base/_typography.scss b/contrib/stylesheets/base/_typography.scss
@@ -1,8 +1,11 @@
 body {
+  -webkit-font-smoothing: antialiased;
   color: $base-font-color;
   font-family: $base-font-family;
   font-size: $base-font-size;
+  letter-spacing: 0.01em;
   line-height: $base-line-height;
+  margin: 0;
 }
 
 h1,
@@ -11,8 +14,10 @@ h3,
 h4,
 h5,
 h6 {
+  color: $alt-font-color;
   font-family: $heading-font-family;
-  font-size: $base-font-size;
+  font-size: $large-font-size;
+  font-weight: 500;
   line-height: $heading-line-height;
   margin: 0 0 $small-spacing;
 }

diff --git a/contrib/stylesheets/base/_variables.scss b/contrib/stylesheets/base/_variables.scss
@@ -4,27 +4,31 @@ $heading-font-family: $base-font-family;
 $monospace-font-family: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
 
 // Font Sizes
-$base-font-size: 1em;
+$base-font-size: 16px;
+$large-font-size: 30px;
+$small-font-size: 14px;
 
 // Line height
-$base-line-height: 1.5;
-$heading-line-height: 1.2;
+$base-line-height: 1.6;
+$heading-line-height: 1.1;
 
 // Other Sizes
 $base-border-radius: 3px;
-$base-spacing: $base-line-height * 1em;
-$small-spacing: $base-spacing / 2;
+$base-spacing: 15px;
+$small-spacing: 10px;
+$large-spacing: 20px;
 $base-z-index: 0;
 
 // Colors
-$blue: #477dca;
-$dark-gray: #333;
-$medium-gray: #999;
+$red: #E81B23;
+$dark-gray: #2d2d2d;
+$medium-gray: #4d4d4d;
 $light-gray: #ddd;
 
 // Font Colors
 $base-font-color: $dark-gray;
-$action-color: $blue;
+$alt-font-color: $medium-gray;
+$action-color: $red;
 
 // Border
 $base-border-color: $light-gray;

diff --git a/contrib/views/index.haml b/contrib/views/index.haml
@@ -12,27 +12,18 @@
   %body
     %header.header
       %h1.title
-        Cask
-        %small
-          A simple relible float based grid system.
-        %small
-          %a.contact{ href: "https://github.com/whmii/cask" }
-            github
-          %a.contact{ href: "https://twitter.com/WHMII" }
-            @whmii
-      %ul.description
-        %li
-          Cask is only ~84 lines of code so its basically fully knowable
-        %li
-          Because of its simplicity there is virtually no “where is this coming from!?”
-        %li
-          The syntax for media queries is greatly simplified
-        %li
-          There is no use of relative positioning or nth child selectors
-        %li
-          Cask is built around defining as few attributes as possible
-        %li
-          It’s easy to use in conjunction with flex-box
+        %img.logo{ src: "assets/cask-logo.svg" }
+      %nav
+        %a.contact{ href: "https://cask.readme.io/v0.3.2/docs" }
+          Documentation
+        %a.contact{ href: "https://github.com/whmii/cask" }
+          GitHub
+    %section.hero
+      %h2
+        A lightweight grid system, built with calc
+      %p
+        Cask lets you create responsive, scalable, grids with calc and Sass.
+
     %main.example
       %section
         %h1.section-title