From c44d12cfccf2ce144aba7a08e41adc3c7cf46190 Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Mon, 4 Jan 2021 13:20:55 +0100 Subject: [PATCH] added new circles pagination style (activatable in site config); added transition to everything; separated pagination in its own partial --- README.md | 2 ++ assets/scss/style.scss | 29 +++++++++++++++++++ layouts/index.html | 20 +------------ layouts/partials/paginator.html | 22 ++++++++++++++ ...s_17a317b87063135b4df76ed814d78726.content | 2 +- ...scss_17a317b87063135b4df76ed814d78726.json | 2 +- 6 files changed, 56 insertions(+), 21 deletions(-) create mode 100644 layouts/partials/paginator.html diff --git a/README.md b/README.md index 6303490..109a003 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,8 @@ paginate = 5 # number of articles per page in the index showTags = true # show the Tags menu item; default true showRss = true # show the link for the RSS feed; default true + navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circle" + # enable comments support with commento using the script from your server commento = "https://example.com/js/commento.js" diff --git a/assets/scss/style.scss b/assets/scss/style.scss index e45bf68..bf48456 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -9,6 +9,10 @@ $accent_color: {{ .Site.Params.accentColor | default "#db5793" }}; color: $fg_color; } +* { + transition: all .15s ease-in-out; +} + body, html { font-family: "Symbols Nerd Font", "JetBrains Mono", monospace; margin: 0; @@ -147,6 +151,31 @@ pre code { a { color: $accent_color; } + &.nav-circles { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; + a, span { + margin: 5px; + text-align: center; + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; + padding: auto; + border-radius: 100%; + background-color: rgba($dim_fg_color, .4); + color: $fg_color; + } + span { + background-color: $accent_color; + } + a:hover { + background-color: $accent_color; + } + } } h1, h2, h3, h4, h5, h6 { diff --git a/layouts/index.html b/layouts/index.html index a31b43b..177dce0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -28,24 +28,6 @@
{{ end }} - - {{ if gt .Paginator.TotalPages 1 }} - - {{ end }} + {{- partial "paginator.html" . -}} {{ end }} diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html new file mode 100644 index 0000000..14fda80 --- /dev/null +++ b/layouts/partials/paginator.html @@ -0,0 +1,22 @@ +{{ if gt .Paginator.TotalPages 1 }} +
+ {{ if .Paginator.HasPrev }} + <<< + {{ end }} + {{ $currentPage := .Paginator.PageNumber }} + {{ range .Paginator.Pagers }} + {{ if ne .PageNumber $currentPage }} + {{ .PageNumber }} + {{ else }} + [{{ .PageNumber }}] + {{ end }} + {{ end }} + {{ if .Paginator.HasNext }} + >>> + {{ end }} +
+{{ end }} diff --git a/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content b/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content index aefffb1..3c3aaff 100644 --- a/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content +++ b/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content @@ -1,3 +1,3 @@ -::selection,::-moz-selection{background:#db5793;color:#fff}body,html{font-family:"Symbols Nerd Font", "JetBrains Mono", monospace;margin:0;padding:0;background-color:#242629;color:#fff}a{color:#fff;text-decoration:none;border-bottom:2px solid #fff}a:hover{border-color:#db5793 !important}#content{max-width:1000px;padding:15px;margin:auto}footer{color:#bababa}footer a{color:#bababa}footer hr{margin-top:50px}#titleContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}#titleContainer h1{font-weight:normal;font-size:1.6em;margin:0}#titleContainer img{margin-right:10px;width:50px;max-height:50px;border-radius:5px}nav ul,#links ul{list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;padding:0;margin:0}nav{font-size:.9em}nav ul li{border-right:1px solid #db5793}nav ul li:last-child{border-right:none}nav ul li a{padding:2px 20px;color:#db5793}nav ul li a:hover{text-decoration:underline}#links{padding:15px 0}article img,.articlePreview img{margin:auto;display:block;max-width:80%}article pre,article code,.articlePreview pre,.articlePreview code{overflow:auto}article pre,.articlePreview pre{padding:20px;border:1px solid #4f4f4f;border-radius:3px}code{font-family:"JetBrains Mono", monospace;font-size:.8em;padding:2px;border:1px solid #4f4f4f;border-radius:3px}pre code{border:none;border-radius:none;padding:0}.date,.date a{color:#bababa;border-color:#bababa;font-size:.9em}#pageNavigation a,.nerdlink a,nav a{border-bottom:none}#pageNavigation a:hover,.nerdlink a:hover,nav a:hover{border-bottom:none}#pageNavigation{text-align:right}#pageNavigation a{color:#db5793}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#db5793;border-bottom:none}.nerd,.nerdlink{font-family:"Symbols Nerd Font", "JetBrains Mono";font-size:1.2em;margin:5px;display:inline-block}.nerdlink{color:#fff;border-bottom:none;position:relative}.nerdlink span{position:absolute;top:1.5em;left:50%;transform:translateX(-50%);padding:2px;border:1px solid #4f4f4f;border-radius:3px;color:#fff;display:none}.nerdlink:hover{color:#db5793;text-decoration:none;border-bottom:none}.nerdlink:hover span{display:block}.card{margin:50px 0}.card:first-child{margin-top:0}.card hr{margin:50px 0}ul li{margin:5px 0}#commento{color:#fff;font-family:"JetBrains Mono", monospace}#commento textarea,#commento #commento-markdown-help-root{background:rgba(255,255,255,0.05);color:#fff;border-radius:0;border:none}#commento textarea td,#commento textarea td>*,#commento textarea td>*>*,#commento #commento-markdown-help-root td,#commento #commento-markdown-help-root td>*,#commento #commento-markdown-help-root td>*>*{color:#fff}#commento textarea td pre,#commento textarea td>* pre,#commento textarea td>*>* pre,#commento #commento-markdown-help-root td pre,#commento #commento-markdown-help-root td>* pre,#commento #commento-markdown-help-root td>*>* pre{font-family:"JetBrains Mono", monospace;color:#bababa}#commento #commento-submit-button-root{background:#db5793;color:#fff}#commento .commento-name{color:#bababa}#commento .commento-sort-policy-buttons a{border-bottom:none}#commento .commento-sort-policy-buttons .commento-sort-policy-button-selected{color:#db5793}#commento .commento-card{border-top:none;margin:25px 0}#commento .commento-body>*,#commento .commento-body *>*,#commento .commento-body>*>*>*,#commento .commento-body>*>*>*>*,#commento .commento-body>*>*>*>*>*{color:#fff;font-family:"JetBrains Mono", monospace} +::selection,::-moz-selection{background:#db5793;color:#fff}*{transition:all .15s ease-in-out}body,html{font-family:"Symbols Nerd Font", "JetBrains Mono", monospace;margin:0;padding:0;background-color:#242629;color:#fff}a{color:#fff;text-decoration:none;border-bottom:2px solid #fff}a:hover{border-color:#db5793 !important}#content{max-width:1000px;padding:15px;margin:auto}footer{color:#bababa}footer a{color:#bababa}footer hr{margin-top:50px}#titleContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}#titleContainer h1{font-weight:normal;font-size:1.6em;margin:0}#titleContainer img{margin-right:10px;width:50px;max-height:50px;border-radius:5px}nav ul,#links ul{list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;padding:0;margin:0}nav{font-size:.9em}nav ul li{border-right:1px solid #db5793}nav ul li:last-child{border-right:none}nav ul li a{padding:2px 20px;color:#db5793}nav ul li a:hover{text-decoration:underline}#links{padding:15px 0}article img,.articlePreview img{margin:auto;display:block;max-width:80%}article pre,article code,.articlePreview pre,.articlePreview code{overflow:auto}article pre,.articlePreview pre{padding:20px;border:1px solid #4f4f4f;border-radius:3px}code{font-family:"JetBrains Mono", monospace;font-size:.8em;padding:2px;border:1px solid #4f4f4f;border-radius:3px}pre code{border:none;border-radius:none;padding:0}.date,.date a{color:#bababa;border-color:#bababa;font-size:.9em}#pageNavigation a,.nerdlink a,nav a{border-bottom:none}#pageNavigation a:hover,.nerdlink a:hover,nav a:hover{border-bottom:none}#pageNavigation{text-align:right}#pageNavigation a{color:#db5793}#pageNavigation.nav-circles{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}#pageNavigation.nav-circles a,#pageNavigation.nav-circles span{margin:5px;text-align:center;display:inline-block;width:40px;height:40px;line-height:40px;padding:auto;border-radius:100%;background-color:rgba(186,186,186,0.4);color:#fff}#pageNavigation.nav-circles span{background-color:#db5793}#pageNavigation.nav-circles a:hover{background-color:#db5793}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#db5793;border-bottom:none}.nerd,.nerdlink{font-family:"Symbols Nerd Font", "JetBrains Mono";font-size:1.2em;margin:5px;display:inline-block}.nerdlink{color:#fff;border-bottom:none;position:relative}.nerdlink span{position:absolute;top:1.5em;left:50%;transform:translateX(-50%);padding:2px;border:1px solid #4f4f4f;border-radius:3px;color:#fff;display:none}.nerdlink:hover{color:#db5793;text-decoration:none;border-bottom:none}.nerdlink:hover span{display:block}.card{margin:50px 0}.card:first-child{margin-top:0}.card hr{margin:50px 0}ul li{margin:5px 0}#commento{color:#fff;font-family:"JetBrains Mono", monospace}#commento textarea,#commento #commento-markdown-help-root{background:rgba(255,255,255,0.05);color:#fff;border-radius:0;border:none}#commento textarea td,#commento textarea td>*,#commento textarea td>*>*,#commento #commento-markdown-help-root td,#commento #commento-markdown-help-root td>*,#commento #commento-markdown-help-root td>*>*{color:#fff}#commento textarea td pre,#commento textarea td>* pre,#commento textarea td>*>* pre,#commento #commento-markdown-help-root td pre,#commento #commento-markdown-help-root td>* pre,#commento #commento-markdown-help-root td>*>* pre{font-family:"JetBrains Mono", monospace;color:#bababa}#commento #commento-submit-button-root{background:#db5793;color:#fff}#commento .commento-name{color:#bababa}#commento .commento-sort-policy-buttons a{border-bottom:none}#commento .commento-sort-policy-buttons .commento-sort-policy-button-selected{color:#db5793}#commento .commento-card{border-top:none;margin:25px 0}#commento .commento-body>*,#commento .commento-body *>*,#commento .commento-body>*>*>*,#commento .commento-body>*>*>*>*,#commento .commento-body>*>*>*>*>*{color:#fff;font-family:"JetBrains Mono", monospace} /*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json b/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json index 15a26f0..57782ce 100644 --- a/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json +++ b/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json @@ -1 +1 @@ -{"Target":"css/styles.81abf4db54010641b6b687f1b5be76518825886777cf1f48f162662decb586d1b4ccd79b2e7a5be86d8194b224b395f4344e78a9aadc288a34fe0136a6de738e.css","MediaType":"text/css","Data":{"Integrity":"sha512-gav021QBBkG2tofxtb52UYgliGd3zx9I8WJmLey1htG0zNebLnpb6G2BlLIks5X0NE54qarcKIo0/gE2pt5zjg=="}} \ No newline at end of file +{"Target":"css/styles.9696ec1dbee3dac3deb82ea3595533cc78022970507d78c553ec447011cc8a2517afce0dad87aa462c001effa3dd8520a9aafad924291d7db0b02d59263643cf.css","MediaType":"text/css","Data":{"Integrity":"sha512-lpbsHb7j2sPeuC6jWVUzzHgCKXBQfXjFU+xEcBHMiiUXr84NrYeqRiwAHv+j3YUgqar62SQpHX2wsC1ZJjZDzw=="}} \ No newline at end of file