From 2d36a6ee855fdaa10d223df1180f0ac02e7094e2 Mon Sep 17 00:00:00 2001
From: yupix <yupi0982@outlook.jp>
Date: Tue, 13 Feb 2024 23:10:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20blogcard=E3=81=A7=E3=82=B5=E3=82=A4?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/scss/custom.scss          | 56 ++++++++++++++++++++++++++++----
 layouts/shortcodes/blogcard.html | 32 +++++++++---------
 2 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 0481e05..f78f93c 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -1,3 +1,5 @@
+$blog-card-size: 120px;
+
 .blog-card {
   display: flex;
   gap: 1rem;
@@ -6,34 +8,74 @@
   background-color: var(--card-background);
   width: 100%;
   max-width: 100%;
-  height: 100px;
-  max-height: 100px;
+  height: $blog-card-size;
+  max-height: $blog-card-size;
 
 }
 .blog-card-thumb {
   border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
   background-position: center;
   background-size: cover;
-  flex: 0 0 100px;
+  flex: 0 0 $blog-card-size;
 }
 
 .blog-card-content {
+  text-decoration: none !important;
   min-width: 0; /* これ無いと ellipsis が正常に動作しない */
   padding: 0.5rem;
   height: 100%;
   & .blog-card-title {
-    color: var(--card-text-color-main);
+    color: var(--card-text-color-main) !important;
     font-size: 1.5rem;
     font-weight: bold;
+    max-height: 3.05em;
+  }
+  & .blog-card-description {
+    color: var(--card-text-color-secondary) !important;
+  }
+
+  & .blog-card-domain {
+    gap: 0.5rem;
+    display: flex;
+    height: min-content;
+    font-size: 14px;
+    color: var(--card-text-color-tertiary);
+    align-items: center;
+  }
+
+  & .blog-card-description, .blog-card-domain {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  & .blog-card-description {
-    color: var(--card-text-color-secondary);
-    white-space: nowrap;
+
+  & .blog-card-title {
+
     overflow: hidden;
+    display: -webkit-box;
     text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    line-height: 1.5;
+  }
+}
+
+.blog-card-link {
+  user-select: none;
+
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  } 
+
+  & > .blog-card {
+    transition: 0.4s;
+  }
+
+  &:hover > .blog-card {
+    background-color: rgba(146, 205, 250, 0.158);
+    transition: 0.4s;
   }
 }
 
diff --git a/layouts/shortcodes/blogcard.html b/layouts/shortcodes/blogcard.html
index 1c320a2..61ad19b 100644
--- a/layouts/shortcodes/blogcard.html
+++ b/layouts/shortcodes/blogcard.html
@@ -4,20 +4,22 @@
 
 {{ $parsed_url := urls.Parse $url }}
 
-<div class="blog-card">
-  <div
-    class="blog-card-thumb"
-    style="background-image: url('{{ $og.thumbnail }}')"
-  ></div>
-  <div class="blog-card-content">
-    <div class="blog-card-title">{{ $og.title }}</div>
-    {{- if $og.description -}}
-    <p class="blog-card-description">
-      {{ replace ($og.description | plainify) "\n" ""}}
-    </p>
-    {{- end -}}
-    <a href="{{ $og.url }}" target="_blank" rel="noopener noreferrer">
+<a href="{{ $og.url }}" target="_blank" rel="noopener noreferrer" class="blog-card-link">
+  <div class="blog-card">
+    <div class="blog-card-thumb" style="background-image: url('{{ $og.thumbnail }}')"></div>
+    <div class="blog-card-content">
+      <div class="blog-card-title">{{ $og.title }}</div>
+      {{- if $og.description -}}
+      <p class="blog-card-description">
+        {{ replace ($og.description | plainify) "\n" ""}}
+      </p>
+      {{- end -}}
+      <div class="blog-card-domain">
+        {{- if ($og.icon) -}}
+        <img height="14" width="14" src="{{ $og.icon }}" alt="{{ $og.sitename }}" />
+        {{- end -}}
         {{ $parsed_url.Host }}
-    </a>
+      </div>
+    </div>
   </div>
-</div>
+</a>
\ No newline at end of file