Add external link indicator to project cards / tweak header layout

Author: kylegordy

assets/_sass/component/_card.scss

@@ -34,7 +34,6 @@ $card-padding-lg: rem-calc(20px);
 .card {
     position: relative;
     border: 1px solid $slate-300;
-    overflow: hidden;
     @extend .rounded;
     transition: all .2s ease;
     transition-property: border-color, box-shadow;
@@ -55,27 +54,58 @@ $card-padding-lg: rem-calc(20px);
     }
 }
 
+.card__body {
+    border-color: var(--theme-border-color);
+}
+
 .card__header {
-    width: 100%;
+    margin: -1px; // offset card border
     background-color: var(--theme-primary-color);
-    border-bottom: 1px solid $slate-300;
+    border: 1px solid var(--theme-border-color);
+    border-radius: 6px 6px 0 0;
+
+    @media (min-width: $bp-lg) {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-height: 6.7em; // accommodate two lines titles while being equal height
+    }
 }
 
 .card__header,
 .card__header-link {
     color: var(--theme-text-color);
 }
 
+.card__external-indicator {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 1.75em;
+    text-align: center;
+    background-color: var(--theme-secondary-color);
+    border-radius: 0 6px 0 6px;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .2s ease;
+}
+
+.card:hover .card__external-indicator {
+    visibility: visible;
+    opacity: 1;
+}
+
 .card__header-title {
-    padding-top: 1em;
+    margin-bottom: .1em;
     font-size: rem-calc(18px);
+    line-height: 1.2;
 
-    @media (min-width: $bp-md) {
+    @media (min-width: $bp-lg) {
         font-size: rem-calc(22px);
     }
 }
 
-.card__header .svg-icon {
+.card__header-list .svg-icon {
     margin-right: rem-calc(4px);
     opacity: .6;
 }

projects.html

@@ -20,32 +20,39 @@ <h2>Open Source Projects</h2>
             <!-- See include below for logic and color.scss for available themes -->
             {% include project-color-logic.html %}
 
-            <li class="card theme-{{ theme | default: "white" }}">
+            <li class="card theme-{{ theme | default: "midnight" }}">
                 <header class="card__header">
 
                     <!-- Project title -->
-                    <h2 class="card__header-title m-0">
-                        <a class="card__header-link stretched-link" href='{{ repository.html_url }}'>{{ repository.name }}</a>
+                    <h2 class="card__header-title">
+                        <a class="card__header-link stretched-link" href='{{ repository.html_url }}'>
+                            {{ repository.name }}
+                        </a>
                     </h2>
 
                     <!-- Project metadata -->
-                    <ul class="list--inline fs-md monospace">
+                    <ul class="card__header-list list--inline fs-md monospace">
                         {% if repository.language %}
                             <li>
-                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icons.svg#code' | relative_url }}"></use></svg><span class="visually-hidden">Language: </span>{{ repository.language }}
+                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#code' | relative_url }}"></use></svg><span class="visually-hidden">Language: </span>{{ repository.language }}
                             </li>
                         {% endif %}
 
                         {% if repository.license.spdx_id %}
                             <li>
-                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icons.svg#license' | relative_url }}"></use></svg><span class="visually-hidden">License: </span>{{ repository.license.spdx_id }}
+                                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#license' | relative_url }}"></use></svg><span class="visually-hidden">License: </span>{{ repository.license.spdx_id }}
                             </li>
                         {% endif %}
                     </ul>
+
+                    <!-- External Link Indicator -->
+                    <div class="card__external-indicator">
+                        <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-external' | relative_url }}"></use></svg>
+                    </div>
                 </header>
 
                 <!-- Project description -->
-                <div class="card__body fs-md monospace">
+                <div class="card__body fs-md monospace" aria-hidden="true">
                     {% if repository.description %}
                         <p class="m-0 clamp-3">{{ repository.description }}</p>
                     {% endif %}