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

First pass at masthead styling.

Browse source
This commit is contained in:
Barry Clark 2014-02-17 10:07:14 -05:00
parent db4dceaba5
commit 9931bd1ed2
4 changed files with 72 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_config.yml
View file

@ -3,7 +3,7 @@
# #
# The name of your site # The name of your site
name: Jekyll Boilerplate name: Barry Clark
# A short bio or description # A short bio or description
description: Short bio of description placeholder. description: Short bio of description placeholder.

4
_layouts/default.html
View file

@ -22,8 +22,8 @@
<body> <body>
<header class="masthead"> <header class="masthead">
<img src="{{ site.avatar }}" class="avatar" /> <img src="{{ site.avatar }}" class="avatar" />
<a href="/" class="name">{{ site.name }}</a> <a href="/" class="site-name">{{ site.name }}</a>
<p class="description">{{ site.description }}</p> <p class="site-description">{{ site.description }}</p>
<nav> <nav>
<a href="/">Blog</a> <a href="/">Blog</a>

46
scss/style.scss
View file

@ -105,21 +105,46 @@ img {
// LAYOUT / SECTIONS // LAYOUT / SECTIONS
// //
.logo { //
// .masthead
//
.masthead {
margin: 20px 0 70px;
padding-bottom: 20px;
border-bottom: 2px solid $darkGray;
}
.avatar {
float: left;
width: 35px;
margin-right: 10px;
border-radius: 5px;
}
.site-name {
float: left; float: left;
a { font-family: $helveticaNeue;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
@include mobile {
font-size: 22px;
}
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: $darkGray; color: $darkGray;
&:hover, &:active { &:hover, &:active {
color: $blue; text-decoration: none;
}
} }
} }
.avatar { .site-description {
border-radius: 6px; float: left;
display: none;
} }
nav { nav {
@ -137,15 +162,12 @@ nav {
text-align: right; text-align: right;
font-weight: 300; font-weight: 300;
letter-spacing: 1px; letter-spacing: 1px;
color: $gray; color: $darkGray;
&:hover, &:active { &:hover, &:active {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: $darkGray; color: $darkGray;
&:hover, &:active {
color: $blue;
}
} }
} }
} }
@ -158,6 +180,10 @@ nav {
} }
} }
//
// .main
//
.posts > .post { .posts > .post {
padding-bottom: 2em; padding-bottom: 2em;
border-bottom: 1px solid $lighterGray; border-bottom: 1px solid $lighterGray;

36
style.css
View file

@ -351,17 +351,35 @@ img {
color: black; color: black;
background: #eeeeee; } background: #eeeeee; }
.logo { .masthead {
float: left; } margin: 20px 0 70px;
.logo a { padding-bottom: 20px;
border-bottom: 2px solid #333333; }
.avatar {
float: left;
width: 35px;
margin-right: 10px;
border-radius: 5px; }
.site-name {
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: #333333; } color: #333333; }
.logo a:hover, .logo a:active { @media screen and (max-width: 520px) {
color: #4183c4; } .site-name {
font-size: 22px; } }
.site-name:hover, .site-name:active {
text-decoration: none; }
.avatar { .site-description {
border-radius: 6px; } float: left;
display: none; }
nav { nav {
float: right; float: right;
@ -375,13 +393,11 @@ nav {
text-align: right; text-align: right;
font-weight: 300; font-weight: 300;
letter-spacing: 1px; letter-spacing: 1px;
color: #666666; } color: #333333; }
nav a:hover, nav a:active { nav a:hover, nav a:active {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: #333333; } color: #333333; }
nav a:hover:hover, nav a:hover:active, nav a:active:hover, nav a:active:active {
color: #4183c4; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.logo, nav { .logo, nav {