From e37987061f2b3e26a5b7396b9aaf1e5c88ca8a5c Mon Sep 17 00:00:00 2001 From: Barry Clark Date: Sat, 17 May 2014 16:35:19 -0400 Subject: Full width header/footer with background colors --- _layouts/default.html | 48 ++++++++++++++++++++++++++++-------------------- scss/style.scss | 28 +++++++++++++++++++++++----- style.css | 23 ++++++++++++++++++----- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index aabef0f..6826777 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -20,26 +20,34 @@ -
- - {{ site.name }} -

-

{{ site.description }}

- - - -
-
- -
{{ content }}
- - +
+
+
+ + {{ site.name }} +

+

{{ site.description }}

+ + + +
+
+
+
+ +
{{ content }}
+ +
+
+ +
+
{% include analytics.html %} diff --git a/scss/style.scss b/scss/style.scss index 55e559c..78db456 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -17,7 +17,6 @@ html { } body { - max-width: 740px; margin: 0 auto; background: $white; @@ -25,6 +24,13 @@ body { color: $darkGray; } +.container { + margin: 0 auto; + max-width: 740px; + padding: 0 20px; + width: 100%; +} + h1, h2, h3, h4, h5, h6 { font-family: $helveticaNeue; color: $darkerGray; @@ -141,10 +147,13 @@ img { // .masthead // +.wrapper-masthead { + background-color: #e8e8f2; + margin-bottom: 50px; +} + .masthead { - margin: 20px 0 30px; - padding-bottom: 20px; - border-bottom: 1px dotted $lightGray; + padding: 25px 0; } .avatar { @@ -179,6 +188,7 @@ img { font-size: 16px; margin: 0; margin-top: -5px; + color: $darkGray; } nav { @@ -219,6 +229,10 @@ nav { // .main // +.wrapper-posts { + +} + .posts > .post { padding-bottom: 2em; border-bottom: 1px solid $lighterGray; @@ -235,8 +249,12 @@ nav { } } +.wrapper-footer { + background-color: #eee; + border-top: 1px solid #ddd; +} + footer { - // border-top: 1px $lightGray solid; padding: 20px 0; text-align: center; diff --git a/style.css b/style.css index ef63fc7..6d8027e 100644 --- a/style.css +++ b/style.css @@ -318,12 +318,17 @@ html { font-size: 100%; } body { - max-width: 740px; margin: 0 auto; background: white; font: 18px/1.4 Helvetica, Arial, sans-serif; color: #333333; } +.container { + margin: 0 auto; + max-width: 740px; + padding: 0 20px; + width: 100%; } + h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222222; @@ -409,10 +414,12 @@ img { color: black; background: #eeeeee; } +.wrapper-masthead { + background-color: #e8e8f2; + margin-bottom: 50px; } + .masthead { - margin: 20px 0 30px; - padding-bottom: 20px; - border-bottom: 1px dotted #aaaaaa; } + padding: 25px 0; } .avatar { float: left; @@ -439,7 +446,8 @@ img { float: left; font-size: 16px; margin: 0; - margin-top: -5px; } + margin-top: -5px; + color: #333333; } nav { float: right; @@ -466,6 +474,7 @@ nav { width: 100%; text-align: center; } } + .posts > .post { padding-bottom: 2em; border-bottom: 1px solid #eeeeee; } @@ -478,6 +487,10 @@ nav { padding: 0.1em 1em; color: #666666; } +.wrapper-footer { + background-color: #eeeeee; + border-top: 1px solid #dddddd; } + footer { padding: 20px 0; text-align: center; } -- cgit v1.2.3