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

Refactor of the nav, and added in new .clearfix

Browse source
This commit is contained in:
Barry Clark 2014-06-01 17:12:38 -04:00
parent 5ec5d054c2
commit 9d6de3c942
3 changed files with 91 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
_layouts/default.html
View file

@ -20,18 +20,18 @@
<body> <body>
<div class="wrapper-masthead"> <div class="wrapper-masthead">
<div class="container"> <div class="container">
<header class="masthead"> <header class="masthead clearfix">
<a href="{{ site.baseurl }}/" class="avatar"><img src="{{ site.avatar }}" /></a> <a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>
<a href="{{ site.baseurl }}/" class="site-name">{{ site.name }}</a>
<br><br> <div class="site-info">
<p class="site-description">{{ site.description }}</p> <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav> <nav>
<a href="{{ site.baseurl }}/">Blog</a> <a href="{{ site.baseurl }}/">Blog</a>
<a href="{{ site.baseurl }}/about">About</a> <a href="{{ site.baseurl }}/about">About</a>
</nav> </nav>
<div style="clear:both;"></div>
</header> </header>
</div> </div>
</div> </div>

88
scss/style.scss
View file

@ -127,6 +127,17 @@ img {
background: $lighterGray; background: $lighterGray;
} }
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
// //
// LAYOUT / SECTIONS // LAYOUT / SECTIONS
@ -137,24 +148,19 @@ img {
// //
.wrapper-masthead { .wrapper-masthead {
//background-color: #e8e8f2;
margin-bottom: 40px; margin-bottom: 40px;
} }
.masthead { .masthead {
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid $lighterGray; border-bottom: 1px solid $lighterGray;
@include mobile { @include mobile {
text-align: center; text-align: center;
} }
// @TODO: OMG this is so bad, I just can't
br {
visibility: none;
}
} }
.avatar { .site-avatar {
float: left; float: left;
width: 70px; width: 70px;
height: 70px; height: 70px;
@ -171,66 +177,68 @@ img {
} }
} }
.site-name { .site-info {
float: left; float: left;
@include mobile {
float: none;
display: block;
margin: 0 auto;
}
}
.site-name {
margin: 0;
color: $darkGray;
text-decoration: none;
cursor: pointer;
font-family: $helveticaNeue; font-family: $helveticaNeue;
font-weight: 300; font-weight: 300;
font-size: 28px; font-size: 28px;
letter-spacing: 1px; letter-spacing: 1px;
@include mobile {
float: none;
display: block;
}
text-decoration: none;
cursor: pointer;
color: $darkGray;
&:hover, &:active {
text-decoration: none;
a {
&:hover, &:active {
color: $blue;
text-decoration: none;
}
} }
} }
.site-description { .site-description {
float: left; margin: -5px 0 0 0;
font-size: 16px;
margin: 0;
margin-top: -5px;
color: #777; color: #777;
font-size: 16px;
@include mobile { @include mobile {
float: none;
display: block;
margin: 3px 0; margin: 3px 0;
} }
} }
nav { nav {
float: right; float: right;
margin-top: -25px; // @TODO - containers for nav and content blocks in header margin-top: 23px; // @TODO: Vertically middle align
font-family: $helveticaNeue; font-family: $helveticaNeue;
font-size: 18px; font-size: 18px;
@include mobile { @include mobile {
float: none; float: none;
display: block;
margin-top: 15px; margin-top: 15px;
display: block;
font-size: 16px; font-size: 16px;
} }
// nav has it's own link highlighting
a { a {
margin-left: 25px; margin-left: 25px;
color: $darkGray;
text-align: right; text-align: right;
font-weight: 300; font-weight: 300;
letter-spacing: 1px; letter-spacing: 1px;
color: $darkGray;
&:hover, &:active { &:hover, &:active {
color: $darkGray;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: $darkGray;
} }
@include mobile { @include mobile {
@ -239,22 +247,12 @@ nav {
} }
} }
.logo, nav {
@include mobile {
float: none;
width: 100%;
text-align: center;
}
}
// //
// .main // .main
// //
.wrapper-posts {
}
.posts > .post { .posts > .post {
padding-bottom: 2em; padding-bottom: 2em;
border-bottom: 1px solid $lighterGray; border-bottom: 1px solid $lighterGray;
@ -275,19 +273,19 @@ nav {
} }
blockquote { blockquote {
border-left: 2px solid $gray;
font-size: 22px;
font-style: italic;
margin: 1.8em .8em; margin: 1.8em .8em;
border-left: 2px solid $gray;
padding: 0.1em 1em; padding: 0.1em 1em;
color: $gray; color: $gray;
font-size: 22px;
font-style: italic;
} }
} }
.wrapper-footer { .wrapper-footer {
margin-top: 50px; margin-top: 50px;
background-color: #eee;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
background-color: #eee;
} }
footer { footer {

81
style.css
View file

@ -403,6 +403,13 @@ img {
color: black; color: black;
background: #eeeeee; } background: #eeeeee; }
.clearfix:before, .clearfix:after {
content: " ";
display: table; }
.clearfix:after {
clear: both; }
.wrapper-masthead { .wrapper-masthead {
margin-bottom: 40px; } margin-bottom: 40px; }
@ -412,82 +419,74 @@ img {
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.masthead { .masthead {
text-align: center; } } text-align: center; } }
.masthead br {
visibility: none; }
.avatar { .site-avatar {
float: left; float: left;
width: 70px; width: 70px;
height: 70px; height: 70px;
margin-right: 15px; } margin-right: 15px; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.avatar { .site-avatar {
float: none; float: none;
display: block; display: block;
margin: 0 auto; } } margin: 0 auto; } }
.avatar img { .site-avatar img {
border-radius: 5px; } border-radius: 5px; }
.site-info {
float: left; }
@media screen and (max-width: 520px) {
.site-info {
float: none;
display: block;
margin: 0 auto; } }
.site-name { .site-name {
float: left; margin: 0;
color: #333333;
text-decoration: none;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300; font-weight: 300;
font-size: 28px; font-size: 28px;
letter-spacing: 1px; letter-spacing: 1px; }
text-decoration: none; .site-name a:hover, .site-name a:active {
cursor: pointer; color: #4183c4;
color: #333333; }
@media screen and (max-width: 520px) {
.site-name {
float: none;
display: block; } }
.site-name:hover, .site-name:active {
text-decoration: none; } text-decoration: none; }
.site-description { .site-description {
float: left; margin: -5px 0 0 0;
font-size: 16px; color: #777777;
margin: 0; font-size: 16px; }
margin-top: -5px;
color: #777777; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.site-description { .site-description {
float: none;
display: block;
margin: 3px 0; } } margin: 3px 0; } }
nav { nav {
float: right; float: right;
margin-top: -25px; margin-top: 23px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px; } font-size: 18px; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
nav { nav {
float: none; float: none;
display: block;
margin-top: 15px; margin-top: 15px;
display: block;
font-size: 16px; } } font-size: 16px; } }
nav a { nav a {
margin-left: 25px; margin-left: 25px;
color: #333333;
text-align: right; text-align: right;
font-weight: 300; font-weight: 300;
letter-spacing: 1px; letter-spacing: 1px; }
color: #333333; }
nav a:hover, nav a:active { nav a:hover, nav a:active {
color: #333333;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer; }
color: #333333; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
nav a { nav a {
margin: 0 10px; } } margin: 0 10px; } }
@media screen and (max-width: 520px) {
.logo, nav {
float: none;
width: 100%;
text-align: center; } }
.posts > .post { .posts > .post {
padding-bottom: 2em; padding-bottom: 2em;
border-bottom: 1px solid #eeeeee; } border-bottom: 1px solid #eeeeee; }
@ -502,17 +501,17 @@ nav {
color: #4183c4; color: #4183c4;
text-decoration: none; } text-decoration: none; }
.post blockquote { .post blockquote {
border-left: 2px solid #666666;
font-size: 22px;
font-style: italic;
margin: 1.8em 0.8em; margin: 1.8em 0.8em;
border-left: 2px solid #666666;
padding: 0.1em 1em; padding: 0.1em 1em;
color: #666666; } color: #666666;
font-size: 22px;
font-style: italic; }
.wrapper-footer { .wrapper-footer {
margin-top: 50px; margin-top: 50px;
background-color: #eeeeee; border-top: 1px solid #dddddd;
border-top: 1px solid #dddddd; } background-color: #eeeeee; }
footer { footer {
padding: 20px 0; padding: 20px 0;