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

Full width header/footer with background colors

Browse source
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>
<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 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 style="clear:both;"></div>
</header>
</div>
</div>
<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 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>

28
scss/style.scss
View file

@ -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;

23
style.css
View file

@ -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; }