diff options
| author |  Barry Clark <barry@barryclark.co>
| 2014-05-17 16:35:19 -0400 |
|---|---|---|
| committer | Barry Clark <barry@barryclark.co>
| 2014-05-17 16:35:19 -0400 |
| commit | e37987061f2b3e26a5b7396b9aaf1e5c88ca8a5c (patch) | |
| tree | 777ef0a6cfa8266a818ba5944d502f1acbf2fc0c | |
| parent | 1f2db3b048fd86589c482cd2ab4d348bdd6eda4e (diff) | |
| download | kompetenzbolzen.github.io-e37987061f2b3e26a5b7396b9aaf1e5c88ca8a5c.tar.gz | |
Full width header/footer with background colors
| -rw-r--r-- | _layouts/default.html | 48 | ||||
| -rwxr-xr-x | scss/style.scss | 28 | ||||
| -rw-r--r-- | 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 @@ </head> <body> - <header class="masthead"> - <a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a> - <a href="/" class="site-name">{{ site.name }}</a> - <br><br> - <p class="site-description">{{ site.description }}</p> - - <nav> - <a href="/">Blog</a> - <a href="/about">About</a> - </nav> - - <div style="clear:both;"></div> - </header> - - <div id="main" role="main">{{ content }}</div> - - <footer class="footer"> - {% if site.links.github %}<a href="http://github.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-github.png" /></a>{% endif %} - {% if site.links.twitter %}<a href="http://twitter.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-twitter.png" /></a>{% endif %} - </footer> + <div class="wrapper-masthead"> + <div class="container"> + <header class="masthead"> + <a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a> + <a href="/" class="site-name">{{ site.name }}</a> + <br><br> + <p class="site-description">{{ site.description }}</p> + + <nav> + <a href="/">Blog</a> + <a href="/about">About</a> + </nav> + + <div style="clear:both;"></div> + </header> + </div> + </div> + + <div id="main" role="main" class="container">{{ content }}</div> + + <div class="wrapper-footer"> + <div class="container"> + <footer class="footer"> + {% if site.links.github %}<a href="http://github.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-github.png" /></a>{% endif %} + {% if site.links.twitter %}<a href="http://twitter.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-twitter.png" /></a>{% endif %} + </footer> + </div> + </div> {% include analytics.html %} </body> 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; @@ -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; } |