From c2ea6701260eeb131887220ed5fe04831f22dd4e Mon Sep 17 00:00:00 2001 From: danix Date: Mon, 13 Feb 2023 19:53:37 +0100 Subject: [PATCH] various fixes, added pagination and articles prev/next links. --- assets/sass/components/_breadcrumbs.scss | 41 ++++++++ assets/sass/components/_pagination.scss | 35 ++++++- assets/sass/libs/_my-mixins.scss | 89 +++++++++++++++++ assets/sass/main.scss | 3 +- layouts/articles/list.html | 16 ++- layouts/page/list-baseof.html | 3 - layouts/page/single-baseof.html | 10 ++ layouts/partials/breadcrumbs.html | 4 +- layouts/partials/head-addition.html | 3 +- layouts/partials/pagination.html | 121 +++++++++++++++++++++++ layouts/partials/prev-next.html | 8 ++ layouts/post/single-baseof.html | 37 +++++-- layouts/post/single.html | 9 +- 13 files changed, 353 insertions(+), 26 deletions(-) create mode 100644 assets/sass/components/_breadcrumbs.scss create mode 100644 layouts/partials/pagination.html create mode 100644 layouts/partials/prev-next.html diff --git a/assets/sass/components/_breadcrumbs.scss b/assets/sass/components/_breadcrumbs.scss new file mode 100644 index 0000000..a71e9d6 --- /dev/null +++ b/assets/sass/components/_breadcrumbs.scss @@ -0,0 +1,41 @@ +/// Inspired by: +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Breadcrumbs */ + div#breadcrumbs { + font-size: 1rem; + ol.crumbs { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding-left: 0; + vertical-align: middle; + + &:first-child { + padding-right: 0.75em; + } + + &:last-child { + padding-left: 0.75em; + } + } + + @include breakpoint('<=xsmall') { + li { + &:nth-child(n+2):nth-last-child(n+2) { + display: none; + } + + &:first-child { + padding-right: 0; + } + } + } + } + } diff --git a/assets/sass/components/_pagination.scss b/assets/sass/components/_pagination.scss index 0059795..cb39c39 100644 --- a/assets/sass/components/_pagination.scss +++ b/assets/sass/components/_pagination.scss @@ -67,4 +67,37 @@ } } } - } \ No newline at end of file + } + + + ul.prev-next { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding-left: 0; + vertical-align: middle; + + &:first-child { + padding-right: 0.75em; + } + + &:last-child { + padding-left: 0.75em; + } + } + + @include breakpoint('<=xsmall') { + li { + &:nth-child(n+2):nth-last-child(n+2) { + display: none; + } + + &:first-child { + padding-right: 0; + } + } + } + } diff --git a/assets/sass/libs/_my-mixins.scss b/assets/sass/libs/_my-mixins.scss index 5e078e4..a901a45 100644 --- a/assets/sass/libs/_my-mixins.scss +++ b/assets/sass/libs/_my-mixins.scss @@ -1,3 +1,31 @@ +/// Transforms shorthand that can range from 1-to-4 values to be 4 values. +/// +/// @argument {list} $shorthand +/// +/// @example scss +/// .element { +/// margin: _unpack-shorthand(1em 2em); +/// } +/// +/// // CSS Output +/// .element { +/// margin: 1em 2em 1em 2em; +/// } +/// +/// @access private + +@function _unpack-shorthand($shorthand) { + @if length($shorthand) == 1 { + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + } @else if length($shorthand) == 2 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + } @else if length($shorthand) == 3 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + } @else { + @return $shorthand; + } +} + /// hide-visually mixin from Bourbon < https://bourbon.io > /// /// Hides an element visually while still allowing the content to be accessible @@ -68,3 +96,64 @@ width: auto; } } + +/// Provides a concise, one-line method for setting an element’s positioning +/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null` +/// value to “skip” an edge of the box. +/// +/// @argument {string} $position +/// A CSS position value. +/// +/// @argument {list} $box-edge-values +/// List of lengths; accepts CSS shorthand. +/// +/// @example scss +/// .element { +/// @include position(relative, 0 null null 10em); +/// } +/// +/// // CSS Output +/// .element { +/// left: 10em; +/// position: relative; +/// top: 0; +/// } +/// +/// @example scss +/// .element { +/// @include position(absolute, 0); +/// } +/// +/// // CSS Output +/// .element { +/// position: absolute; +/// top: 0; +/// right: 0; +/// bottom: 0; +/// left: 0; +/// } +/// +/// @require {function} _is-length +/// +/// @require {function} _unpack-shorthand + +@mixin position( + $position, + $box-edge-values +) { + $box-edge-values: _unpack-shorthand($box-edge-values); + $offsets: ( + "top": nth($box-edge-values, 1), + "right": nth($box-edge-values, 2), + "bottom": nth($box-edge-values, 3), + "left": nth($box-edge-values, 4), + ); + + position: $position; + + @each $offset, $value in $offsets { + @if _is-length($value) { + #{$offset}: $value; + } + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 8abbbb6..4f838e9 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,5 +1,3 @@ -// BOURBON -@import "bourbon/bourbon"; // HTML5UP @import 'libs/vars'; @import 'libs/functions'; @@ -57,6 +55,7 @@ @import 'components/actions'; @import 'components/icons'; @import 'components/pagination'; + @import 'components/breadcrumbs'; @import 'components/table'; @import 'components/button'; @import 'components/tiles'; diff --git a/layouts/articles/list.html b/layouts/articles/list.html index a14fe3d..83ac646 100644 --- a/layouts/articles/list.html +++ b/layouts/articles/list.html @@ -5,13 +5,18 @@ {{ .Content }} +
+
+ {{ partial "pagination.html" . }} +
+
- {{ range .Pages }} + {{ range .Paginator.Pages }}
- suca + .Title
@@ -28,7 +33,7 @@ {{ end }} -

here goes an abstract

+

{{ .Params.excerpt }}

@@ -37,4 +42,9 @@
{{ end }}
+
+
+ {{ partial "pagination.html" . }} +
+
{{ end }} diff --git a/layouts/page/list-baseof.html b/layouts/page/list-baseof.html index cc5d0eb..a802655 100644 --- a/layouts/page/list-baseof.html +++ b/layouts/page/list-baseof.html @@ -12,9 +12,6 @@

{{ .Site.Params.Description }}

-
diff --git a/layouts/page/single-baseof.html b/layouts/page/single-baseof.html index 8fbe887..bf1171a 100644 --- a/layouts/page/single-baseof.html +++ b/layouts/page/single-baseof.html @@ -5,6 +5,16 @@
{{- partial "header.html" . -}} +
{{- block "page-main" . }}{{- end }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html index 995f7c0..b7faeb3 100644 --- a/layouts/partials/breadcrumbs.html +++ b/layouts/partials/breadcrumbs.html @@ -1,9 +1,8 @@