Homepage improvements

assets/sass/_layout.sass

@@ -128,12 +128,29 @@ section
     color: $text-subtle
     text-align: center
 
+#tool-cards
+    display: flex
+    flex-wrap: wrap
+    gap: $spacing-unit
+    // justify-content: space-between
+
+    > article
+        flex: 1 1 48%
+        min-width: 300px
+        max-width: 48%
+        box-sizing: border-box
+
+    @media (max-width: 900px)
+        > article
+            flex-basis: 100%
+            max-width: 100%
+
 article
     background: $surface
     border-radius: 8px
-    padding: $spacing-unit
-    margin: $spacing-unit 0
-    position: relative
+    padding: 1rem 1.5rem
+    // margin: $spacing-unit 0
+    // position: relative
     transition: background 0.5s ease-in-out
     &:hover, &:focus
         background: $primary-dark

layouts/home.html

@@ -15,6 +15,7 @@
   <section>
     <h2>Try Something New</h2>
     <p>This list shows a selection of 20 random tools, refreshed every time this site is updated.</p>
+    <div id="tool-cards">
     {{ range $pages }}
       <article class="tool-card">
         <h3>
@@ -23,9 +24,28 @@
             <span class="subtitle">{{ .Params.subtitle }}</span>
           {{ end }}
         </h3>
-        <p>{{ .Content | plainify | truncate 125 }}</p>
+        <p>{{ .Content | plainify | truncate 100 }}</p>
         <a href="{{ .RelPermalink }}" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;text-indent:-9999px;overflow:hidden;">{{ .Title }}</a>
       </article>
     {{ end }}
+    </div>
   </section>
+
+    <div class="time" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+    <div class="footer-links" style="text-align: left;">
+      Help improve this page!<br/>
+      Submit an 
+      <a href="https://gitmoss.fyi/fmtools/content/issues/new?template=.gitea%2fissue_template%2ffix_tool.md&title=[FIX]%20{{ .Title | urlquery }}" target="_blank">issue</a> or 
+      <a href="https://gitmoss.fyi/fmtools/content/fork" target="_blank">pull request</a>.
+    </div>
+    {{ if now }}
+    <div class="footer-date" style="text-align: right;">
+      {{ $dateMachine := now | time.Format "2006-01-02T15:04:05-07:00" }}
+      {{ $dateHuman := now | time.Format "2 January 2006" }}
+      Made with &#9829; using <a href="https://gohugo.io" target="_blank">Hugo</a> <br/>
+      Rebuilt on <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+    </div>
+    {{ end }}
+  </div>
+
 {{ end }}