public/assets/css/front/index.css

@@ -50,32 +50,23 @@ form.index-search-form > button > label {
 }
 
 section.index-meta article {
-  padding-block: 30px;
+  margin-top: 20px;
 }
 
-table.index-meta {
+div.index-meta {
-  width: 100%;
+  display: grid;
-  border-collapse: collapse;
+  grid-template-columns: 50% 50%;
-  border-spacing: 0;
+  gap: 10px;
-}
+  width: 98%;
-
-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 {
+div.index-meta > label:nth-child(2),
-  padding-inline-start: 10px;
+div.index-meta > label:nth-child(4),
+div.index-meta > label:nth-child(6) {
   color: var(--white);
+  width: 100%;
   text-align: right;
 }
 

public/assets/css/front/start.css

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

public/assets/css/global/utilities.css

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