diff --git a/_layouts/default.html b/_layouts/default.html index 14d2993f98..7315bbdd57 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,36 +4,28 @@ {% include head.html %} - -
-
- -

{{ site.title | downcase }}

+
- -
- {{ content }} -
- - +

{{ site.subtitle }}

+
+ + +
+ {{ content }} +
+ diff --git a/_sass/_base.scss b/_sass/_base.scss index 9622301306..6b04d5c472 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -30,7 +30,7 @@ h4, h5, h6 { color: $default-shade; - font-family: $palatino; + font-family: $sans-font; line-height: normal; } diff --git a/_sass/_catalogue.scss b/_sass/_catalogue.scss index 0b582d755a..176030cd9c 100644 --- a/_sass/_catalogue.scss +++ b/_sass/_catalogue.scss @@ -2,6 +2,7 @@ text-align: center; &-item { + display: inline-block; padding: 1.5rem 0; &:first-child { @@ -11,20 +12,27 @@ &:last-child { padding-bottom: 2.5rem; } + + &:hover .catalogue-line, + &:focus .catalogue-line { + width: 6rem; + } } &-title { - @include transition(all .3s ease-out); - border-bottom: 1px solid $white; - border-top: 1px solid $white; color: $default-shade; - font-family: $palatino; - font-size: 1.5rem; + display: block; + font-family: $sans-font; + font-size: 2rem; font-weight: 700; - padding: .5rem 1rem; + margin: .5rem 0; + } - &:hover { - border-color: $default-tint; - } + &-line { + @include transition(all .3s ease-out); + border-top: .2rem solid $default-shade; + display: block; + margin: 0 auto; + width: 2rem; } } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 91c9da1f9f..30a8cdc96b 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -4,20 +4,30 @@ width: 80%; } -header { - padding: 2rem 0 0; - text-align: center; +main, +footer, +.nav-container { + margin: 0 auto; + max-width: 800px; + width: 80%; +} - * { - margin: 0; +.nav { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .1); + overflow: auto; + + &-container { + margin: 1rem auto; + position: relative; + text-align: center; } - h2 { - @include transition(all .3s ease-out); + &-title { + @include transition(all .2s ease-out); color: $default-color; display: inline-block; - font-size: 2.8rem; - font-weight: 400; + margin: 0; + padding-right: .2rem; &:hover, &:focus { @@ -25,39 +35,59 @@ header { } } - h4 { + &-subtitle { color: $default-tint; - font-size: .8rem; + display: inline-block; + font-family: $palatino; font-weight: 400; - letter-spacing: .1rem; + margin: 0; + } + + ul { + list-style-type: none; + margin: 1rem 0 0; + padding: 0; + text-align: center; } - .line { - border-top: 1px solid $default-color; - display: block; - margin: 0 auto .8rem; - width: 1rem; + li { + @include transition(all .2s ease-out); + color: $default-color; + display: inline-block; + opacity: .6; + padding: 0 2rem 0 0; + + &:last-child { + padding-right: 0; + } + + &:hover, + &:focus { + opacity: 1; + } } - .nav-container { - border-bottom: .5px solid $grey-2; - border-top: .5px solid $grey-2; - margin-top: 1.5rem; + a { + color: $default-color; + font-family: $sans-font; } +} - nav { - display: flex; - justify-content: space-around; - margin: .5rem auto; - max-width: 350px; +@media (min-width: 600px) { + .nav { + &-container { + text-align: left; + } - a { - color: $default-color; - font-family: $palatino; + ul { + bottom: 0; + position: absolute; + right: 0; } } } + footer { font-family: $palatino; padding: 2rem 0; diff --git a/_sass/_post.scss b/_sass/_post.scss index 2886922bec..648eb23efb 100644 --- a/_sass/_post.scss +++ b/_sass/_post.scss @@ -21,7 +21,7 @@ } &-line { - border-top: .4rem solid $default-color; + border-top: .4rem solid $default-shade; display: block; margin: 0 auto 3rem; width: 4rem; diff --git a/index.html b/index.html index 87338faffe..465f387a01 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ {% for post in paginator.posts %}
{{ post.title }} +
+
{% endfor %}