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

welpo · Feb 16, 2024 · 22d4d68 · 22d4d68
1 parent d543560
commit 22d4d68
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 49 deletions.
diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss
@@ -5,38 +5,46 @@
     gap: 24px;
     margin-top: 4vmin;
     padding: 12px 0;
-}
 
-.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 {
+        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;
-    text-align: center;
-}
+        &:hover {
+            background-color: var(--primary-color);
+        }
 
-.card-title {
-    margin-top: 0.7em;
-}
+        &:hover .card-description {
+            color: var(--hover-color);
+        }
 
-.card-image {
-    border: unset;
-    width: 100%;
-}
+        .card-info {
+            padding: 0 24px 24px;
+            text-align: center;
+        }
 
-.card-image-placeholder {
-    width: 100%;
-    height: 12px;
-}
+        .card-title {
+            margin-top: 0.7em;
+        }
+
+        .card-image {
+            width: 100%;
+        }
 
-.card-description {
-    margin-top: 0.5em;
-    overflow: hidden;
+        .card-image-placeholder {
+            width: 100%;
+            height: 12px;
+        }
+
+        .card-description {
+            margin-top: 0.5em;
+            overflow: hidden;
+            color: var(--text-color);
+        }
+    }
 }
 
 @media all and (max-width: 720px) {

diff --git a/templates/partials/cards_pages.html b/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,28 +10,26 @@
 
         {% set target_url = page.extra.link_to | default(value=page.permalink) %}
 
-        <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}">
-            {% 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 %}>
-            {% elif page.extra.remote_image %}
-                <img class="card-image" alt="{{ page.extra.remote_image }}" src="{{ page.extra.remote_image }}">
-            {% 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>
-
-            <div class="card-description">
-                {% if page.description %}
-                    {{ page.description }}
+        <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 %}>
+                {% elif page.extra.remote_image %}
+                    <img class="card-image" alt="{{ page.extra.remote_image }}" src="{{ page.extra.remote_image }}">
+                {% else %}
+                    <div class="card-image-placeholder"></div>
                 {% endif %}
+
+                <div class="card-info">
+                    <h2 class="card-title">{{ page.title }}</h2>
+                    <div class="card-description">
+                        {% if page.description %}
+                            {{ page.description }}
+                        {% endif %}
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
+        </a>
     {% endfor -%}
 </div>