Merge pull request #160 from gethinode/develop

Cards
Narrow stylelint hints
2025-10-07 18:14:28 +00:00 · 2023-02-26 09:40:45 +01:00 · 2023-02-26 09:35:54 +01:00 · 2023-02-26 08:55:57 +01:00 · 2023-02-26 08:54:42 +01:00 · 2023-02-26 08:54:17 +01:00
5 changed files with 69 additions and 70 deletions
--- a/assets/scss/components/_card.scss
+++ b/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;
+}
--- a/config/_default/params.toml
+++ b/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"
--- a/layouts/partials/assets/card.html
+++ b/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 -}}
@@ -129,50 +129,44 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}

-{{- if eq $orientation "horizontal" -}}
-    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-        <div class="row g-0">
-            <div class="col-4">
-                {{- if $thumbnail -}}
-                    <a href="{{ $href }}">
+<article>
+    {{- if eq $orientation "horizontal" -}}
+        <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+            <div class="row g-0">
+                <div class="col-4">
+                    {{- 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 -}}
-                    <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                        <a href="{{ $href }}"> 
+                    {{- else if $icon -}}
+                        <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
-                        </a>
+                        </div>
+                    {{- end -}}
                    </div>
-                {{- end -}}
-                </div>
-            <div class="col-8">
-                <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
-                    <div class="h-100">
-                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                <div class="col-8">
+                    <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
+                        <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                        <div class="h-100">
+                            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                        </div>
+                        <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 -}}
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-        {{- if $thumbnail -}}
-            <a href="{{ $href }}">
+    {{- else -}}
+        <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+            {{- if $thumbnail -}}
                {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
-            </a>
-        {{- else if $icon -}}
-            <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                <a href="{{ $href }}"> 
+            {{- else if $icon -}}
+                <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                    {{- 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>
--- a/package-lock.json
+++ b/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"
      }
    },
--- a/package.json
+++ b/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": {
Author	SHA1	Message	Date
Mark Dumay	7bb479194b	Merge pull request #160 from gethinode/develop Cards	2023-02-26 09:40:45 +01:00
mark	73c1cf8a59	Narrow stylelint hints	2023-02-26 09:35:54 +01:00
mark	20ce3580c7	Fix linting issues	2023-02-26 08:55:57 +01:00
mark	2f733a709d	Bump dependencies	2023-02-26 08:54:42 +01:00
mark	96b1eaaa04	Bump package version	2023-02-26 08:54:17 +01:00
mark	f0200f77dc	Apply card-zoom animation to blog posts	2023-02-26 08:42:03 +01:00
mark	4ab462750c	Ensure tag links take precedence over the card link	2023-02-26 08:41:41 +01:00
mark	597ea2fa2b	Refine card-body-link style	2023-02-26 08:41:18 +01:00
mark	82b8228277	Add card-zoom animation	2023-02-26 08:40:48 +01:00
mark	6a025f80c4	Wrap the card in an article	2023-02-26 08:35:28 +01:00
mark	99d4d79537	Wrap the card in an article	2023-02-26 08:34:49 +01:00
mark	e1d1526b10	Ensure tag links take precedence over the card link	2023-02-26 08:33:43 +01:00
mark	8808c10402	Make entire card clickable	2023-02-26 08:32:58 +01:00
mark	87f1733a49	Fix spacing between tags	2023-02-24 06:08:31 +01:00
mark	0da862db93	Fix spacing between date and reading time	2023-02-24 06:05:34 +01:00