Merge branch 'develop' into moiety/about

public/assets/css/front/index.css

@@ -50,23 +50,32 @@ form.index-search-form > button > label {
 }
 
 section.index-meta article {
-  margin-top: 20px;
+  padding-block: 30px;
 }
 
-div.index-meta {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  gap: 10px;
-  width: 98%;
-  font-weight: 500;
-  color: var(--secondary);
-}
-
-div.index-meta > label:nth-child(2),
-div.index-meta > label:nth-child(4),
-div.index-meta > label:nth-child(6) {
-  color: var(--white);
+table.index-meta {
   width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table.index-meta tr + tr > * {
+  padding-block-start: 10px;
+}
+
+table.index-meta :is(th, td) {
+  padding: 0;
+  font-weight: 500;
+}
+
+table.index-meta th {
+  color: var(--secondary);
+  text-align: left;
+}
+
+table.index-meta td {
+  padding-inline-start: 10px;
+  color: var(--white);
   text-align: right;
 }
 

public/assets/css/front/start.css

@@ -1,3 +1,4 @@
+@import "../global/utilities.css";
 @import "../global/colors.css";
 @import "../global/forms.css";
 @import "../global/typography.css";

public/assets/css/global/utilities.css

@@ -0,0 +1,13 @@
+/**
+ * Utilities
+ */
+
+.visually-hidden:not(:focus):not(:active) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}

resources/views/front/index.blade.php

@@ -38,14 +38,21 @@
     @endisset
     <section class="index-meta">
       <article>
-        <div class="index-meta">
-          <label>Active Locations Tracked</label>
-          <label>{{$count}}</label>
-          <label>Total Sources</label>
-          <label>{{$sources}}</label>
-          <label>Latest Update</label>
-          <label>{{$latest_date}}</label>
-        </div>
+        <table class="index-meta">
+          <caption class="visually-hidden">Meta</caption>
+          <tr>
+            <th>Active Locations Tracked</th>
+            <td>{{$count}}</td>
+          </tr>
+          <tr>
+            <th>Total Sources</th>
+            <td>{{$sources}}</td>
+          </tr>
+          <tr>
+            <th>Latest Update</th>
+            <td>{{$latest_date}}</td>
+          </tr>
+        </table>
       </article>
     </section>
   @endsection