From 2293524d93abbad5b546238370cf53b1cc9ff1a1 Mon Sep 17 00:00:00 2001 From: Daniel Barber Date: Tue, 15 Oct 2019 21:18:52 -0400 Subject: [PATCH] Add blog pagination and adapt to dark --- assets/sass/components/_post.scss | 4 +++ assets/sass/components/_posts.scss | 19 ++++++++++ assets/sass/components/_site-header.scss | 4 +++ assets/sass/elements/_a.scss | 10 ++++++ assets/sass/elements/_html.scss | 6 ++++ assets/sass/main.scss | 1 + assets/sass/settings/_colors.scss | 1 + layouts/section/blog.html | 14 ++++++-- ...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 35 +++++++++++++++++++ 9 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 assets/sass/components/_posts.scss diff --git a/assets/sass/components/_post.scss b/assets/sass/components/_post.scss index fac90592..a49dfc6e 100644 --- a/assets/sass/components/_post.scss +++ b/assets/sass/components/_post.scss @@ -9,6 +9,10 @@ & > * { @include container } + + @media (prefers-color-scheme: dark) { + border-bottom: 1px dashed $border-color-dark; + } } .post__title { diff --git a/assets/sass/components/_posts.scss b/assets/sass/components/_posts.scss new file mode 100644 index 00000000..0cdfcaa8 --- /dev/null +++ b/assets/sass/components/_posts.scss @@ -0,0 +1,19 @@ +.posts__pagination { + @include container; + display: flex; + margin-top: 1em; + margin-bottom: 1em; +} + +.posts__next-link, +.posts__prev-link { + flex-grow: 1; +} + +.posts__next-link { + text-align: left; +} + +.posts__prev-link { + text-align: right; +} diff --git a/assets/sass/components/_site-header.scss b/assets/sass/components/_site-header.scss index cb5cd728..218f3d57 100644 --- a/assets/sass/components/_site-header.scss +++ b/assets/sass/components/_site-header.scss @@ -1,4 +1,8 @@ .site-header { padding: 0 $pad-min; border-bottom: 1px dashed $text-color; + + @media (prefers-color-scheme: dark) { + border-bottom: 1px dashed $text-color-dark; + } } diff --git a/assets/sass/elements/_a.scss b/assets/sass/elements/_a.scss index 5bf8ddad..5e95da3f 100644 --- a/assets/sass/elements/_a.scss +++ b/assets/sass/elements/_a.scss @@ -4,6 +4,16 @@ a { &:hover, &:focus { + color: $link-color-hover; text-decoration: underline; } + + @media (prefers-color-scheme: dark) { + color: $link-color-dark; + + &:hover, + &:focus { + color: $link-color-hover-dark; + } + } } diff --git a/assets/sass/elements/_html.scss b/assets/sass/elements/_html.scss index be79b2ef..3dca4193 100644 --- a/assets/sass/elements/_html.scss +++ b/assets/sass/elements/_html.scss @@ -1,8 +1,14 @@ html { + background-color: $background-color; color: $text-color; font-family: $body-font-family; font-size: calc(0.85vmin + 13px); font-style: normal; font-weight: 300; line-height: 1.4; + + @media (prefers-color-scheme: dark) { + background-color: $background-color-dark; + color: $text-color-dark; + } } diff --git a/assets/sass/main.scss b/assets/sass/main.scss index d75cb56e..919870d7 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -33,6 +33,7 @@ // This is where majority of our work takes place and our UI components // are often composed of Objects and Components @import "components/site-header"; +@import "components/posts"; @import "components/post"; // 7. Utilities – utilities and helper classes with ability to override diff --git a/assets/sass/settings/_colors.scss b/assets/sass/settings/_colors.scss index e32a42dc..4751673a 100644 --- a/assets/sass/settings/_colors.scss +++ b/assets/sass/settings/_colors.scss @@ -18,6 +18,7 @@ $border-color-dark: #666; $link-color: rgb(24, 99, 161); $link-color-dark: lighten($link-color, 25%); $link-color-hover: lighten($link-color, 10%); +$link-color-hover-dark: lighten($link-color-dark, 10%); $footer-link-color: lighten($text-color, 25%); $footer-link-color-hover: lighten($link-color, 10%); diff --git a/layouts/section/blog.html b/layouts/section/blog.html index d0450c16..202b0788 100644 --- a/layouts/section/blog.html +++ b/layouts/section/blog.html @@ -1,6 +1,6 @@ {{ define "main" }} -
- {{ range .Pages }} +
+ {{ range .Paginator.Pages }} {{ end }}
+ +
+ {{ if .Paginator.HasNext }} + ← Older + {{ end }} + + {{ if .Paginator.HasPrev }} + Newer → + {{ end }} +
{{ end }} diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 24f19a78..0b9c5314 100644 --- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -314,7 +314,13 @@ a { color: #1863a1; text-decoration: none; } a:hover, a:focus { + color: #1f7ecd; text-decoration: underline; } + @media (prefers-color-scheme: dark) { + a { + color: #53a3e5; } + a:hover, a:focus { + color: #80bbec; } } blockquote { padding-left: 2rem; @@ -339,12 +345,17 @@ h1 { font-size: 2rem; } html { + background-color: #fff; color: #333; font-family: "Mercury SSm A", "Mercury SSm B", serif; font-size: calc(0.85vmin + 13px); font-style: normal; font-weight: 300; line-height: 1.4; } + @media (prefers-color-scheme: dark) { + html { + background-color: #282828; + color: #ddd; } } pre { overflow: auto; @@ -361,6 +372,27 @@ pre { .site-header { padding: 0 6.5%; border-bottom: 1px dashed #333; } + @media (prefers-color-scheme: dark) { + .site-header { + border-bottom: 1px dashed #ddd; } } + +.posts__pagination { + margin-left: auto; + margin-right: auto; + max-width: 40rem; + display: flex; + margin-top: 1em; + margin-bottom: 1em; } + +.posts__next-link, +.posts__prev-link { + flex-grow: 1; } + +.posts__next-link { + text-align: left; } + +.posts__prev-link { + text-align: right; } .post { border-bottom: 1px dashed #ccc; @@ -371,6 +403,9 @@ pre { margin-left: auto; margin-right: auto; max-width: 40rem; } + @media (prefers-color-scheme: dark) { + .post { + border-bottom: 1px dashed #666; } } .post__title { margin-bottom: 0.25em; }