Header styling and animations.

allenmhc · Oct 30, 2011 · b8e7376 · b8e7376
1 parent 51246ed
commit b8e7376
Show file tree

Hide file tree

Showing 10 changed files with 478 additions and 7 deletions.
diff --git a/_base.css b/_base.css
@@ -0,0 +1,15 @@
+body {
+  background: url(images/noise.png) repeat;
+  color: #666;
+  font-size: 14px;
+  font-family: museo-sans, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
+  font-weight: normal; }
+
+a {
+  text-decoration: none; }
+  a:hover {
+    text-decoration: none; }
+
+ul {
+  list-style: none;
+  margin-left: 0; }
diff --git a/_header.css b/_header.css
@@ -0,0 +1,54 @@
+header {
+  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  background-image: linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -o-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -moz-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -webkit-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -ms-linear-gradient(top, #a1afbd, #859fb8);
+  background-color: #a1afbd;
+  position: fixed;
+  top: 0;
+  height: 60px;
+  clear: both; }
+
+#header-title {
+  display: block;
+  position: relative;
+  width: 300px;
+  height: 60px;
+  font-family: "Raleway", sans-serif;
+  float: left; }
+  #header-title h1 {
+    -webkit-text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    -moz-text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 5px;
+    left: 0;
+    font-size: 48px;
+    color: #eee;
+    line-height: 40px;
+    z-index: 10; }
+  #header-title:hover h1 {
+    color: #fff; }
+  #header-title h3 {
+    -webkit-text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    -moz-text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    position: absolute;
+    top: 40px;
+    left: 0;
+    font-size: 14px;
+    color: #000; }
+  #header-title:hover h3 {
+    color: #333; }
+
+#header-nav {
+  display: block;
+  height: 60px;
+  float: right; }
+  #header-nav li {
+    float: left;
+    margin: 10px 15px; }
diff --git a/index.php b/index.php
@@ -18,7 +18,57 @@
   <?php wp_head(); ?>
 </head>
 <body>
-  <div id="content">This is some content, yea?</div>
+  <header>
+    <div id="header-content">
+      <a id="header-title" href="<?php get_home_url() ?>">
+        <h1><?php bloginfo('name'); ?></h1>
+        <h3 id="subheader"><?php bloginfo('description'); ?></h3>
+      </a>
+
+      <nav id="header-nav">
+        <ul>
+          <li class="nav-item"><a href="#">
+            <h4>home</h4><span class="subtext">origin</span>
+          </a></li>
+          <li class="nav-item"><a href="#">
+            <h4>articles</h4><span class="subtext">noteworthy</span>
+          </a></li>
+          <li class="nav-item"><a href="#">
+            <h4>archives</h4><span class="subtext">thoughtstream</span>
+          </a></li>
+          <li class="nav-item"><a href="#">
+            <h4>about</h4><span class="subtext">identity</span>
+          </a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <div id="content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+
+  </div>
 
   <?php wp_footer(); ?>
 </body>

diff --git a/style.css b/style.css
@@ -266,8 +266,136 @@ button {
 
 body {
   background: url(images/noise.png) repeat;
-  color: #666; }
+  color: #666;
+  font-size: 14px;
+  font-family: museo-sans, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
+  font-weight: normal; }
 
-body {
+a {
+  text-decoration: none; }
+  a:hover {
+    text-decoration: none; }
+
+ul {
+  list-style: none;
+  margin-left: 0; }
+
+header {
+  width: 100%; }
+  header #header-content {
+    width: 960px;
+    margin: 0 auto; }
+
+#content {
   width: 960px;
   margin: 20px auto; }
