Redesign header to incorporate new logo

Author: JordanHatch

_layouts/header.html

@@ -3,9 +3,9 @@
 ---
 
 <header class="small">
-  <div class="inner">
-    <h1><a href="/">Europe<br> Code<br> Week<br> <span>2014</span></a></h1>
-    <h2>11th &mdash; 17th October <a href="https://twitter.com/search?q=%23codeEU&amp;f=realtime">#codeEU</a></h2>
+  <div class="inner row">
+    <h1><a href="/">CodeWeek.EU</a></h1>
+    <h2>11th &mdash; 17th October &bull; <a href="https://twitter.com/search?q=%23codeEU&amp;f=realtime">#codeEU</a></h2>
 
     {% include nav.ext %}
   </div>

_layouts/home.html

@@ -3,15 +3,15 @@
 ---
 
 <section id="intro">
-  <div class="inner">
-    <header>
-      <h1>Europe<br> Code<br> Week<br> <span>2014</span></h1>
+  <div class="row inner">
+    <header class="col-md-4">
+      <h1>CodeWeek.EU</h1>
       <h2>11th &mdash; 17th October <a href="https://twitter.com/search?q=%23codeEU&amp;f=realtime">#codeEU</a></h2>
     </header>
 
     {% include nav.ext %}
 
-    <div id="intro-description">
+    <div id="intro-description" class="col-md-8">
       <p>All around Europe, people are making apps, websites and lots of other things by learning to code.</p>
       <p>Join them at one of many events and clubs taking place when Code Week returns this year.</p>
 

stylesheets/core.css

