move to higher scope some shared variables

kendall · Feb 13, 2015 · 2fbe1dd · 2fbe1dd
1 parent ac3a5e1
commit 2fbe1dd
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 44 deletions.
diff --git a/_includes/demo-idevices.html b/_includes/demo-idevices.html
@@ -13,14 +13,7 @@
 
   #{{ post.uid }} {
 
-    top: == ::window[top] !strong;
-    left: == ::window[left] !strong;
-    x: == &[intrinsic-x];
-    y: == &[intrinsic-y];
-    width: == &[intrinsic-width];
-
     height: >= 600;
-    //height: >= ::window[height] - $baseline !strong;
 
     top-margin == 30;
     bottom-margin == 50;
@@ -42,6 +35,7 @@
       }
 
       h2 {
+        width: == &[intrinsic-width];
         height: == &[intrinsic-height] !require;
         center-x: == ^center-x;
         font-size: == $subtitle-font-size;

diff --git a/_includes/grid-promo.html b/_includes/grid-promo.html
@@ -1,11 +1,8 @@
 
-<section id="the-grid-promo" style="position: relative">
+<section class="top-section" id="the-grid-promo" style="position: relative">
   <style type="text/gss">
     #the-grid-promo {
-      top: == 0 !require;
-      left: == 0 !require;
-      width: == ::window[width] !strong;
-
+
       area-gap == 48;
       @h |-("area")-| in(&) gap(area-h-gap);
       @v |-("area")-| in(&) gap(area-gap) !strong;

diff --git a/_includes/head.html b/_includes/head.html
@@ -64,4 +64,13 @@
         font-size: == $content-font-size;
       }
 
+      section.top-section {
+        //v2.0 has a problem with intrinsic-top & left. Should be able to only use intrinsic-top, left with v2.1
+        top: == ::window[top] !strong;
+        left: == ::window[left] !strong;
+        x: == &[intrinsic-x];
+        y: == &[intrinsic-y];
+        width: == &[intrinsic-width];
+      }
+
     </style>
diff --git a/_includes/home-demos.html b/_includes/home-demos.html
@@ -3,12 +3,6 @@
   <style type="text/gss">
     #home-demos {
 
-    top: == ::window[top] !strong;
-    left: == ::window[left] !strong;
-    x: == &[intrinsic-x];
-    y: == &[intrinsic-y];
-    width: == &[intrinsic-width];
-
     height: >= 500 !require;
 
     #demos-title {

diff --git a/_includes/home-intro.html b/_includes/home-intro.html
@@ -5,11 +5,6 @@
   body {
     #top-home-section {
 
-      left: == ::window[left] !strong;
-      x: == &[intrinsic-x];
-      y: == &[intrinsic-y];
-      width: == &[intrinsic-width];
-
       height: >= 500 !require;
       height: >= ::window[height] - $baseline !require;
 

diff --git a/_includes/home-video-gss.html b/_includes/home-video-gss.html
@@ -1,4 +1,4 @@
-<section id="fluent-section" class="section color-a" style="position: relative">
+<section id="fluent-section" class="section top-section color-a" style="position: relative">
 
   <style type="text/css">
     #fluent-section {
@@ -13,16 +13,10 @@
     }
   </style>
 
-
   <style type="text/gss">
 
   #fluent-section {
 
-    top: == ::window[top] !strong;
-    left: == ::window[left] !strong;
-    x: == &[intrinsic-x];
-    y: == &[intrinsic-y];
-    width: == ::window[width];
     height: <= ::window[height] - $top-margin;
 
     #fluent-img {
@@ -34,11 +28,11 @@
 
     h1, h2, p {
       size: == &[intrinsic-size];
-      center-x: == ^[center-x];
       text-align: center;
     }
 
     header {
+      center-x: == ^center-x;
       @v |-(h1)-(h2)-| in(&) gap($baseline) outer-gap($top-margin / 2) !strong;
 
       h1 {
@@ -53,14 +47,15 @@
       }
     }
 
-
     a[size] == #fluent-img[size];
 
     0 <= v-gap <= $baseline;
 
     @h |-(#fluent-img(>= $max-p-width, <= ::window[width] !strong))-| in(&) gap(h-gap) !strong;
     @v |-(h1)-(h2)-(#fluent-img)-(p)-...-| in(&) gap(v-gap) outer-gap($baseline) !strong;
 
+    p[center-x] == #fluent-img[center-x];
+
     #fluent-play {
       padding: 0 !important;
       height: == 96;

diff --git a/_includes/made-with-love.html b/_includes/made-with-love.html
@@ -1,30 +1,24 @@
-<section id="grid-section" class="color-a" style="position: relative">
+<section id="grid-section" class="top-section color-a" style="position: relative">
 <style type="text/gss">
 
   #grid-section {
 
-    top: == ::window[top] !strong;
-    left: == ::window[left] !strong;
-    x: == &[intrinsic-x];
-    y: == &[intrinsic-y];
-    width: == ::window[width];
     height: == #grid-section-content[height];
 
     .astro-person {
       width: >= 200;
       height: >= 200;
       width: == &[height] * 666/777;
-      //bottom: <= ^[bottom] - $baseline * 5;
     }
 
     h1, h2 {
       size: == &[intrinsic-size];
-      center-x: == ^[center-x];
+      //center-x: == ^[center-x];
       text-align: center;
     }
 
     header {
-      //TODO - check if usefull. Probably not since h1-h2 are used in later VFL @v
+      center-x: == ^center-x;
       @v |-(h1)-(h2)-| in(&) gap($baseline) outer-gap($top-margin / 2) !strong;
 
       h1 {

diff --git a/home/_posts/2014-02-01-about.html b/home/_posts/2014-02-01-about.html
@@ -4,7 +4,6 @@
 subtitle: Flexbox? Meh
 color: b
 include: spaceman.html
-layout: home
 ---
 
 Web developers are expected to build increasingly sophisticated UIs faster, cheaper, with tools that have not evolved with the times.   Why is the trivial task of centering an element with CSS so [obtusely complex](http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/)?  CSS was designed to separate presentation from content, but even with [Flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), a trivial change in layout can require deep changes in both the HTML content and the CSS presentation.  CSS layout primitives are not expressive enough - it doesn't really matter that some div is 720px wide - what matters is how it relates to other elements in the layout.  WTF, why can't we position & size elements relative to each other, not just relative to their positioned parents?  For more than a decade, web developers have been asking for this, but the W3C refuses to tackle the engineering problems associated with the "cyclic dependencies" that naturally arise in relative layout logic.  Sounds like a classic constraint satisfaction problem - JavaScript to the rescue!

diff --git a/home/_posts/2014-02-06-relative.html b/home/_posts/2014-02-06-relative.html
@@ -5,7 +5,6 @@
 color: c
 displayPromo: true
 include: demo-idevices.html
-layout: home
 ---
 
 Notice how you naturally would describe the nearby layout of iOS devices:

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 {% include home-demos.html %}
 
 {% for post in site.categories.home %}
-  <section class="section color-{{post.color}}" id="{{ post.uid }}" style="position: relative">
+  <section class="section top-section color-{{post.color}}" id="{{ post.uid }}" style="position: relative">
     {% if post.title %}
     <header>
       <h1><a name="{{ post.uid }}">{{ post.title }}</a></h1>