color scheme

6 files changed, 50 insertions, 47 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4120d70..b2dce91 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,7 @@
-<header class="headlines" role="banner">
+<header class="headline" role="banner">
     {{ if .IsHome }}
-        <h1 class="headlines__title">{{ .Site.Params.headline }}</h1>
+        <h1 class="headline__title">{{ .Site.Params.headline }}</h1>
     {{ else }}
-        <a class="headlines__title" href="{{ .Site.BaseURL }}">{{ .Site.Params.headline }}</a>
+        <a class="headline__title" href="{{ .Site.BaseURL }}">{{ .Site.Params.headline }}</a>
     {{ end }}
 </header>
diff --git a/static/css/style.css b/static/css/style.css
index 67f25e9..ff4c1b6 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -425,19 +425,19 @@ img {
 }
 
 a {
-    color: #777;
+    color: #C44741;
 }
 
 a:hover {
-    color: #333;
+    color: #77201C;
 }
 
 a:focus {
-    color: #000;
+    color: #2C343B;
 }
 
 a:active {
-    color: #333;
+    color: #52616D;
 }
 
 .visua11y-hidden {
@@ -454,16 +454,23 @@ a:active {
 }
 
 html {
-    background-color: #fff;
+    background-color: #FFFFFF;
 }
 
-.page {
-    max-width: 700px;
+.header-wrapper {
+    background-color: #E5E1D1;
+}
+
+.headline,
+.menu,
+.content,
+.legal {
     margin: 0 auto;
+    max-width: 700px;
 }
 
 html {
-    color: #333;
+    color: #2C343B;
     font-size: 1em;
 }
 
@@ -471,25 +478,23 @@ html {
     font-size: 1.25em;
 }
 
-.headlines__title {
+.headline__title {
     font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
     font-size: 1.5em;
     font-weight: bold;
     margin: 0;
 }
 
-.headlines__baseline {
-    font-size: 1em;
-}
-
 h1, h3, h5 {
     font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
-    line-height: 1;
+    line-height: 1.2;
+    color: #C44741;
 }
 
 h2, h4, h6 {
     font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
-    line-height: 1;
+    line-height: 1.2;
+    color: #52616D;
 }
 
 h1 {
diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss
index 3785365..f8295b1 100644
--- a/static/sass/_settings.scss
+++ b/static/sass/_settings.scss
@@ -13,7 +13,11 @@ $baseline: 1.5;
 
 // ColorScheme
 
-$black: #000;
-$dark: #333;
-$light: #777;
-$white: #fff;
+$black: #000000;
+$white: #FFFFFF;
+
+$neutral: #E5E1D1;
+$light: #52616D;
+$base: #2C343B;
+$contrast: #C44741;
+$shadow: #77201C;
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index 7bafe57..fe846e4 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -17,21 +17,10 @@ img { -ms-interpolation-mode: bicubic; }
 
 // Links
 
-a {
-  color: $light;
-}
-
-a:hover {
-  color: $dark;
-}
-
-a:focus {
-  color: $black;
-}
-
-a:active {
-  color: $dark;
-}
+a { color: $contrast; }
+a:hover { color: $shadow; }
+a:focus { color: $base; }
+a:active { color: $light; }
 
 // Helpers
 
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 04957b7..87f05c2 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -6,7 +6,14 @@ html {
     background-color: $white;
 }
 
-.page {
-    max-width: 700px;
+.header-wrapper {
+    background-color: $neutral;
+}
+
+.headline,
+.menu,
+.content,
+.legal {
     margin: 0 auto;
+    max-width: 700px;
 }
\ No newline at end of file
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index f892c58..d72dbce 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -3,7 +3,7 @@
 ////
 
 html {
-    color: $dark;
+    color: $base;
     font-size: $fontSize;
 }
 
@@ -11,25 +11,23 @@ html {
     font-size: $fontSize * 1.25;
 }
 
-.headlines__title {
+.headline__title {
     font-family: $fontFamily;
     font-size: $fontSize * 1.5;
     font-weight: bold;
     margin: 0;
 }
 
-.headlines__baseline {
-    font-size: $fontSize;
-}
-
 h1, h3, h5 {
     font-family: $fontFamilyAlternative;
-    line-height: $baseline / 1.5;
+    line-height: $baseline - .3;
+    color: $contrast;
 }
 
 h2, h4, h6 {
     font-family: $fontFamily;
-    line-height: $baseline / 1.5;
+    line-height: $baseline - .3;
+    color: $light;
 }
 
 h1 { font-size: $fontSize * 4.5; }