diff --git a/_layouts/default.html b/_layouts/default.html index 915d7ac..22c6559 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -20,18 +20,18 @@
-
- - {{ site.name }} -

-

{{ site.description }}

+
+ + +
+

{{ site.name }}

+

{{ site.description }}

+
- -
diff --git a/scss/style.scss b/scss/style.scss index ff12bc9..9078450 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -127,6 +127,17 @@ img { 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 @@ -137,24 +148,19 @@ img { // .wrapper-masthead { - //background-color: #e8e8f2; margin-bottom: 40px; } .masthead { padding: 20px 0; border-bottom: 1px solid $lighterGray; + @include mobile { text-align: center; } - - // @TODO: OMG this is so bad, I just can't - br { - visibility: none; - } } -.avatar { +.site-avatar { float: left; width: 70px; height: 70px; @@ -171,66 +177,68 @@ img { } } -.site-name { +.site-info { 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-weight: 300; font-size: 28px; 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 { - float: left; - font-size: 16px; - margin: 0; - margin-top: -5px; + margin: -5px 0 0 0; color: #777; - + font-size: 16px; + @include mobile { - float: none; - display: block; margin: 3px 0; } } nav { 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-size: 18px; + @include mobile { float: none; - display: block; margin-top: 15px; + display: block; font-size: 16px; } - // nav has it's own link highlighting a { margin-left: 25px; + color: $darkGray; text-align: right; font-weight: 300; letter-spacing: 1px; - color: $darkGray; &:hover, &:active { + color: $darkGray; text-decoration: none; cursor: pointer; - color: $darkGray; } @include mobile { @@ -239,22 +247,12 @@ nav { } } -.logo, nav { - @include mobile { - float: none; - width: 100%; - text-align: center; - } -} + // // .main // -.wrapper-posts { - -} - .posts > .post { padding-bottom: 2em; border-bottom: 1px solid $lighterGray; @@ -275,19 +273,19 @@ nav { } blockquote { - border-left: 2px solid $gray; - font-size: 22px; - font-style: italic; margin: 1.8em .8em; + border-left: 2px solid $gray; padding: 0.1em 1em; color: $gray; + font-size: 22px; + font-style: italic; } } .wrapper-footer { margin-top: 50px; - background-color: #eee; border-top: 1px solid #ddd; + background-color: #eee; } footer { diff --git a/style.css b/style.css index acc9f0a..0007b33 100644 --- a/style.css +++ b/style.css @@ -403,6 +403,13 @@ img { color: black; background: #eeeeee; } +.clearfix:before, .clearfix:after { + content: " "; + display: table; } + +.clearfix:after { + clear: both; } + .wrapper-masthead { margin-bottom: 40px; } @@ -412,82 +419,74 @@ img { @media screen and (max-width: 520px) { .masthead { text-align: center; } } - .masthead br { - visibility: none; } -.avatar { +.site-avatar { float: left; width: 70px; height: 70px; margin-right: 15px; } @media screen and (max-width: 520px) { - .avatar { + .site-avatar { float: none; display: block; margin: 0 auto; } } - .avatar img { + .site-avatar img { border-radius: 5px; } +.site-info { + float: left; } + @media screen and (max-width: 520px) { + .site-info { + float: none; + display: block; + margin: 0 auto; } } + .site-name { - float: left; + margin: 0; + color: #333333; + text-decoration: none; + cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 28px; - letter-spacing: 1px; - text-decoration: none; - cursor: pointer; - color: #333333; } - @media screen and (max-width: 520px) { - .site-name { - float: none; - display: block; } } - .site-name:hover, .site-name:active { + letter-spacing: 1px; } + .site-name a:hover, .site-name a:active { + color: #4183c4; text-decoration: none; } .site-description { - float: left; - font-size: 16px; - margin: 0; - margin-top: -5px; - color: #777777; } + margin: -5px 0 0 0; + color: #777777; + font-size: 16px; } @media screen and (max-width: 520px) { .site-description { - float: none; - display: block; margin: 3px 0; } } nav { float: right; - margin-top: -25px; + margin-top: 23px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; } @media screen and (max-width: 520px) { nav { float: none; - display: block; margin-top: 15px; + display: block; font-size: 16px; } } nav a { margin-left: 25px; + color: #333333; text-align: right; font-weight: 300; - letter-spacing: 1px; - color: #333333; } + letter-spacing: 1px; } nav a:hover, nav a:active { + color: #333333; text-decoration: none; - cursor: pointer; - color: #333333; } + cursor: pointer; } @media screen and (max-width: 520px) { nav a { margin: 0 10px; } } -@media screen and (max-width: 520px) { - .logo, nav { - float: none; - width: 100%; - text-align: center; } } - - .posts > .post { padding-bottom: 2em; border-bottom: 1px solid #eeeeee; } @@ -502,17 +501,17 @@ nav { color: #4183c4; text-decoration: none; } .post blockquote { - border-left: 2px solid #666666; - font-size: 22px; - font-style: italic; margin: 1.8em 0.8em; + border-left: 2px solid #666666; padding: 0.1em 1em; - color: #666666; } + color: #666666; + font-size: 22px; + font-style: italic; } .wrapper-footer { margin-top: 50px; - background-color: #eeeeee; - border-top: 1px solid #dddddd; } + border-top: 1px solid #dddddd; + background-color: #eeeeee; } footer { padding: 20px 0;