color ajustments + fix usage layout

Author: carl@connectedbrains.com

_includes/home-demos.html

@@ -12,7 +12,7 @@
       @h |-(&)-| in(^) gap($col-size);
       font-size: == $title-font-size * 0.9;
       padding: == 0;
-      color: hsl(282, 99%, 31%);
+      color: #784e78;
     }
 
     #demos-subtitle {

_includes/home-intro.html

@@ -64,7 +64,7 @@ <h1 id="top-title">Grid Style Sheets 2.0</h1>
   <h3 id="top-subtitle" class="large-font">GSS reimagines CSS layout & replaces the browser’s layout engine with one that
     harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.</h3>
 
-  <a href="/usage" class="top-button button" id="top-button-install">Install</a>
+  <a href="/usage/client-side" class="top-button button" id="top-button-install">Install</a>
   <a href="//github.com/gss/engine" class="top-button button" id="top-button-source">Source</a>
   <a href="/guides/ccss" class="top-button button" id="top-button-docs">Documentation</a>
 

_includes/home-video-gss.html

@@ -57,18 +57,12 @@
     p[center-x] == #fluent-img[center-x];
 
     #fluent-play {
-      padding: 0 !important;
-      height: == 96;
-      width: == &[height] * 1.6;
+      padding: 10px !important;
+      height: == &intrinsic-height;
+      width: == &intrinsic-width;
       center-x: == ^[center-x];
       center-y: == ^[center-y];
-    }
-
-    #fluent-play-tri {
-      width: == 51;
-      height: == 59;
-      center-x: == ^[center-x] + 5;
-      center-y: == ^[center-y] - 5;
+      font-size: == $subtitle-font-size * 0.8;
     }
   }
   </style>
@@ -80,10 +74,8 @@ <h2>O'Reilly | Fluent Conf' 2014</h2>
 
   <a href="http://vimeo.com/91393694" target="_blank">
     <img id="fluent-img" src="assets/images/oreilly-fluent-cover-purple.jpg" alt="Kid">
-    <button id="fluent-play" class="button-play">
-      <svg class="icon" id="fluent-play-tri" width="51px" height="59px" version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full" >
-        <path d="M51,29.5L0,59V0L51,29.5z"/>
-      </svg>
+    <button id="fluent-play" class="button">
+      Play video
     </button>
   </a>
 

_includes/made-with-love.html

@@ -3,7 +3,7 @@
 
   #grid-section {
 
-    height: == #grid-section-content[height];
+    height: >= #grid-section-content[height] + grid-section-astro[height];
 
     .astro-person {
       width: >= 200;
@@ -32,15 +32,24 @@
       }
     }
 
