fixup image-list

crystal-lang · Nov 6, 2023 · 46534d8 · 46534d8
1 parent cd3e9c5
commit 46534d8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 23 deletions.
diff --git a/_includes/components/image-list.html b/_includes/components/image-list.html
@@ -1,8 +1,10 @@
 <div class="image-list">
   {% for item in include.items %}
-    {% include elements/hex-icon.html file=item.image %}
-    <div class="small">
-      {{ item.description }}
+    <div class="item">
+      {% include elements/hex-icon.html file=item.image %}
+      <div class="small">
+        {{ item.description }}
+      </div>
     </div>
   {% endfor %}
 </div>
diff --git a/_sass/components/_image-list.scss b/_sass/components/_image-list.scss
@@ -1,25 +1,14 @@
 .image-list {
   display: grid;
-  grid-template-columns: repeat(1, min-content 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
   align-items: center;
-  row-gap: 20px;
+  row-gap: var(--block-flow-sm);
+  column-gap: var(--padding-md);
 
-  .small {
-    font-size: 85%;
-    margin-right: var(--padding-lg);
-  }
-}
-
-@media (min-width: 35em) {
-  .image-list {
-    row-gap: 40px;
-    grid-template-columns: repeat(2, min-content 1fr);
-  }
-}
-
-@media (min-width: 55em) {
-  .image-list {
-    row-gap: 60px;
-    grid-template-columns: repeat(3, min-content 1fr);
+  > .item {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    align-items: center;
+    column-gap: var(--padding-xs);
   }
 }
diff --git a/_sass/elements/_hex-icon.scss b/_sass/elements/_hex-icon.scss
@@ -8,7 +8,6 @@
   width: calc(var(--icon-height) * var(--sin-60));
   height: var(--icon-height);
   display: inline-block;
-  margin-right: 12px;
   position: relative;
 
   filter: drop-shadow(0 0 2px rgba(0,0,0,0.1))