Merge pull request #160 from gethinode/develop

Cards

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 {
+.card-zoom:hover .card-img-wrap img {
-    transition: transform 0.25s ease;
-    width: 100%;
-}
-
-.card-img-wrap:hover 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,7 +43,7 @@
         header = "full"
         footer = "none"
         orientation = "stacked"
-        style = "border-0"
+        style = "border-0 card-zoom"
         homepage = 3
     [projects]
         title = "Projects"

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 -}}
+            {{- if gt $index 0 }}&nbsp;&bull;&nbsp;{{ end -}}
-            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }}" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
+            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
         {{- end -}}
     </small></p>
 {{- end -}}
@@ -129,50 +129,44 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
-{{- if eq $orientation "horizontal" -}}
+<article>
-    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    {{- if eq $orientation "horizontal" -}}
-        <div class="row g-0">
+        <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-            <div class="col-4">
+            <div class="row g-0">
-                {{- if $thumbnail -}}
+                <div class="col-4">
-                    <a href="{{ $href }}">
+                    {{- if $thumbnail -}}
                         {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
-                    </a>
+                    {{- else if $icon -}}
-                {{- else if $icon -}}
+                        <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                    <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>
+                        </div>
+                    {{- end -}}
                     </div>
-                {{- end -}}
+                <div class="col-8">
-                </div>
+                    <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
-            <div class="col-8">
+                        <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
-                <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
+                        <div class="h-100">
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-                    <div class="h-100">
+                        </div>
-                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                        <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
                     </div>
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
                 </div>
             </div>
         </div>
-    </div>
+    {{- else -}}
-{{- else -}}
+        <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+            {{- if $thumbnail -}}
-        {{- if $thumbnail -}}
-            <a href="{{ $href }}">
                 {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
-            </a>
+            {{- else if $icon -}}
-        {{- else if $icon -}}
+                <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-            <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>
+                </div>
+            {{- end -}}
+            <div class="card-body d-flex flex-column p-{{ $padding }}">
+                {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
+                {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
             </div>
-        {{- end -}}
-        <div class="card-body d-flex flex-column p-{{ $padding }}">
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
-            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
         </div>
-    </div>
+    {{- end -}}
-{{- end -}}
+</article>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.9.4",
+      "version": "0.9.5",
       "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.5",
   "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": {