updated header design

Author: hagenburger

source/images/logo.svg

@@ -1,15 +1,19 @@
-<nav class="locales">
-  <% [:en, :es].each do |locale| %>
-    <% url = locale == :en ? '/' : "/#{locale}" %>
-    <% css_class = "locales--link#{' -selected' if locale == I18n.locale}" %>
-    <%= link_to locale.to_s.upcase, url, class: css_class %>
-  <% end %>
-</nav>
-<h1 class="layout--title"><%= t('header.title') %></h1>
-<p class="layout--sub-title"><%= t('header.sub-title') %></p>
+<header class="layout--header">
+  <nav class="locales">
+    <% [:en, :es].each do |locale| %>
+      <% url = locale == :en ? '/' : "/#{locale}" %>
+      <% css_class = "locales--link#{' -selected' if locale == I18n.locale}" %>
+      <%= link_to locale.to_s.upcase, url, class: css_class %>
+    <% end %>
+  </nav>
+  <h1 class="layout--title"><%= t('header.title') %></h1>
+  <p class="layout--sub-title"><%= t('header.sub-title') %></p>
+</header>
+
 <section id="code-of-conduct" class="text">
   <%= partial 'code-of-conduct' %>
 </section>
+
 <section id="supporters" class="supporters">
   <h2 class="supporters--title"><%= t('supporters.title') %></h2>
   <p class="supporters--sub-title"><%= t('supporters.sub-title') %></p>

source/localizable/index.html.erb

@@ -13,32 +13,53 @@
   font-family: "ff-meta-serif-web-pro", "times new roman", serif;
   font-size: 18px;
   line-height: 1.4;
-  margin: 1em auto;
-  max-width: 900px;
-  width: 90%;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+
+.layout--header {
+  background: black;
+  color: white;
+  padding: 1em 1em 0;
+  position: relative;
+  z-index: 2;
+  &:after {
+    background: inherit;
+    content: "";
+    display: block;
+    margin: -5% -10% 5%;
+    padding-top: 6%;
+    position: relative;
+    -webkit-transform: rotate(-3deg) translateY(50%);
+    transform: rotate(-3deg) translateY(50%);
+    z-index: -1;
+  }
 }
 
 .layout--title {
   @extend %headline-font;
-  color: #333;
-  font-size: 3rem;
+  background: inline-image("logo.svg") center top no-repeat;
+  background-size: 9rem;
+  font-size: 2rem;
   font-weight: 100;
-  margin: 5rem 0 0;
+  margin: 3rem 0 0;
+  padding-top: 11rem;
   text-align: center;
 }
 
 .layout--sub-title {
   @extend %headline-font;
-  color: #888;
-  font-size: 1rem;
+  font-size: 0.75rem;
   letter-spacing: 1px;
-  margin: 0.25rem 0 1rem;
+  margin: 0.25rem 0 0;
   text-align: center;
 
   &:before,
   &:after {
     color: #ccc;
-    content: "  · · · ·  ";
+    content: "  · · ·  ";
     @media all and (max-width: 570px) {
       display: none;
     }
@@ -65,19 +86,19 @@
   }
 
   &.-selected {
-    background: black;
-    color: white;
+    background: white;
+    color: black;
   }
 }
 
 
 //// TEXT ////
 
 .text {
-  border: #eee double;
-  border-width: 3px 0;
-  margin: 3rem 0;
+  margin: auto;
+  max-width: 900px;
   padding: 2rem 6rem;
+  width: 90%;
   @media all and (max-width: 570px) {
     padding: 2rem 0.5rem;
   }