@@ -1,6 +1,10 @@
 @import url(//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css);
 @import url(http://fonts.googleapis.com/css?family=Carrois+Gothic);
 
+/*
+Code Week Blue: #4489ca
+*/
+
 body {
   background: #f2f8ff;
   font-family: 'Carrois Gothic', Helvetica, Arial, sans-serif;
@@ -22,35 +26,43 @@ body {
 .button, a.button,
     a.button:link, a.button:visited {
   display: inline-block;
-  background: #0f6abc;
+  background: #4489ca;
   text-decoration: none;
   color: #fff;
   padding: 5px 24px;
   text-shadow: #083e6f 0px 1px 1px;
   box-shadow: #d0d0d0 0px 2px 2px;
+  border-top: 2px solid #4489ca;
+  border-bottom: 2px solid transparent;
 }
 
 a.button:hover {
   background: #4e832f;
+  border-top-color: #4e832f;
   text-shadow: #31521e 0px 1px 1px;
 }
 
 a.button:active {
-  border-top: 2px solid #f2f8ff;
+  border-top-color: #f2f8ff;
+  border-bottom-color: #4e832f;
+  padding-top: 7px;
+  padding-bottom: 3px;
   box-shadow: none;
 }
 
 section {
-  font-size: 20px;
-  line-height: 32px;
-  padding: 25px 0;
+  font-size: 18px;
+  line-height: 28px;
+  padding: 10px 0;
+  margin: 0;
 }
 section p {
-  padding: 10px 0;
+  padding: 8px 0;
+  margin: 0;
 }
 section h1 {
   font-size: 34px;
-  padding: 30px 0 25px;
+  padding: 15px 0;
   text-transform: uppercase;
 }
 
@@ -65,56 +77,55 @@ a:hover, a:active {
 /* Header */
 
 header.small {
-  background: #0068bf url('/images/header.jpg') no-repeat center center;;
+  background: #4489ca;
   display: block;
   color: #fff;
-  height: 145px;
+  height: 80px;
 }
 header.small .inner {
   overflow: hidden;
   padding: 0;
   margin: 0 auto 20px;
   position: relative;
+  height: 80px;
 }
 header.small h1 {
-  font-size: 20px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-shadow: #002b4f 0px 1px 1px;
-  padding: 0;
-  line-height: 26px;
+  margin: 0;
+  padding: 23px 0 0;
   float: left;
 }
 header.small h1 a, header.small h1 a:link, header.small h1 a:visited {
   display: block;
-  text-decoration: none;
-  width: 150px;
-  color: #fff;
-}
-header.small h1 a span, header.small h1 a:link span, header.small h1 a:visited span {
-  color: #bcdbff;
+  height: 35px;
+  width: 240px;
+  padding: 0;
+  text-indent: -9999px;
+  background: url('/images/small-logo.png') no-repeat center left;
 }
 header.small h2 {
   float: right;
   text-align: right;
   font-size: 15px;
   line-height: 22px;
+  margin: 15px 0 0;
 }
 
-header.small h2 a, header.small h2 a:link, header.small h2 a:visited {
-  margin-top: 4px;
+header h2 a, header h2 a:link, header h2 a:visited {
+  color: #fff;
+}
+header h2 a:hover, header h2 a:active {
+  color: #bcdbff;
 }
-
 
 /* Intro */
 
 #intro {
-  height: 655px;
+  height: 500px;
   padding: 0;
-  background: #0068bf url('/images/europe.jpg') no-repeat center center;
+  background: #4489ca;
   color: #fff;
-  font-size: 32px;
-  line-height: 55px;
+  font-size: 28px;
+  line-height: 49px;
   font-weight: 400;
   margin-bottom: 15px;
 }
@@ -128,25 +139,21 @@ header.small h2 a, header.small h2 a:link, header.small h2 a:visited {
 
 #intro header {
   display: block;
-  float: left;
   color: #fff;
   text-align: left;
-  width: 360px;
 }
 
-#intro #intro-description {
-  float: right;
-  width: 600px;
+#intro header h1 {
+  margin: 0;
+  padding: 0;
 }
 
 #intro header h1 {
-  font-size: 54px;
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-shadow: #002b4f 0px 1px 1px;
-  padding: 20px 0;
-  line-height: 60px;
+  display: block;
+  height: 250px;
+  width: 200px;
+  text-indent: -9999px;
+  background: url('/images/intro-logo.png') no-repeat top left;
 }
 
 #intro header h1 span {
@@ -155,34 +162,39 @@ header.small h2 a, header.small h2 a:link, header.small h2 a:visited {
 
 #intro header h2 {
   padding: 10px 0;
-  font-size: 28px;
+  font-size: 24px;
 }
 
-header h2 a, header h2 a:link, header h2 a:visited {
+#intro header h2 a {
   display: block;
   margin-top: 10px;
-  color: #fff;
 }
-header h2 a:hover, header h2 a:active {
-  color: #bcdbff;
+
+#intro p:first-of-type {
+  padding-top: 0;
 }
 
 #intro .button, #intro a.button,
     #intro a.button:link, #intro a.button:visited {
   background: #fff;
   color: #000;
   padding: 5px 24px;
-  text-shadow: #f6f6f6 0px 1px 1px;
-  box-shadow: #083e6f 0px 2px 2px;
+  text-shadow: #fafafa 0px 1px 1px;
+  box-shadow: #3875af 0px 2px 2px;
+  border-top: 2px solid #fff;
 }
 
 #intro a.button:hover {
   background: #bcdbff;
   text-shadow: #a0bde0 0px 1px 1px;
+  border-color: #bcdbff;
 }
 
 #intro a.button:active {
-  border-top: 2px solid #0f6abc;
+  border-top: 2px solid #4489ca;
+  border-bottom: 2px solid #bcdbff;
+  padding-top: 7px;
+  padding-bottom: 3px;
   box-shadow: none;
 }
 
@@ -196,7 +208,6 @@ nav {
 }
 nav ul {
   text-align: right;
-/*  padding: 10px 0;*/
 }
 nav ul li {
   display: inline-block;
@@ -231,7 +242,7 @@ nav ul li a, nav ul li a:link, nav ul li a:visited {
 /* Footer */
 
 footer {
-  background: #0f6abc;
+  background: #4489ca;
   color: #fff;
   margin-top: 40px;
 }