-    @v |-(header)-(#grid-section-content)-| in(&) gap($baseline) outer-gap($v-outer-gap);
+    @v |-(header)-(#grid-section-content)-(#grid-section-astro)-| in(&) gap($baseline) outer-gap($v-outer-gap);
 
     astro-gap1 == $col-size;
     astro-gap0 == $col-size;
 
-    #grid-section-content {
-
+    .content {
       center-x: == ^center-x;
       width: == $max-p-width !require;
+    }
+
+    #grid-section-content {
+      height: == &intrinsic-height;
+      p {
+        size: == &intrinsic-size;
+      }
+    }
+
+    #grid-section-astro {
 
       @if ::window[width] >= 720 {
 
@@ -54,7 +63,7 @@
 
         astro-gap2 == 40 !require;
 
-        @v |-(#astro-d4)-(#astro-yaroslaff)-(#astro-carl)-| in(&) gap(v-astro-gap) !strong;
+        @v |(#astro-d4)-(#astro-yaroslaff)-(#astro-carl)-| in(&) gap(v-astro-gap) !strong;
 
         astro-width == #astro-yaroslaff[width];
         top-row-1 == #astro-yaroslaff[top];
@@ -75,7 +84,8 @@
           @h |-(&)-| in(^) gap(astro-gap0);
         }
 
-        @v |-(#astro-greg)-(#astro-d4)-(#astro-alex)-(#astro-bergie)-(#astro-yaroslaff)-(#astro-paul)-(#astro-tom)-(#astro-carl)-|
+
+        @v |(#astro-greg)-(#astro-d4)-(#astro-alex)-(#astro-bergie)-(#astro-yaroslaff)-(#astro-paul)-(#astro-tom)-(#astro-carl)-|
         in(&)
         gap($baseline * 3)
         outer-gap($baseline * 5);
@@ -94,14 +104,14 @@ <h1>Made with ♥ by TheGrid</h1>
     <h2 class="subtitle">Open source b/c we believe</h2>
   </header>
   <div id="grid-section-content" class="content">
-
     <p>
       GSS was created by <a data-person="d4" href="https://twitter.com/d4tocchini">Dan Tocchini</a>, leader of the stealth upstart, <a href="http://thegrid.io/">TheGrid</a>.  GSS is an scrumptious piece of TheGrid's platform, hence the name <em>Grid</em> Style Sheets.
     </p>
     <p>
       GSS would not be possible without:
     </p>
-
+  </div>
+  <div id="grid-section-astro" class="content">
 
     <div id="astro-d4" class="astro-person link">
       <a href="https://twitter.com/d4tocchini">

_includes/navigation.html

@@ -140,6 +140,7 @@
       bottom: == ::window[bottom] !require;
       overflow-y: auto;
       overflow-x: hidden;
+      z-index: 1000;
 
       ul {
         top: >=0 !require;
@@ -194,7 +195,7 @@
     </a>
     </li>
     <li>
-      <a href="/usage/">Install</a>
+      <a href="/usage/client-side">Install</a>
     </li>
     <li>
       <a href="/guides/ccss">CCSS</a>

_includes/tail.html

@@ -9,8 +9,6 @@
 
       #count-me-in {
 
-        z-index: == -1;
-
         @v |-(#gss_logo)-(#prefinery_iframe_inline)-(#pp-link)-| in(&) gap($baseline) outer-gap($v-outer-gap / 2) !strong;
 
         #gss_logo {

_layouts/post.html

@@ -35,7 +35,7 @@
       }
 
       .content {
-        bottom: <= ^[bottom] - $bottom-margin;
+        bottom: <= ^[bottom] - $top-margin / 2;
 
         font-size: == $content-font-size;
         line-height: == $baseline;

style/styles.css

@@ -176,9 +176,7 @@ ul.large-list a {
   color: hsl(58, 100%, 84%);
 }
 
-button {
-  /*color: hsl(282, 99%, 31%);*/
-  /*background-color: hsl(58, 100%, 84%);*/
+/*button {
   color: #fdf9ad;
   border-color: #784e78;
   background-color: #2c182f;
@@ -190,13 +188,10 @@ button:hover, a:hover button,
 .button:hover, a:hover .button,
 button.transparent:hover
  {
-  /*border-color: hsl(282, 99%, 31%);
-  background-color: hsl(282, 99%, 31%);
-  color: hsl(58, 100%, 84%);*/
   color: #2c182f;
   border-color: #784e78;
   background-color: #fdf9ad;
-}
+}*/
 
 button.inverse {
   border-color: hsl(282, 99%, 31%);
@@ -291,12 +286,13 @@ hr {
     cover;
 }
 
-#top-home-section .button {
+button, .button {
+  background-color: #231028;
   color: #fdf9ad;
   border-color: #784e78;
 }
 
-#top-home-section .button:hover {
+button:hover, .button:hover {
    background: #784e78 !important;
 }
 
@@ -319,7 +315,7 @@ hr {
 }
 
 
-#home-demos .button {
+/*#home-demos .button {
   color: hsl(282, 99%, 31%);
 }
 
@@ -328,7 +324,7 @@ hr {
   border-color: hsl(282, 99%, 31%);
   background-color: hsl(282, 99%, 31%);
   color: hsl(58, 100%, 84%);
-}
+}*/
 
 #home-demos #demos-subtitle {
   text-align: center;

usage/_posts/2014-01-20-client-side.html

@@ -1,7 +1,7 @@
 ---
 uid: client-use
 title: Client-side
-layout: default
+layout: post
 color: b
 ---