Left-aligning the header and ensuring that all the left/right gutters…

… match.
wanderingmatt · May 7, 2012 · 688ad73 · 688ad73
1 parent aea168b
commit 688ad73
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 54 deletions.
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -105,18 +105,9 @@ h2 {
 }
 
 h3 {
-  background: #4c489e;
-  background: rgba(76, 72, 158, 0.9);
-  -moz-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
-  -o-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
-  clear: both;
   color: #fff;
   font-weight: bold;
   line-height: 30px;
-  padding: 10px;
-  position: relative;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
 }
 
@@ -158,8 +149,9 @@ a {
 }
 
 header {
-  padding: 75px 0 50px 0;
+  padding: 75px 10px 50px 10px;
   position: relative;
+  text-align: left;
 }
 
 nav a {
@@ -180,6 +172,21 @@ nav a:hover {
   color: #fff;
 }
 
+.ribbon {
+  background: #4c489e;
+  background: rgba(76, 72, 158, 0.9);
+  -moz-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
+  -webkit-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
+  -o-box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0 0 5px black, 0 0 1px rgba(255, 255, 255, 0.3) inset;
+  clear: both;
+  text-align: left;
+}
+.ribbon span {
+  display: block;
+  padding: 10px;
+}
+
 #about {
   color: #cccbe7;
   text-align: justify;
@@ -293,12 +300,36 @@ p {
 }
 @media screen and (min-width: 768px) {
   header {
-    padding-bottom: 30px;
+    -moz-box-sizing: padding-box;
+    -webkit-box-sizing: padding-box;
+    -ms-box-sizing: padding-box;
+    box-sizing: padding-box;
+    padding: 75px 1.19% 20px 1.19%;
+    margin: 0 auto;
   }
 
-  h3 {
+  h1 {
+    margin: 0 1.19%;
+  }
+
+  h2 {
+    margin: -5px 1.19% 0 1.19%;
+  }
+
+  .ribbon {
     margin: 2.38% 0;
-    padding: 15px;
+  }
+  .ribbon span {
+    -moz-box-sizing: padding-box;
+    -webkit-box-sizing: padding-box;
+    -ms-box-sizing: padding-box;
+    box-sizing: padding-box;
+    margin: 0 auto;
+    padding: 15px 1.19%;
+  }
+
+  h3 {
+    margin: 0 1.19%;
   }
 
   .videos ul {
@@ -729,11 +760,6 @@ p {
     -o-box-shadow: none;
     box-shadow: none;
   }
-  .cover .fancybox-inner {
-    display: table-cell;
-    padding: 0 1.19%;
-    vertical-align: middle;
-  }
   .cover h3 {
     display: none;
   }
@@ -742,7 +768,7 @@ p {
     float: left;
     width: 47.619%;
     margin: 0 1.19%;
-    margin-left: 26.19%;
+    padding-top: 150px;
   }
   .cover p {
     font-size: 16px;
@@ -753,14 +779,17 @@ p {
   }
 }
 @media screen and (min-width: 1025px) {
-  header {
-    margin: 0 auto;
-    max-width: 1280px;
+  header, .ribbon span {
+    max-width: 1600px;
   }
 
   .videos ul {
+    -moz-box-sizing: padding-box;
+    -webkit-box-sizing: padding-box;
+    -ms-box-sizing: padding-box;
+    box-sizing: padding-box;
     margin: 0 auto;
-    max-width: 1280px;
+    max-width: 1600px;
   }
   .videos li {
     display: inline;
@@ -772,11 +801,4 @@ p {
   .cover .fancybox-inner {
     padding: 0;
   }
-  .cover .bio {
-    display: inline;
-    float: left;
-    width: 30.952%;
-    margin: 0 1.19%;
-    margin-left: 34.524%;
-  }
 }
diff --git a/stylesheets/framework/_defaults.scss b/stylesheets/framework/_defaults.scss
@@ -16,6 +16,7 @@ $default-line-height: 16px;
 
 $total-width: 100%;
 $columns: 6;
+$max-width: 1600px;
 
 // BORDER-RADIUS //
 

diff --git a/stylesheets/framework/_typography.scss b/stylesheets/framework/_typography.scss
@@ -29,15 +29,9 @@ h2 {
 }
 
 h3 {
-  background: $purple;
-  background: fade_out($purple, .1);
-  @include box-shadow(0 0 5px #000, 0 0 1px rgba(255, 255, 255, .3) inset);
-  clear: both;
   color: #fff;
   font-weight: bold;
   line-height: 30px;
-  padding: 10px;
-  position: relative;
   @include text-shadow(0 -1px rgba(0, 0, 0, .3));
 }
 

diff --git a/stylesheets/screen.scss b/stylesheets/screen.scss
@@ -21,8 +21,9 @@ a {
 }
 
 header {
-  padding: 75px 0 50px 0;
+  padding: 75px 10px 50px 10px;
   position: relative;
+  text-align: left;
 }
 
 nav {
@@ -40,6 +41,18 @@ nav {
   }
 }
 
+.ribbon {
+  background: $purple;
+  background: fade_out($purple, .1);
+  @include box-shadow(0 0 5px #000, 0 0 1px rgba(255, 255, 255, .3) inset);
+  clear: both;
+  text-align: left;
+  span {
+    display: block;
+    padding: 10px;
+  }
+}
+
 #about {
   color: lighten($purple, 40%);
   text-align: justify;
@@ -128,11 +141,22 @@ p {
 }
 
 @media screen and (min-width: 768px) {
-  header { padding-bottom: 30px; }
-  h3 {
+  header {
+    @include box-sizing(padding-box);
+    padding: 75px 1.19% 20px 1.19%;
+    margin: 0 auto;
+  }
+  h1 { margin: 0 1.19%; }
+  h2 { margin: -5px 1.19% 0 1.19%; }
+  .ribbon {
     margin: 2.38% 0;
-    padding: 15px;
+    span {
+      @include box-sizing(padding-box);
+      margin: 0 auto;
+      padding: 15px 1.19%;
+    }
   }
+  h3 { margin: 0 1.19%; }
   .videos {
     ul { padding: 0 1.19%; }
     li {
@@ -279,37 +303,35 @@ p {
       @include box-shadow(none);
     }
     .fancybox-inner {
-      display: table-cell;
-      padding: 0 1.19%;
-      vertical-align: middle;
+      // display: table-cell;
+      // padding: 0 1.19%;
+      // vertical-align: middle;
     }
     h3 { display: none; }
     .bio {
       @include column(3);
-      @include push(1.5);
+      padding-top: 150px;
     }
     p { font-size: 16px; }
   }
   h1.raised { z-index: 1002; }
 }
 
 @media screen and (min-width: 1025px) {
-  header {
-    margin: 0 auto;
-    max-width: 1280px;
-  }
+  header, .ribbon span { max-width: $max-width; }
   .videos {
     ul {
+      @include box-sizing(padding-box);
       margin: 0 auto;
-      max-width: 1280px;
+      max-width: $max-width;
     }
     li { @include column(2); }
   }
   .cover {
     .fancybox-inner { padding: 0; }
     .bio {
-      @include column(2);
-      @include push(2);
+      // @include column(2);
+      // @include push(2);
     }
   }
 }
diff --git a/views/index.html.erb b/views/index.html.erb
@@ -1,5 +1,5 @@
 <section class="commercial videos">
-  <h3>Commercial</h3>
+  <div class="ribbon"><span><h3>Commercial</h3></span></div>
   <ul>
     <li>
       <a class="video fancybox.iframe" data-fancybox-group="commercial" href="http://player.vimeo.com/video/40788896?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
@@ -220,6 +220,7 @@
 <section id="about">
   <article class="bio">
     <h3>About</h3>
-    <p>Carlos Lamas is a freelance video editor from Minneapolis, working in high-end post-production since 2005. He has edited television spots for national brands including Target, Kmart, Capital One, and Best Buy. He has also edited several music videos which resulted in work that was featured on MTVU, Pitchfork, and Kanye West's blog. Raised bi-lingual, he can calso edit in Spanish. Inexplicably, motor vehicles have an annoying tendency to catch on fire while Carlos is driving them.</p>
+    <p>Carlos Lamas is a freelance video editor from Minneapolis, working in high-end post-production since 2005. <span style="color: white;">Add another sentence here that mentions something special about Carlos' abilities.</span></p>
+    <p>He has edited television spots for national brands including Target, Kmart, Capital One, and Best Buy. He has also edited several music videos and had his work featured on MTVU, Pitchfork, and Kanye West's blog. Raised bi-lingual, he can calso edit Spanish.</p>
   </article>
 </section>
diff --git a/views/layouts/default.html.erb b/views/layouts/default.html.erb
@@ -44,7 +44,7 @@
           beforeShow: function() {
             $('header h1').toggleClass('raised');
           },
-          afterClose: function() {
+          beforeClose: function() {
             $('header h1').toggleClass('raised');
           },
     	    helpers: {