+
+p {
+  font-size: 14px;
+  margin: 30px 0; }
+
+header {
+  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+  background-image: linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -o-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -moz-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -webkit-linear-gradient(top, #a1afbd, #859fb8);
+  background-image: -ms-linear-gradient(top, #a1afbd, #859fb8);
+  background-color: #a1afbd;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  clear: both; }
+
+#header-title {
+  display: block;
+  position: relative;
+  width: 480px;
+  height: 50px;
+  font-family: "Raleway", sans-serif;
+  float: left;
+  overflow: hidden; }
+  #header-title h1 {
+    -webkit-text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    -moz-text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    font-size: 48px;
+    color: #eee;
+    line-height: 40px;
+    z-index: 10; }
+  #header-title:hover h1 {
+    color: #fff; }
+  #header-title:hover h3 {
+    left: 50px; }
+  #header-title h3 {
+    -webkit-text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    -moz-text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
+    -moz-transition: left 300ms linear;
+    -webkit-transition: left 300ms linear;
+    -o-transition: left 300ms linear;
+    transition: left 300ms linear;
+    position: absolute;
+    bottom: 0;
+    left: -300px;
+    line-height: 20px;
+    font-size: 14px;
+    color: #000; }
+
+#header-nav {
+  display: block;
+  height: 50px;
+  float: right;
+  font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif;
+  margin-right: -20px;
+  text-align: right;
+  overflow: hidden; }
+  #header-nav .nav-item {
+    float: left; }
+    #header-nav .nav-item.selected {
+      background-image: linear-gradient(top, #bfb494, #c0ad6b);
+      background-image: -o-linear-gradient(top, #bfb494, #c0ad6b);
+      background-image: -moz-linear-gradient(top, #bfb494, #c0ad6b);
+      background-image: -webkit-linear-gradient(top, #bfb494, #c0ad6b);
+      background-image: -ms-linear-gradient(top, #bfb494, #c0ad6b);
+      background-color: #c0ad6b;
+      border: 1px solid rgba(255, 255, 255, 0.7);
+      border-top: none; }
+    #header-nav .nav-item a {
+      display: block;
+      padding-left: 20px;
+      padding-right: 20px;
+      height: 50px;
+      position: relative; }
+    #header-nav .nav-item h4 {
+      -webkit-text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.25);
+      -moz-text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.25);
+      text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.25);
+      -moz-transition: padding-top 200ms ease-in;
+      -webkit-transition: padding-top 200ms ease-in;
+      -o-transition: padding-top 200ms ease-in;
+      transition: padding-top 200ms ease-in;
+      font-size: 18px;
+      font-weight: normal;
+      color: #333;
+      padding-top: 25px; }
+    #header-nav .nav-item .subtext {
+      -moz-transition: bottom 200ms ease-in;
+      -webkit-transition: bottom 200ms ease-in;
+      -o-transition: bottom 200ms ease-in;
+      transition: bottom 200ms ease-in;
+      font-size: 12px;
+      color: #ddd;
+      position: absolute;
+      bottom: 60px;
+      line-height: 0px;
+      right: 20px; }
+    #header-nav .nav-item a:hover h4 {
+      padding-top: 15px; }
+    #header-nav .nav-item a:hover .subtext {
+      bottom: 12px; }
diff --git a/style.scss b/style.scss
@@ -9,4 +9,5 @@ This is an ac theme, 3.0.
 */
 @import "styles/reset";
 @import "styles/base";
-@import "styles/layout";
+@import "styles/layout";
+@import "styles/header";
diff --git a/styles/_base.scss b/styles/_base.scss
@@ -1,10 +1,29 @@
 // Base styles.
 
+@import "config";
+
 body {
   background: url(images/noise.png) repeat;
   color: #666;
+  font: {
+    size: 14px;
+    family: $font-default;
+    weight: normal;
+  }
 }
 
 #content {
-
+
+}
+
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+ul {
+  list-style: none;
+  margin-left: 0;
 }
diff --git a/styles/_config.scss b/styles/_config.scss
@@ -0,0 +1,16 @@
+// Variables and configuration.
+
+$site-width: 960px;
+
+$color-prim: #859FB8;
+$color-prim-light: #A1AFBD;
+$color-sec: #C0AD6B;
+$color-sec-light: #BFB494;
+$color-ter: #ADDECC;
+
+$font-raleway: "Raleway", sans-serif;
+$font-gothic: "Century Gothic", Verdana, Helvetica, Arial, sans-serif;
+$font-default: museo-sans, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
+$font-georgia: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
+$font-arial-narrow: "Arial Narrow", "Arial", sans-serif;
+$font-monospaced: Inconsolata, "Andale Mono", "Courier New", "Courier", monospace;