Re-positioning the H2 and fixing the header padding.

wanderingmatt · May 9, 2012 · 97394d7 · 97394d7
1 parent 0c28b3a
commit 97394d7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 44 deletions.
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -78,6 +78,17 @@ body:after {
   visibility: hidden;
 }
 
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before, .clearfix:after {
+  content: "";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+
 @font-face {
   font-family: 'UniversLTStd39ThinUltraCnRg';
   src: url("/fonts/universltstd-thinultracn-webfont.eot");
@@ -97,12 +108,12 @@ h1 {
 }
 
 h2 {
-  display: none;
   color: rgba(255, 255, 255, 0.4);
   font-size: 16px;
-  margin-top: -5px;
+  position: absolute;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
   text-transform: lowercase;
+  top: 55px;
 }
 
 h3 {
@@ -151,27 +162,22 @@ a {
 }
 
 header {
-  padding: 80px 10px 50px 10px;
+  padding: 80px 10px 60px 10px;
   position: relative;
   text-align: left;
 }
 
-nav a {
-  color: #9996cf;
-  font-size: 11px;
-  font-weight: bold;
-  padding: 0 10px;
-  position: absolute;
-  right: 1.19%;
-  text-transform: uppercase;
-  top: 50%;
-  -moz-transition: all 0.25s;
-  -webkit-transition: all 0.25s;
-  -o-transition: all 0.25s;
-  transition: all 0.25s;
+nav {
+  display: none;
 }
-nav a:hover {
+nav a {
   color: #fff;
+  font-family: UniversLTStd39ThinUltraCnRg, "Helvetica Neue", Arial, sans-serif;
+  font-size: 35px;
+  line-height: 35px;
+  position: relative;
+  text-transform: uppercase;
+  text-shadow: 0 1px 3px black;
 }
 
 .ribbon {
@@ -199,6 +205,10 @@ p {
   padding-bottom: 1em;
 }
 
+li {
+  line-height: 3em;
+}
+
 @media screen and (max-width: 767px) {
   .ribbon {
     border-top: 1px solid #336;
@@ -272,7 +282,7 @@ p {
     width: 70%;
   }
   .videos hgroup {
-    padding-right: 10%;
+    padding-right: 13%;
   }
   .videos h4, .videos h5 {
     line-height: 16px;
@@ -304,17 +314,22 @@ p {
     -webkit-box-sizing: padding-box;
     -ms-box-sizing: padding-box;
     box-sizing: padding-box;
-    padding: 80px 1.19% 20px 1.19%;
+    padding-left: 1.19%;
+    padding-right: 1.19%;
+    position: relative;
     margin: 0 auto;
   }
 
-  h1 {
+  h1, h2 {
     margin: 0 1.19%;
   }
 
   .ribbon {
     margin: 2.38% 0;
   }
+  .ribbon:first-child {
+    margin-top: 0;
+  }
   .ribbon span {
     -moz-box-sizing: padding-box;
     -webkit-box-sizing: padding-box;
@@ -775,7 +790,14 @@ p {
     width: 47.619%;
     margin: 0 1.19%;
   }
-  .cover p {
+  .cover ul {
+    display: inline;
+    float: left;
+    width: 30.952%;
+    margin: 0 1.19%;
+    margin-left: 17.857%;
+  }
+  .cover p, .cover li {
     font-size: 16px;
   }
 

diff --git a/stylesheets/framework/_globals.scss b/stylesheets/framework/_globals.scss
@@ -1,2 +1,3 @@
 .hidden { display: none; }
-.invisible { visibility: hidden; }
+.invisible { visibility: hidden; }
+.clearfix { @include clearfix; }
diff --git a/stylesheets/framework/_typography.scss b/stylesheets/framework/_typography.scss
@@ -21,12 +21,12 @@ h1 {
 }
 
 h2 {
-  display: none;
   color: rgba(255, 255, 255, .4);
   font-size: 16px;
-  margin-top: -5px;
+  position: absolute;
   @include text-shadow(0 -1px rgba(0, 0, 0, .6));
   text-transform: lowercase;
+  top: 55px;
 }
 
 h3 {

diff --git a/stylesheets/screen.scss b/stylesheets/screen.scss
@@ -21,23 +21,21 @@ a {
 }
 
 header {
-  padding: 80px 10px 50px 10px;
+  padding: 80px 10px 60px 10px;
   position: relative;
   text-align: left;
 }
 
 nav {
+  display: none;
   a {
-    color: lighten($purple, 25%);
-    font-size: 11px;
-    font-weight: bold;
-    padding: 0 10px;
-    position: absolute;
-    right: 1.19%;
+    color: #fff;
+    font-family: $custom-font, $default-font-family;
+    font-size: 35px;
+    line-height: 35px;
+    position: relative;
     text-transform: uppercase;
-    top: 50%;
-    @include transition;
-    &:hover { color: #fff; }
+    @include text-shadow(0 1px 3px #000);
   }
 }
 
@@ -61,6 +59,8 @@ p {
   padding-bottom: 1em;
 }
 
+li { line-height: 3em; }
+
 @media screen and (max-width: 767px) {
   .ribbon {
     border-top: 1px solid #336;
@@ -116,7 +116,7 @@ p {
       vertical-align: middle;
       width: 70%;
     }
-    hgroup { padding-right: 10%; }
+    hgroup { padding-right: 13%; }
     h4, h5 {
       line-height: $default-line-height;
       overflow: hidden;
@@ -139,12 +139,15 @@ p {
 @media screen and (min-width: 768px) {
   header {
     @include box-sizing(padding-box);
-    padding: 80px 1.19% 20px 1.19%;
+    padding-left: 1.19%;
+    padding-right: 1.19%;
+    position: relative;
     margin: 0 auto;
   }
-  h1 { margin: 0 1.19%; }
+  h1, h2 { margin: 0 1.19%; }
   .ribbon {
     margin: 2.38% 0;
+    &:first-child { margin-top: 0; }
     span {
       @include box-sizing(padding-box);
       margin: 0 auto;
@@ -309,11 +312,12 @@ p {
       vertical-align: middle;
     }
     h3 { display: none; }
-    .bio {
-      @include column(3);
-      // padding-top: 200px;
+    .bio { @include column(3); }
+    ul {
+      @include column(2);
+      @include push(1);
     }
-    p { font-size: 16px; }
+    p, li { font-size: 16px; }
   }
   h1.raised { z-index: 1002; }
 }

diff --git a/views/index.html.erb b/views/index.html.erb
@@ -223,4 +223,9 @@
     <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>
+  <ul>
+    <li><%= link_to 'losdelfuego', 'https://twitter.com/#!/losdelfuego' %></li>
+    <li><%= mail_to 'los@gmail.com' %></li>
+    <li>(123) 456-7890</li>
+  </ul>
 </section>
diff --git a/views/layouts/default.html.erb b/views/layouts/default.html.erb
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <title>Carlos Lamas &bull; Editor</title>
+  <title>Carlos Lamas &mdash; Editor</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <meta name="google-site-verification" content="1xf2CrUZy56Pp73b5wKKRJ02x-qZB02S9vtaq9pwwrY" />
@@ -15,8 +15,10 @@
 <body>
   <div class="wrapper">
     <header>
-      <h1>Carlos Lamas</h1>
-      <h2>Editor</h2>
+      <hgroup>
+        <h1>Carlos Lamas</h1>
+        <h2>Editor</h2>
+      </hgroup>
       <nav>
         <ul>
           <li class="about"><a href="#about">About</a></li>