diff options
-rw-r--r-- | _config.yml | 2 | ||||
-rw-r--r-- | _layouts/default.html | 4 | ||||
-rwxr-xr-x | scss/style.scss | 52 | ||||
-rw-r--r-- | style.css | 40 |
4 files changed, 70 insertions, 28 deletions
diff --git a/_config.yml b/_config.yml index 9e58c71..db57a35 100644 --- a/_config.yml +++ b/_config.yml @@ -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. diff --git a/_layouts/default.html b/_layouts/default.html index 0992bcc..d7f8c43 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -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> diff --git a/scss/style.scss b/scss/style.scss index 6b13419..29b4a0e 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -105,21 +105,46 @@ img { // LAYOUT / SECTIONS // -.logo { +// +// .masthead +// + +.masthead { + margin: 20px 0 70px; + padding-bottom: 20px; + border-bottom: 2px solid $darkGray; +} + +.avatar { float: left; + width: 35px; - a { + 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; - cursor: pointer; - color: $darkGray; - &:hover, &:active { - color: $blue; - } } } -.avatar { - border-radius: 6px; +.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; @@ -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 { |