diff options
| author | Olivier Fredon <the2ne@gmail.com> | 2016-10-17 17:51:22 +0300 |
|---|---|---|
| committer | Olivier Fredon <the2ne@gmail.com> | 2016-10-17 17:51:22 +0300 |
| commit | 7750f1d34ea42ad916df85d1050784eda141d9b6 (patch) | |
| tree | 5fc888c87949033379917aaa2fc71a6b7bcce6ae | |
| parent | a8febfa5e80e3149f9d60dad04a4def8aff4f861 (diff) | |
mixin for before and pagination style
| -rw-r--r-- | layouts/_default/list.html | 1 | ||||
| -rw-r--r-- | layouts/partials/pagination.html | 1 | ||||
| -rw-r--r-- | static/css/style.css | 40 | ||||
| -rw-r--r-- | static/sass/_mixins.scss | 8 | ||||
| -rw-r--r-- | static/sass/custom/layout.scss | 56 | ||||
| -rw-r--r-- | static/sass/custom/typography.scss | 2 |
6 files changed, 88 insertions, 20 deletions
diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 05fe822..cec982e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,4 @@ {{ partial "head" . }} - <body class="template template--list"> <section class="header-wrapper"> {{ partial "header" . }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 81201ea..f0099fd 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,7 +1,6 @@ {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} <nav class="pagination" role="pagination"> <span class="pagination__infos">Page <span class="pagination__current">{{ .Paginator.PageNumber }}</span> of <span class="pagination__total">{{ .Paginator.TotalPages }}</span></span> - {{ if .Paginator.HasPrev }} <a class="pagination__prev" href="{{ .Paginator.Prev.URL }}">Previous</a> {{ end }} diff --git a/static/css/style.css b/static/css/style.css index bb61016..924f140 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -523,7 +523,7 @@ html { color: #FFFFFF; content: "|"; display: inline-block; - margin-right: .5em; + margin-right: 0.5em; } .content { @@ -549,6 +549,7 @@ html { .post__meta { color: #52616D; display: table; + font-style: italic; width: 100%; } @@ -588,7 +589,7 @@ html { color: #52616D; content: "•"; display: inline-block; - margin-right: .5em; + margin-right: 0.5em; } .post__meta .post__meta__infos { @@ -599,9 +600,44 @@ html { text-align: right; } +.pagination { + color: #52616D; + margin-top: 1.5em; + text-align: right; +} + +.pagination .pagination__infos + a { + margin-left: .25em; +} + +.pagination .pagination__current { + color: #C44741; + font-size: 1.5em; +} + +.pagination .pagination__infos + a::before { + color: #E5E1D1; + content: "•"; + display: inline-block; + margin-right: 0.5em; +} + +.pagination .pagination__prev + .pagination__next { + margin-left: .25em; +} + +.pagination .pagination__prev + .pagination__next::before { + color: #E5E1D1; + content: "|"; + display: inline-block; + margin-right: 0.5em; +} + html { color: #2C343B; font-size: 1em; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; } .template { diff --git a/static/sass/_mixins.scss b/static/sass/_mixins.scss index b6f6a40..c845a54 100644 --- a/static/sass/_mixins.scss +++ b/static/sass/_mixins.scss @@ -16,4 +16,12 @@ @mixin _background-opacity($color, $opacity: 0.5) { background-color: $color; /* The Fallback */ background-color: rgba($color, $opacity); +} + +/// Separator on ::before +@mixin _separator-before($color: inherit, $content: "•", $margin: 0.5em) { + color: $color; + content: $content; + display: inline-block; + margin-right: $margin; }
\ No newline at end of file diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss index 06a3c5a..6a99b84 100644 --- a/static/sass/custom/layout.scss +++ b/static/sass/custom/layout.scss @@ -48,10 +48,7 @@ html { } .item + .item::before { - color: $white; - content:"|"; - display: inline-block; - margin-right: .5em; + @include _separator-before($white, "|"); } } @@ -84,6 +81,7 @@ html { .post__meta { color: $light; display: table; + font-style: italic; width: 100%; a { color: $light; } @@ -98,20 +96,17 @@ html { padding-left: 0; list-style-type: none; - > * { - display: inline-block; - } + > * { + display: inline-block; + } - li + li { - margin-left: .25em; - } + li + li { + margin-left: .25em; + } - li + li::before { - color: $light; - content:"•"; - display: inline-block; - margin-right: .5em; - } + li + li::before { + @include _separator-before($light); + } } .post__meta__infos { @@ -121,4 +116,33 @@ html { .post__meta__tags { text-align: right; } +} + + +// Pagination +.pagination { + color: $light; + margin-top: 1.5em; + text-align: right; + + .pagination__infos + a { + margin-left: .25em; + } + + .pagination__current { + color: $contrast; + font-size: $fontSize * 1.5; + } + + .pagination__infos + a::before { + @include _separator-before($neutral); + } + + .pagination__prev + .pagination__next { + margin-left: .25em; + } + + .pagination__prev + .pagination__next::before { + @include _separator-before($neutral, "|"); + } }
\ No newline at end of file diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss index 83d79b7..dda018a 100644 --- a/static/sass/custom/typography.scss +++ b/static/sass/custom/typography.scss @@ -5,6 +5,8 @@ html { color: $base; font-size: $fontSize; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; } .template { |