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
name: Jekyll Boilerplate
name: Barry Clark
# A short bio or description
description: Short bio of description placeholder.

4
_layouts/default.html
View file

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

56
scss/style.scss
View file

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

40
style.css
View file

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