Use CSS grid for cards

The way that Semantic UI does columns for the cards is a massive pain to override (it uses negative margins for everything), and this was making the menu glitch out on mobile. CSS grid is supported by every major browser now, so there's no reason not to use it.

sass/_extra.scss

@@ -41,16 +41,38 @@
     padding: 5em 0em;
 }
 
+// This is a replacement for Semantic UI's .cards class, using CSS Grid
+// instead of relying on negative margins for layout.
+.card-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5em;
+    margin: 0;
+}
+
+.card-grid.three {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.card-grid.four {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.card-grid .ui.card {
+    width: 100%;
+    margin: 0;
+}
+
 .ui.card .image {
     height: 256px;
 }
 
-.ui.cards > .card > .content > .header:not(.ui, .center.aligned), .ui.card > .content > .header:not(.ui, .center.aligned) {
+.ui.card > .content > .header:not(.ui, .center.aligned) {
     display: inline-block;
     margin-bottom: 0;
 }
 
-.ui.card > .image > img, .ui.cards > .card > .image > img {
+.ui.card > .image > img {
     object-fit: cover;
     width: 100%;
     height: 100%;
@@ -79,7 +101,7 @@ ul.ui.list li::before {
 }
 
 #sort-menu {
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
 }
 
 @media only screen and (max-width: 991px) {
@@ -111,6 +133,10 @@ ul.ui.list li::before {
     .vertical.stripe .text.container p {
         font-size: 1.1em;
     }
+
+    .card-grid.three, .card-grid.four {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* Colors overridden to avoid inaccessible contrast levels */
@@ -120,11 +146,8 @@ a {
 }
 
 .ui.card > .extra,
-.ui.cards > .card > .extra,
 .ui.card .meta,
-.ui.cards > .card .meta,
-.ui.card .meta > a:not(.ui),
-.ui.cards > .card .meta > a:not(.ui) {
+.ui.card .meta > a:not(.ui) {
     color: #767676;
 }
 

static/assets/js/sortCrates.js

@@ -1,5 +1,5 @@
 function sortCrates(attribute, numeric, ascending) {
-    var section = $("#crates-section .cards");
+    var section = $("#crates-section .card-grid");
     var cards = section.children(".card");
 
     var default_value = numeric ? 0 : "";

templates/categories/page.html

@@ -66,7 +66,7 @@ <h2 class="ui horizontal divider small header">
                 <ul class="menu">
                     <li class="item" data-value="data-name" data-order="asc">Sort by A-Z</li>
                     <li class="item" data-value="data-name">Sort by Z-A</li>
-                    
+
                     {% if section.extra.plural == "crates" %}
                         <li class="item" data-value="data-downloads" data-type="num">Sort by Downloads</li>
                         <li class="item" data-value="data-recent" data-type="num">Sort by Recent Downloads</li>
@@ -76,7 +76,7 @@ <h2 class="ui horizontal divider small header">
                 </ul>
             </div>
 
-            <ul class="ui stackable cards nolist {{ columns }}">
+            <ul class="ui card-grid nolist {{ columns }}">
                 {% for item in crates %}
                     {{ category_macros::info(item=item, section=section) }}
                 {% endfor %}
@@ -101,7 +101,7 @@ <h2 class="ui horizontal divider small header">
                     These {{ section.extra.plural }} are no longer maintained, but may still be of interest.
                 </div>
 
-                <ul class="ui stackable cards nolist {{ columns }}">
+                <ul class="ui card-grid nolist {{ columns }}">
                     {% for item in archived %}
                         {{ category_macros::info(item=item, section=section, archived=true) }}
                     {% endfor %}

templates/index.html

@@ -114,7 +114,7 @@ <h3 class="ui horizontal divider small header">
         </div>
 
         <div class="ui container">
-            <div class="ui three stackable cards">
+            <div class="ui three card-grid">
                 {% set data = load_data(path="content/contributors/data.toml") %}
                 {{ macros::contributors(contributors=data.contributors) }} 
 

templates/macros.html

@@ -14,7 +14,7 @@ <h3 class="ui horizontal divider small header">
         {% endif %}
 
         <div class="ui container">
-            <div class="ui four stackable cards">
+            <div class="ui four card-grid">
                 {% set data = load_data(path="content/" ~ section.path ~ "data.toml") %}
 
                 {% for category in section.pages | sort(attribute="title") %}