Merge pull request #161 from gethinode/develop

Separator

assets/scss/components/_card.scss

@@ -1,5 +1,3 @@
-// stylelint-disable annotation-no-unknown
-
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
@@ -8,7 +6,16 @@
     position: relative;
 }
 
-.card-img-wrap::after {
+.card-zoom {
+    cursor: pointer;
+}
+
+.card-img-wrap img {
+    transition: transform 0.25s ease;
+    width: 100%;
+}
+
+.card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;
     top: 0;
@@ -20,16 +27,12 @@
     transition: opacity 0.25s;
 }
 
-.card-img-wrap img {
-    transition: transform 0.25s ease;
-    width: 100%;
-}
-
-.card-img-wrap:hover img {
+.card-zoom:hover .card-img-wrap img {
     transform: scale(1.1);
+    opacity: 0.5;
 }
 
-.card-img-wrap:hover::after {
+.card-zoom:hover::after .card-img-wrap img {
     opacity: 1;
 }
 
@@ -43,29 +46,31 @@
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
 
+// stylelint-disable annotation-no-unknown
 .card-body-link {
     color: $body-color if($enable-important-utilities, !important, null);
-
-    @if $link-shade-percentage != 0 {
-        &:hover,
-        &:focus {
-            color: tint-color($body-color, $link-shade-percentage) if($enable-important-utilities, !important, null);
-        }
-    }
 }
 
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .card-body-link {
             color: $gray-500 if($enable-important-utilities, !important, null);
-
-            @if $link-shade-percentage != 0 {
-                &:hover,
-                &:focus {
-                    color: shade-color($gray-500, $link-shade-percentage) if($enable-important-utilities, !important, null);
-                }
-            }
         }
     }
 }
+
+.card-zoom card-body-link,
+.card-body-link {
+    &:hover,
+    &:focus {
+        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
+    }
+}
+
 // stylelint-enable annotation-no-unknown
+
+// make tag-link clickable on top of the stretched-link.
+.card .tag-link {
+    z-index: 2;
+    position: relative;
+}

config/_default/params.toml

@@ -43,8 +43,9 @@
         header = "full"
         footer = "none"
         orientation = "stacked"
-        style = "border-0"
+        style = "border-0 card-zoom"
         homepage = 3
+        separator = true
     [projects]
         title = "Projects"
         sort = "title"
@@ -57,6 +58,7 @@
         orientation = "none"
         style = "border-1 card-emphasize"
         homepage = 3
+        separator = false
 # toml-docs-end list
 
 [favicon]

layouts/partials/assets/card-group.html

@@ -15,6 +15,7 @@
     "href"          Optional address for the button or hyperlink. If set, a button is added if the list exceeds the
                     maximum number of cards to display.
     "hrefTitle"     Optional title of the button or hyperlink as companion to href.
+    "separator"     Optional flag to indicate a horizontal line should be added between items on small screens.
 
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
@@ -57,20 +58,28 @@
 
 {{- $title := .title -}}
 
-{{ $paginate := false }}
-{{ with .paginate }}
-    {{ if ne (printf "%T" .) "bool" }}
-        {{ errorf "Invalid value for param 'paginate'"}}
-    {{ end }}
-    {{ $paginate = . }}
-{{ end }}
-{{ if not $paginate }}
-    {{ $list = first $max $list }}
-{{ end }}
+{{- $paginate := false -}}
+{{- with .paginate -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "Invalid value for param 'paginate'" -}}
+    {{- end -}}
+    {{- $paginate = . -}}
+{{- end -}}
+{{- if not $paginate -}}
+    {{- $list = first $max $list -}}
+{{- end -}}
 
 {{- $moreURL := .href -}}
 {{- $moreTitle := .hrefTitle -}}
 
+{{- $separator := false -}}
+{{- with .separator -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "Invalid value for param 'separator'" -}}
+    {{- end -}}
+    {{- $separator = . -}}
+{{- end -}}
+
 {{- $class := .class -}}
 {{- $color := .color -}}
 {{- $padding := .padding -}}
