kidwellj
/
findcommonground.uk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Full width header/footer with background colors

This commit is contained in:
Barry Clark 2014-05-17 16:35:19 -04:00
parent 1f2db3b048
commit e37987061f
3 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
_layouts/default.html
View File

@ -20,26 +20,34 @@
</head> </head>
<body> <body>
<header class="masthead"> <div class="wrapper-masthead">
<a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a> <div class="container">
<a href="/" class="site-name">{{ site.name }}</a> <header class="masthead">
<br><br> <a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a>
<p class="site-description">{{ site.description }}</p> <a href="/" class="site-name">{{ site.name }}</a>
<br><br>
<nav> <p class="site-description">{{ site.description }}</p>
<a href="/">Blog</a>
<a href="/about">About</a> <nav>
</nav> <a href="/">Blog</a>
<a href="/about">About</a>
</nav>
<div style="clear:both;"></div> <div style="clear:both;"></div>
</header> </header>
</div>
</div>
<div id="main" role="main">{{ content }}</div> <div id="main" role="main" class="container">{{ content }}</div>
<footer class="footer"> <div class="wrapper-footer">
{% if site.links.github %}<a href="http://github.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-github.png" /></a>{% endif %} <div class="container">
{% if site.links.twitter %}<a href="http://twitter.com/{{ site.links.github }}"><img class="footer-icon" src="/images/icon-twitter.png" /></a>{% endif %} <footer class="footer">
</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 %} {% include analytics.html %}
</body> </body>

28
scss/style.scss
View File

@ -17,7 +17,6 @@ html {
} }
body { body {
max-width: 740px;
margin: 0 auto; margin: 0 auto;
background: $white; background: $white;
@ -25,6 +24,13 @@ body {
color: $darkGray; color: $darkGray;
} }
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 20px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue; font-family: $helveticaNeue;
color: $darkerGray; color: $darkerGray;
@ -141,10 +147,13 @@ img {
// .masthead // .masthead
// //
.wrapper-masthead {
background-color: #e8e8f2;
margin-bottom: 50px;
}
.masthead { .masthead {
margin: 20px 0 30px; padding: 25px 0;
padding-bottom: 20px;
border-bottom: 1px dotted $lightGray;
} }
.avatar { .avatar {
@ -179,6 +188,7 @@ img {
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
margin-top: -5px; margin-top: -5px;
color: $darkGray;
} }
nav { nav {
@ -219,6 +229,10 @@ nav {
// .main // .main
// //
.wrapper-posts {
}
.posts > .post { .posts > .post {
padding-bottom: 2em; padding-bottom: 2em;
border-bottom: 1px solid $lighterGray; border-bottom: 1px solid $lighterGray;
@ -235,8 +249,12 @@ nav {
} }
} }
.wrapper-footer {
background-color: #eee;
border-top: 1px solid #ddd;
}
footer { footer {
// border-top: 1px $lightGray solid;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;

23
style.css
View File

@ -318,12 +318,17 @@ html {
font-size: 100%; } font-size: 100%; }
body { body {
max-width: 740px;
margin: 0 auto; margin: 0 auto;
background: white; background: white;
font: 18px/1.4 Helvetica, Arial, sans-serif; font: 18px/1.4 Helvetica, Arial, sans-serif;
color: #333333; } color: #333333; }
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 20px;
width: 100%; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222222; color: #222222;
@ -409,10 +414,12 @@ img {
color: black; color: black;
background: #eeeeee; } background: #eeeeee; }
.wrapper-masthead {
background-color: #e8e8f2;
margin-bottom: 50px; }
.masthead { .masthead {
margin: 20px 0 30px; padding: 25px 0; }
padding-bottom: 20px;
border-bottom: 1px dotted #aaaaaa; }
.avatar { .avatar {
float: left; float: left;
@ -439,7 +446,8 @@ img {
float: left; float: left;
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
margin-top: -5px; } margin-top: -5px;
color: #333333; }
nav { nav {
float: right; float: right;
@ -466,6 +474,7 @@ nav {
width: 100%; width: 100%;
text-align: center; } } text-align: center; } }
.posts > .post { .posts > .post {
padding-bottom: 2em; padding-bottom: 2em;
border-bottom: 1px solid #eeeeee; } border-bottom: 1px solid #eeeeee; }
@ -478,6 +487,10 @@ nav {
padding: 0.1em 1em; padding: 0.1em 1em;
color: #666666; } color: #666666; }
.wrapper-footer {
background-color: #eeeeee;
border-top: 1px solid #dddddd; }
footer { footer {
padding: 20px 0; padding: 20px 0;
text-align: center; } text-align: center; }