💄 style(projects): set entire card as link target

sass/parts/_cards.scss

@@ -5,38 +5,46 @@
     gap: 24px;
     margin-top: 4vmin;
     padding: 12px 0;
-}
 
-.card {
+    .card {
         box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
         border-radius: 1rem;
         background: var(--bg-2);
         min-height: 100px;
         overflow: hidden;
-}
 
-.card-info {
-    padding: 0 24px 24px 24px;
+        &:hover {
+            background-color: var(--primary-color);
+        }
+
+        &:hover .card-description {
+            color: var(--hover-color);
+        }
+
+        .card-info {
+            padding: 0 24px 24px;
             text-align: center;
-}
+        }
 
-.card-title {
+        .card-title {
             margin-top: 0.7em;
-}
+        }
 
-.card-image {
-    border: unset;
+        .card-image {
             width: 100%;
-}
+        }
 
-.card-image-placeholder {
+        .card-image-placeholder {
             width: 100%;
             height: 12px;
-}
+        }
 
-.card-description {
+        .card-description {
             margin-top: 0.5em;
             overflow: hidden;
+            color: var(--text-color);
+        }
+    }
 }
 
 @media all and (max-width: 720px) {

templates/partials/cards_pages.html

@@ -1,8 +1,6 @@
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
-
 <div class="cards">
     {%- for page in show_pages %}
-    <div class="card">
         {# Determine which URL to use, default is page.permalink #}
         {%- if page.extra.link_to and config.markdown.external_links_target_blank -%}
             {%- set blank_target = "target=_blank" -%}
@@ -12,7 +10,8 @@
 
         {% set target_url = page.extra.link_to | default(value=page.permalink) %}
 
-        <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}">
+        <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}" class="card">
+            <div>
                 {% if page.extra.local_image %}
                     {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
                     <img class="card-image" alt="{{ page.extra.local_image }}" src="{{ get_url(path=page.extra.local_image) }}" {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}>
@@ -21,13 +20,9 @@
                 {% else %}
                     <div class="card-image-placeholder"></div>
                 {% endif %}
-        </a>
 
                 <div class="card-info">
-            <h2 class="card-title">
-                <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}">{{ page.title }}</a>
-            </h2>
-
+                    <h2 class="card-title">{{ page.title }}</h2>
                     <div class="card-description">
                         {% if page.description %}
                             {{ page.description }}
@@ -35,5 +30,6 @@
                     </div>
                 </div>
             </div>
+        </a>
     {% endfor -%}
 </div>