@@ -96,7 +105,7 @@
                         )
                     -}}
                 </div>
-                {{- if (lt $index (sub $max 1)) -}}
+                {{- if and (lt $index (sub $max 1)) $separator -}}
                     <div class="col d-block d-sm-none">
                         <hr>
                     </div>
@@ -121,7 +130,7 @@
                         )
                     -}}
                 </div>
-                {{- if (lt $index (sub $max 1)) -}}
+                {{- if and (lt $index (sub $max 1)) $separator -}}
                     <div class="col d-block d-sm-none">
                         <hr>
                     </div>

layouts/partials/assets/card.html

@@ -27,7 +27,7 @@
     {{- $color := .color -}}
     {{- $description := .description -}}
     
-    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
+    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
             <p class="card-title fs-5 fw-bold">{{ $title }}</p>
         {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
     </a>
@@ -47,7 +47,7 @@
     <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-body-secondary{{ end }} text-uppercase">
         {{- if in (slice "full" "publication") $keywords -}}
             {{- partial "utilities/date.html" (dict "date" $page.Date "format" "long") -}}&nbsp;&bull;
-            {{- $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}
+            {{ $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}
         {{- end -}}
 
         {{- if eq $keywords "full" -}}
@@ -58,8 +58,8 @@
         {{- if $color }}{{ $link = printf "link-bg-%s" $color }}{{ end -}}
 
         {{- range $index, $tag := first $maxTags ($page.GetTerms "tags") -}}
-            {{- if gt $index 0 }}&bull;&nbsp;{{ end -}}
-            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }}" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
+            {{- if gt $index 0 }}&nbsp;&bull;&nbsp;{{ end -}}
+            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
         {{- end -}}
     </small></p>
 {{- end -}}
@@ -134,14 +134,10 @@
         <div class="row g-0">
             <div class="col-4">
                 {{- if $thumbnail -}}
-                    <a href="{{ $href }}">
-                        {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
-                    </a>
+                    {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
                     <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                        <a href="{{ $href }}"> 
-                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
-                        </a>
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
                     </div>
                 {{- end -}}
                 </div>
@@ -159,14 +155,10 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            <a href="{{ $href }}">
-                {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
-            </a>
+            {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
         {{- else if $icon -}}
             <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                <a href="{{ $href }}"> 
-                    {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
-                </a>
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/partials/assets/section-list.html

@@ -12,6 +12,7 @@
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
 {{- $reverse := true -}}
+{{- $separator := false -}}
 {{- $orientation := "stacked" -}}
 {{- $cols := 3 -}}
 {{- $color := "" -}}
@@ -26,6 +27,7 @@
     {{- with index . "title" }}{{ $title = . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
     {{- if (index . "reverse") }}{{ $reverse = true }}{{ else }}{{ $reverse = false }}{{ end -}}
+    {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
     {{- with index . "color" }}{{ $color = . }}{{ end -}}
@@ -74,6 +76,7 @@
         "title" $title
         "href" $sectionURL
         "hrefTitle" $moreTitle
+        "separator" $separator
         "paginate" $paginate
         "class" $style
         "orientation" $orientation

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.9.4",
+      "version": "0.9.6",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
@@ -29,7 +29,7 @@
         "purgecss-whitelister": "^2.4.0",
         "rimraf": "^4.1.2",
         "shx": "^0.3.4",
-        "stylelint": "^15.1.0",
+        "stylelint": "^15.2.0",
         "stylelint-config-standard-scss": "^7.0.1"
       }
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -71,7 +71,7 @@
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^4.1.2",
     "shx": "^0.3.4",
-    "stylelint": "^15.1.0",
+    "stylelint": "^15.2.0",
     "stylelint-config-standard-scss": "^7.0.1"
   },
   "otherDependencies": {