From f059918c40f0ceffc93fef5d72cfb4020ade2b0a Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Mon, 13 Dec 2021 10:21:49 +0200
Subject: [PATCH] Re-work download section

I don't like the "hanging" icons now that I look again. Better to
use normal Bootstrap columns and rows here with the icons in the
header. I need to figure out how to add spacing between these when
we are on small devices and the columns stack, though!
---
 site/layouts/_default/home.html | 36 +++++++++++----------------------
 site/source/scss/main.scss      | 16 ++++++---------
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
index 12db0393..c54a31c2 100644
--- a/site/layouts/_default/home.html
+++ b/site/layouts/_default/home.html
@@ -132,30 +132,18 @@
         {{ end }}
         <h2 id="download">Download</h2>
         <p>The ISEAL Core schema is available for download in two formats:</p>
-        <div class="container ">
-          <div class="row pb-4 row-cols-1 row-cols-lg-2">
-            <div class="col d-flex align-items-start">
-              <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
-                {{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }}
-                <img src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark" width="32" height="32">
-              </div>
-              <div>
-                <h3>Turtle</h3>
-                <p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p>
-                <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a>
-              </div>
-            </div>
-            <div class="col d-flex align-items-start">
-              <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
-                {{ $fileSpreadsheetIcon := resources.Get "icons/file-earmark-spreadsheet.svg" | resources.Fingerprint }}
-                <img src="{{ $fileSpreadsheetIcon.Permalink }}" alt="File icon with earmark" width="32" height="32" />
-              </div>
-              <div>
-                <h3>CSV</h3>
-                <p>Comma-separated Values (CSV). Use this format when you just need a quick and easy offline reference.</p>
-                <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/schema-fields.csv" class="btn btn-primary">Download</a>
-              </div>
-            </div>
+        <div class="row mb-2 justify-content-center">
+          <div class="col-sm-12 col-lg-4">
+            {{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }}
+            <h3><img class="icon me-1" src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark"/>Turtle</h3>
+            <p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p>
+            <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a>
+          </div>
+          <div class="col-sm-12 col-lg-4">
+            {{ $fileSpreadsheetIcon := resources.Get "icons/file-earmark-spreadsheet.svg" | resources.Fingerprint }}
+            <h3><img class="icon me-1" src="{{ $fileSpreadsheetIcon.Permalink }}" alt="File icon with earmark"/>CSV</h3>
+            <p>Comma-separated Values (CSV). Use this format when you just need a quick and easy offline reference.</p>
+            <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/schema-fields.csv" class="btn btn-primary">Download</a>
           </div>
         </div>
 
diff --git a/site/source/scss/main.scss b/site/source/scss/main.scss
index 1d78b0f1..18550988 100644
--- a/site/source/scss/main.scss
+++ b/site/source/scss/main.scss
@@ -38,16 +38,6 @@ p.lead {
     color: inherit;
 }
 
-.icon-square {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-  border-radius: .75rem;
-}
-
 div.badge-required {
     float: right;
 
@@ -73,6 +63,12 @@ h1, h2, h3 {
     font-weight: 700;
 }
 
+h3 img.icon {
+    width: 32px;
+    height: 32px;
+    vertical-align: bottom;
+}
+
 code {
     color: $iseal-secondary-orange;
 }