style: Add hover effect to author cards (#95)

mcanouil · Aug 4, 2024 · dea5327 · dea5327
1 parent b1253f5
commit dea5327
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 21 deletions.
diff --git a/_quarto.yml b/_quarto.yml
@@ -48,6 +48,7 @@ format:
     theme:
       - cosmo
       - assets/stylesheets/theme.scss
+      - assets/stylesheets/authors.scss
     include-after-body:
       - file: assets/scripts/ordinal-dates.html
     grid:

diff --git a/assets/ejs/authors.ejs b/assets/ejs/authors.ejs
@@ -2,27 +2,31 @@
 <div class="grid text-center list">
   <% for (const item of items) { %>
   <div class="g-col-12 g-col-sm-6 g-col-md-4" <%= metadataAttrs(item) %>>
-    <p>
-      <a href="<%- item.path %>" class="listing-extension-author no-external">
-        <img loading="lazy" width="200" height="200" style="border-radius: 40%;" src="<%- item.image %>" alt="<%= item.title %> picture" />
-        <br/>
-        <strong class="listing-title"><%- item.title %></strong>
-      </a>
-      <% if (item.stars || item.extensions) { %>
-      <br/>
-      <% if (item.url) { %>
-      <span>
-        <a href="<%= item.url %>" target="_blank" class="text-decoration: none;"><iconify-icon inline="true" role="img" icon="octicon:mark-github-16" aria-label="Icon mark-github-16 from octicon Iconify.design set." title="Icon mark-github-16 from octicon Iconify.design set."></iconify-icon></a>
-      </span>
-      <% } %>
-      <span>
-        <iconify-icon inline="true" role="img" icon="octicon:star-16" aria-label="Icon star-16 from octicon Iconify.design set." title="Icon star-16 from octicon Iconify.design set."></iconify-icon> <%= item.stars %>
-      </span>
-      <span>
-        <iconify-icon inline="true" role="img" icon="octicon:repo-16" aria-label="Icon repo-16 from octicon Iconify.design set." title="Icon repo-16 from octicon Iconify.design set."></iconify-icon> <%= item.extensions %>
-      </span>
-      <% } %>
-    </p>
+    <a href="<%- item.path %>" class="listing-extension-author no-external">
+      <div class="card hovercard">
+        <!-- <div class="ribbon">GitHub</div> -->
+        <img class="card-img-top" loading="lazy" style="border-radius: 40%;" src="<%- item.image %>" alt="<%= item.title %> picture" />
+        <div class="card-body">
+          <strong class="card-title listing-title"><%- item.title %></strong>
+          <p class="card-text">
+            <% if (item.stars || item.extensions) { %>
+            <br/>
+            <% if (item.url) { %>
+            <span>
+              <a href="<%= item.url %>" target="_blank" class="text-decoration: none;"><iconify-icon inline="true" role="img" icon="octicon:mark-github-16" aria-label="Icon mark-github-16 from octicon Iconify.design set." title="Icon mark-github-16 from octicon Iconify.design set."></iconify-icon></a>
+            </span>
+            <% } %>
+            <span>
+              <iconify-icon inline="true" role="img" icon="octicon:star-16" aria-label="Icon star-16 from octicon Iconify.design set." title="Icon star-16 from octicon Iconify.design set."></iconify-icon> <%= item.stars %>
+            </span>
+            <span>
+              <iconify-icon inline="true" role="img" icon="octicon:repo-16" aria-label="Icon repo-16 from octicon Iconify.design set." title="Icon repo-16 from octicon Iconify.design set."></iconify-icon> <%= item.extensions %>
+            </span>
+            <% } %>
+          </p>
+        </div>
+      </div>
+    </a>
   </div>
   <% } %>
 </div>

diff --git a/assets/stylesheets/authors.scss b/assets/stylesheets/authors.scss
@@ -0,0 +1,51 @@
+/*-- scss:defaults --*/
+
+/*-- scss:rules --*/
+.hovercard {
+  flex: 0 50%;
+  background: $light;
+  box-shadow: 0 2px 4px 0 rgba($gray-300, 0.2), 0 5px 15px 0 rgba($gray-700, 0.15);
+  border-radius: 15px;
+  margin: 8px;
+  padding: 10px 15px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  min-height: 265px;
+  transition: 0.7s;
+}
+
+.hovercard:hover {
+  background: $primary;
+  color: $light;
+  transform: scale(1.1);
+  z-index: 9;
+}
+
+.hovercard:hover::before {
+  background: rgba($gray-300, 0.1);
+}
+
+.hovercard:hover .card-title,
+.hovercard:hover .card-text,
+.hovercard:hover a {
+  color: $light;
+}
+
+.ribbon {
+  position: absolute;
+  top: 25px;
+  right: -50px;
+  width: 200px;
+  padding: 5px;
+  background: $primary;
+  color: $light;
+  text-align: center;
+  transform: rotate(45deg);
+  font-weight: bold;
+}
+
+.hovercard:hover .ribbon {
+  background: $light;
+  color: $primary;
+}