Update user cards with better-looking styles

WasabiFan · WasabiFan · commit 00b0e63672ed · 2016-04-23T21:57:08.000-07:00
Mainly optimizes for dark background, but makes light background nicer too
diff --git a/_includes/author-card.html b/_includes/author-card.html
@@ -2,12 +2,15 @@
 
 {% assign author_no_at_sign = include.author | strip_html | remove_first: "@" %}
 {% assign at_sign = include.author | strip_html | replace: author_no_at_sign %}
+{% if include.theme %}
+{% assign extra_classes = "user-card-" | append: include.theme %}
+{% endif %}
 <!-- first function does not work and truncate function returns trailing "..." -->
 {% assign test_at_sign_is_first = include.author | truncate: 4 | replace: "@" | size %}
 <!-- this looks weird, but it was the only way I could figure out how to test
      that the first character of include.author is "@" -->
 {% if at_sign.size > 0 and test_at_sign_is_first == 3 %}
-    <div data-card-user="{{author_no_at_sign}}"></div><br/>
+    <div data-card-user="{{author_no_at_sign}}" class="{{ extra_classes }}"></div><br/>
 {% else %}
-    <div class="user-card"><div class="user-card-name">{{ include.author }}</div></div>
+    <div class="user-card {{ extra_classes }}"><div class="user-card-name">{{ include.author }}</div></div>
 {% endif %}
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
@@ -26,6 +26,6 @@ <h2> Authors </h2>
 <h2> Author </h2>
 {% endif %}
 {% for author in page.author %}
-<div style="float: left; margin-right: 20px;">{% include author-card.html author = author %}</div>
+<div style="float: left; margin-right: 20px;">{% include author-card.html author=author theme='light' %}</div>
 {% endfor %}
 {% endif %}
diff --git a/stylesheets/user-cards.scss b/stylesheets/user-cards.scss
@@ -1,28 +1,50 @@
 ---
 ---
 
+@import "custom-variables";
+
+@keyframes card-hover {
+    from { border-left-width: 4px; }
+    to { border-left-width: 8px; }
+}
+
+@keyframes card-hover-out {
+    from { border-left-width: 8px; }
+    to { border-left-width: 4px; }
+}
+
 .user-card {
     position: relative;
     min-height: 40px;
     min-width: 218px;
     background-color: #252525;
     font-family: "Helvetica", Arial, sans-serif;
     color: #fff;
-    border-radius: 2px;
+    border-radius: 3px;
     text-align: center;
     font-weight: 100;
-    padding: 5px;
-    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
-    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
-    -o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
-    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
+    padding: 5px 5px 5px 0;
+    border-left: 4px solid $brand-primary;
+    
+    animation: card-hover-out;
+    animation-duration: 0.1s;
+
+    &:hover {
+        border-left-color: darken($brand-primary, 10%);
+        animation: card-hover;
+        animation-duration: 0.1s;
+        animation-fill-mode: forwards;
+    }
+
+    a {
+        color: #eeeeee;
+    }
 
     .user-card-avatar {
         position: absolute;
         float: left;
-        max-height: 100%;
+        height: 100%;
         width: auto;
-        max-width: 20%;
         top: 50%;
         -webkit-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
@@ -32,9 +54,7 @@
 
         img {
             vertical-align: middle;
-            border: 1px solid #aaa;
-            border-radius: 2px;
-            height: 40px;
+            height: 100%;
         }
     }
 
@@ -58,3 +78,7 @@
         vertical-align: middle;
     }
 }
+
+.user-card-light {
+    background-color: #303030;
+}
