diff --git a/_sass/includes/_header.scss b/_sass/includes/_header.scss index 7773e3150..8ad1c6b53 100644 --- a/_sass/includes/_header.scss +++ b/_sass/includes/_header.scss @@ -5,15 +5,26 @@ padding: 20px 45px; background: $brand-color; border-bottom: 1px solid $border-color; - float: left; width: 100%; - .branding { + .branding-container { flex: auto; - display: block; + } + + .branding { + display: inline-block; + width: 160px; + height: 60px; @media (max-width: 480px) { - margin-bottom: 10px; + margin-bottom: 5px; + width: 120px; + height: 40px; + } + + &:hover { + background: none; + text-decoration: none; } &:before { @@ -26,6 +37,8 @@ @media (max-width: 480px) { margin: 0 auto; + width: 120px; + height: 40px; } } } @@ -35,18 +48,18 @@ } .avatar { - height: 2em; - width: 2em; + height: 2rem; + width: 2rem; float: left; margin-top: -3px; - border-radius: 0.2em; - margin-right: 1em; + border-radius: 0.2rem; + margin-right: 1rem; } .site-title { float: left; font-weight: bold; - font-size: 1em; + font-size: 1rem; line-height: 1.5; } @@ -62,31 +75,18 @@ li { display: inline-block; - margin-right: 0.4em; + margin-right: 0.4rem; } } - .branding, - .site-nav { + .search-bar {} + + .branding-container, + .site-nav, + .search-bar { @media (max-width: 480px) { flex: 0 0 100%; text-align: center; } } } - - -/* -.search { - display: block; - background: $brand-black; - color: #F5F5F5; - - @media (min-width: 480px) { - margin-left: 15px; - } - - @media (max-width: 480px) { - margin-top: 10px; - } -}*/ diff --git a/_sass/layouts/_index.scss b/_sass/layouts/_index.scss index a52752ef8..1cf9c3153 100644 --- a/_sass/layouts/_index.scss +++ b/_sass/layouts/_index.scss @@ -5,7 +5,7 @@ width: 100%; background-color:$header-desc-background-color; background-size: cover; - font-size: 1.2em; + font-size: 1.2rem; text-align: center; color: $header-desc-text-color; } @@ -14,24 +14,44 @@ } // Post listing .posts { - .post-teaser { - @extend %padding-regular; + &-teaser { width: 100%; margin-bottom: 0; display: inline-block; background-size: $feature-image-size; - border-bottom: 1px solid $border-color; + p a:hover { @extend %link-hover; } } + + &-title { + @extend %h2; + margin: 0 0 5px; + + a { + color: $brand-black; + text-decoration: none; + } + } + + &-date { + display: inline-block; + margin-bottom: 1.5rem; + } + + &-button { + margin-top: 1.5rem; + } + .excerpt { - margin-top: 1em; + margin-top: 1rem; + margin-bottom: 1.5rem; } } // Pagination .pagination .button { - margin: 0 1.5em; + margin: 0 1.5rem; i { vertical-align: middle; } diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss index e0d9532d0..ae9047f80 100644 --- a/_sass/layouts/_posts.scss +++ b/_sass/layouts/_posts.scss @@ -1,48 +1,35 @@ -article, .comments { @extend %padding-regular; border-bottom: 1px solid $border-color; float: left; width: 100%; } + article { header { - margin-bottom: 6%; text-align: center; } a:hover { @extend %link-hover; } .footnotes { - font-size: 0.9em; - } -} -header { - h1 { - margin: 0; - } - .meta { - color: rgba($brand-black, .5); - font-size: 0.9em; - letter-spacing: 0.1em; - margin: 0; - text-transform: uppercase; + font-size: 0.9rem; } } + .feature-image { padding: 0%; .post-link { color: $feature-image-text-color; } + header { color: $feature-image-text-color; background-size: $feature-image-size; margin-bottom: 0; padding: $padding-large/2.5 $padding-large; - .meta { - color: rgba($feature-image-text-color, .7); - } } + .post-content { @extend %padding-regular; } @@ -59,28 +46,12 @@ header { } .page-title { - font-size: 1.2em; - margin-bottom: 1em; + font-size: 1.2rem; + margin-bottom: 1rem; width: 100%; } - a { - padding: 2em 3em; - border: 1px solid rgba(255, 255, 255, 0); - text-align: center; - width: 50%; - } - a:hover { - @extend a.button:hover; - } - i { vertical-align: middle; } } -// Share button -.share-button { - width:100%; - float: left; - @extend %padding-regular; -} diff --git a/_sass/objects/_buttons.scss b/_sass/objects/_buttons.scss new file mode 100644 index 000000000..c23bfd487 --- /dev/null +++ b/_sass/objects/_buttons.scss @@ -0,0 +1,20 @@ +.button { + font-size: 1.1rem; + text-transform: uppercase; + font-family: $font-family-headings; + font-weight: lighter; + color: $brand-black; + display: inline-block; + letter-spacing: 0.05em; + text-decoration: underline; + + &:hover { + text-decoration: none; + background: $brand-yellow; + } + + &:visited, + &:visited:hover { + color: #999; + } +} diff --git a/_sass/objects/_meta.scss b/_sass/objects/_meta.scss new file mode 100644 index 000000000..8cea12144 --- /dev/null +++ b/_sass/objects/_meta.scss @@ -0,0 +1,35 @@ +.meta { + position: relative; + + @media (min-width: 480px) { + font-size: 1.5rem; + } + + @media (max-width: 480px) { + font-size: 1.3rem; + } + + &-content { + font-family: $font-family-headings; + display: inline-block; + font-weight: lighter; + margin-left: 1%; + margin: 0; + z-index: 1; + position: relative; + text-transform: uppercase; + letter-spacing: 0.05em + } + + &:before { + content: ""; + position: absolute; + z-index: 0; + bottom: -6px; + left: -1%; + display: block; + width: 108%; + height: 1.1em; + background-color: $brand-yellow; + } +} diff --git a/index.html b/index.html index 98bac128c..b2e992b8e 100644 --- a/index.html +++ b/index.html @@ -12,19 +12,24 @@
{% for post in paginator.posts %} -
-
-

- +
+
+

+ {{ post.title }} -

-

- {{ post.date | date: "%B %-d, %Y" }} - {% include reading_time.html content=post.content %} +

+ + + +

+ {{ post.excerpt }}

-
-
- {{ post.excerpt }} + {{ site.theme_settings.str_continue_reading }}