Implement clickable cards (#469)

* Implement clicable cards

* Try to fix border color on hover

Author: jarrodmillman

assets/theme-css/content.css

@@ -10,6 +10,7 @@
   flex-shrink: 1;
   flex-direction: column;
   margin: 0 30px;
+  padding: 1rem;
 
   /* Handle code cells overflowing */
   overflow: auto;

assets/theme-css/pst-deps/sphinx-design/_card.scss

@@ -14,6 +14,12 @@
   word-wrap: break-word;
 }
 
+.sd-card-hover:hover {
+  //  border-color:var(--sd-color-card-border-hover);
+  border-color: hsla(231, 99%, 66%, 1) !important;
+  transform: scale(1.01);
+}
+
 .sd-mb-3 {
   margin-bottom: 1rem !important;
 }
@@ -36,3 +42,13 @@
 .sd-font-weight-bold {
   font-weight: 700 !important;
 }
+
+.sd-stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}

layouts/shortcodes/card.html

@@ -23,6 +23,10 @@
 '''
 {{< /card >}}
 
+{{< card >}}
+title = 'A clickable card'
+link = 'https://example.com'
+{{< /card >}}
 
 {{< card >}}
 header = 'Header'
@@ -36,26 +40,33 @@
 {{- $data := .Inner | transform.Unmarshal -}}
 
 <div class="bd-content">
+{{ with $data.link }}
+<div class="sd-card sd-shadow-sm sd-mb-3 sd-card-hover">
+{{ else }}
 <div class="sd-card sd-shadow-sm sd-mb-3">
-    {{ with $data.header }}
-    <div class="sd-card-header">
-        {{ . | markdownify }}
+{{ end }}
+  {{ with $data.header }}
+  <div class="sd-card-header">
+      {{ . | markdownify }}
+  </div>
+  {{ end }}
+  <div class="sd-card-body">
+    {{ with $data.title }}
+    <div class="sd-card-title sd-font-weight-bold">
+      {{ . }}
     </div>
     {{ end }}
-    <div class="sd-card-body">
-  {{ with $data.title }}
-  <div class="sd-card-title sd-font-weight-bold">
-    {{ . }}
+    {{ with (trim $data.body "\n") }}
+      {{ . | markdownify }}
+    {{ end }}
   </div>
+  {{ with $data.link }}
+  <a class="sd-stretched-link" href="{{.}}"></a>
   {{ end }}
-  {{ with (trim $data.body "\n") }}
+  {{ with $data.footer }}
+  <div class="sd-card-footer">
     {{ . | markdownify }}
+  </div>
   {{ end }}
 </div>
-{{ with $data.footer }}
-<div class="sd-card-footer">
-  {{ . | markdownify }}
-</div>
-{{ end }}
-</div>
 </div>