Add card shortcode

curegit · Oct 29, 2023 · f7690d7 · f7690d7
1 parent cb53cdc
commit f7690d7
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 8 deletions.
diff --git a/assets/article.css b/assets/article.css
@@ -85,19 +85,19 @@ main h1 {
   margin-top: 0;
 }
 
-.single a {
+.single a[href] {
   text-decoration-line: underline;
 }
 
-.single a:has(code) {
+.single a[href]:has(code) {
   text-decoration-line: none;
 }
 
-.single .toc a {
+.single .toc a[href] {
   text-decoration-line: none;
 }
 
-.single .toc a:hover {
+.single .toc a[href]:hover {
   text-decoration-line: underline;
 }
 
@@ -192,6 +192,56 @@ main h1 {
   padding-right: 4px;
 }
 
+.single .link-card {
+  display: inline-flex;
+  flex-flow: column;
+  width: 540px;
+  max-width: 100%;
+  margin: 12px 0;
+  border: 1px solid #d7dfe5;
+  border-radius: 14px;
+  background-color: #f5f5f5;
+  overflow: hidden;
+}
+
+.single a.link-card[href] {
+  text-decoration-line: none;
+  color: inherit;
+}
+
+.single a.link-card[href]:hover .title, .single a.link-card[href]:active .title {
+  text-decoration-line: underline;
+}
+
+.single .link-card .image {
+  height: 0;
+  padding-top: 56%;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.single .link-card .text {
+  padding: 6px 10px 10px;
+}
+
+.single .link-card .title, .single .link-card .desc {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+.single .link-card .title {
+  font-weight: bold;
+}
+
+.single .link-card .desc {
+  font-size: 0.94em;
+  text-indent: 0.2em;
+  opacity: 0.8;
+}
+
 .footnotes {
   margin-top: 40px;
 }
@@ -202,7 +252,7 @@ main h1 {
   font-size: 96%;
 }
 
-a.footnote-ref {
+a[href].footnote-ref {
   text-decoration-line: none;
 }
 
@@ -220,7 +270,7 @@ a.footnote-ref {
   margin: 16px 0 10px;
 }
 
-.single footer a {
+.single footer a[href] {
   text-decoration-line: none;
 }
 

diff --git a/assets/main.css b/assets/main.css
@@ -41,7 +41,7 @@ div#middle {
   text-decoration-color: color-mix(in srgb, transparent 25%, currentColor);
 }
 
-.pane a:hover, .pane a:active {
+.pane a[href]:hover, .pane a[href]:active {
   text-decoration-line: underline;
 }
 

diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
@@ -0,0 +1,13 @@
+<a class="link-card"{{ with .Get "href" }} href="{{ . }}"{{ end }}>
+  {{ with .Get "img" | default (.Get "image") }}
+    <div class="image" style="background-image: url('{{ . }}');"></div>
+  {{ end }}
+  <div class="text">
+    {{ with .Get "title" }}
+      <div class="title">{{ . }}</div>
+    {{ end }}
+    {{ with .Get "desc" | default (.Get "description") }}
+      <div class="desc">{{ . }}</div>
+    {{ end }}
+  </div>
+</a>
diff --git a/layouts/shortcodes/fold.html b/layouts/shortcodes/fold.html
@@ -1,4 +1,4 @@
-<details {{ if .Get 1 }}open{{ end }}>
+<details{{ if .Get 1 }} open{{ end }}>
   <summary>{{ .Get 0 }}</summary>
   {{ .Inner }}
 </details>