refactor: rework the search form with CSS Grid

the blanket statement `all` causes some weird animations when resizing the page. setting this to only transition specific properties fixes this.

public/assets/css/front/index.css

@@ -77,32 +77,23 @@ form.index-search-form > button > span {
 }
 
 section.index-meta article {
-  padding-block: 30px;
+  margin-top: 20px;
 }
 
-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;
+div.index-meta {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 10px;
+  width: 98%;
   font-weight: 500;
-}
-
-table.index-meta th {
   color: var(--secondary);
-  text-align: left;
 }
 
-table.index-meta td {
-  padding-inline-start: 10px;
+div.index-meta > label:nth-child(2),
+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/typography.css

@@ -67,11 +67,6 @@ h3 {
   font-weight: 500;
 }
 
-h3.strong {
-  color: var(--secondary);
-  font-weight: bolder;
-}
-
 @media only screen and (max-width: 800px) {
   h1 {
     font-size: 2em;

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/frame.blade.php

@@ -6,11 +6,11 @@
     <meta name="theme-color" content="#c3639e" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>
-        @yield('title')
+        @yield('title') 
     </title>
     @if(isset($front) && $front == false)
         <link rel="stylesheet" type="text/css" href="/assets/css/back/start.css?=sdfsdf">
-    @elseif(!isset($front) || $front == true)
+    @elseif(!isset($front) || $front == true) 
         <link rel="stylesheet" type="text/css" href="/assets/css/front/start.css?=sdfsdf">
     @endif
 
@@ -24,7 +24,7 @@
         <div>
             <div class="header-left">
                 <a href="/">
-                    <img src="/assets/images/global/logo-dark.svg" alt="The Bad Space" />
+                    <img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
                 </a>
             </div>
             <div class="header-center">
@@ -98,5 +98,6 @@
         </div>
     </footer>
 </body>
+</body>
 
-</html>
+</html>

resources/views/front/about.blade.php

@@ -1,81 +1,89 @@
 @extends('frame') 
 @section('title', 'The Bad Space|About')
-    @section('main-content')
-        @parent
-        <section>
-            <article>
-                <h2 id="what">What is The Bad Space?</h2>
-                <p>The Bad Space arose from a need to identify instances that house bad actors, are poorly moderated, and/or contain inappropriate/offensive content (CSAM, hate speech, fascist ideology, etc.) that puts marginalized communities at risk.</p>
-                <p>It is an extension of the <strong>#fediblock</strong> hashtag - orginally created by <a href="https://www.artistmarciax.com/">Artist Marcia X</a> with additional support from <a href="https://digital.rooting.garden">Ginger</a> to provide a catalog of instances that seek to cause harm and reduce the quality of experience in the fediverse.</p>
-                <p>The searchable online catalog is built and maintained by <a href="https://roiskinda.cool/profile.html">Ro</a>. The repo can be found <a href="https://koodu.h-i.works/projects/thebadspace">here</a>.</p>
-                <p>Custom silence and suspend icons graciously provided by <a href="https://rage.love/@puf">puf</a>.</p>
+  @section('main-content')
+    @parent
+    <section>
+      <article>
+        <h2 id="what">What is The Bad Space?</h2>
+        <p>The Bad Space arose from a need to identify instances that house bad actors, are poorly moderated, and/or contain inappropriate/offensive content (CSAM, hate speech, fascist ideology, etc.) that puts marginalized communities at risk.
+        </p>
+        <p>
+          It is an extension of the
+          <strong>#fediblock</strong>
+          hashtag - orginally created by
+          <a href="https://www.artistmarciax.com/">Artist Marcia X</a>
+          with additional support from
+          <a href="https://digital.rooting.garden">Ginger</a>
+          to provide a catalog of instances that seek to cause harm and reduce the quality of experience in the fediverse.
+        </p>
+        <p>
+          The searchable online catalog is built and maintained by
+          <a href="https://roiskinda.cool/profile.html">Ro</a>. The repo can be found <a href="https://koodu.h-i.works/projects/thebadspace">here</a>.
+        </p>
+        <p>Custom silence and suspend icons graciously provided by <a href="https://rage.love/@puf">puf</a>.</p>
+        <h2 id="how">How does it work?</h2>
+        <p>The Bad Space is a collaboration of communities, referred to as Current Sources, committed to actively moderating against racism, sexism, heterosexism, transphobia, ableism, casteism, or religion.</p>
 
-                <h2 id="how">How does it work?</h2>
-                <p>The Bad Space is a collaboration of communities, referred to as Current Sources, committed to actively moderating against racism, sexism, heterosexism, transphobia, ableism, casteism, or religion.</p>
-                <p>These communities have permitted The Bad Space to ingest their respective blocklists detailing their silences and suspension to create a composite directory of sites that engage in the behavior(s) listed in the section above. For each behavior, the directory of locations can be searched and, through The Bad Space's public API, integrated into external services.</p>
+        <p>These communities have permitted The Bad Space to ingest their respective blocklists detailing their silences and suspension to create a composite directory of sites that engage in the behavior(s) listed in the section above. For each behavior, the directory of locations can be searched and, through The Bad Space's public API, integrated into external services.</p>
 
-                <h2>Adding Locations</h2>
-                <p>Current Sources continually review the #fediblock hashtag and update their silences and suspensions when warranted. If an instance meets the criteria of a Current Source to be suspended or silenced, The Bad Space will automatically be updated according to said Current Sources' curated data.</p>
-                <p>For an instance to be listed on The Bad Space, at least two (2) Current Sources must have that location silenced and/or suspended. Instances will not display in the directory until two (2) Current Sources have taken moderation action against them.</p>
+        <h2>Adding Locations</h2>
+        <p>
+          Current Sources continually review the #fediblock hashtag and update their silences and suspensions when warranted. If an instance meets the criteria of a Current Source to be suspended or silenced, The Bad Space will automatically be updated according to said Current Sources' curated data.
 
-                <h2>Removing Locations</h2>
-                <p>Locations that are displayed in The Bad Space may petition to be removed from the catalog by sending an appeal request to The Bad Space. The appeal process is outlined <a href="/appeals">here</a>.</p>
+          For an instance to be listed on The Bad Space, at least two (2) Current Sources must have that location silenced and/or suspended. Instances will not display in the directory until two (2) Current Sources have taken moderation action against them.
+        </p>
+        <h2>Removing Locations</h2>
+        Locations that are displayed in The Bad Space may petition to be removed from the catalog by sending an appeal request to The Bad Space. The appeal process is outlined <a href="/appeals">here</a>.
 
-                <h3 class="strong">Current Sources:</h3>
+        <p><strong>Current Sources:</strong></p>
+        Maston:<br />
+        @foreach($sources as $source)
+          @if($source->format == 'json')
+            <a href="https://{{$source->url}}">{{$source->url}}</a><br />
+          @endif
+        @endforeach
+        Custom CSV<br />
+        @foreach($sources as $source)
+          @if($source->format == 'csv')
+            <a href="{{$source->url}}">{{$source->url}}</a><br />
+          @endif
+        @endforeach
 
-                <h4>Maston:</h4>
-                <ul>
-                    @foreach($sources as $source)
-                        @if($source->format == 'json')
-                            <li><a href="https://{{$source->url}}">{{$source->url}}</a></li>
-                        @else
-                            <li>None</li>
-                        @endif
-                    @endforeach
-                </ul>
+        <h2>How do I use it?</h2>
+        <p>
+          The Bad Space is meant to be a resource for anyone looking to improve the quality of their online experience by creating a tool that catalogs sources for harassment and abuse. There are several options for how it can be used.
+        <h3>Search</h3>
+        To see if a site is listed in the database, use the
+        <a href="/">search feature</a>
+        to search for that URL. If it is in the database, information for that instance will be returned and associated instances if applicable.
+        <h3>CSV Exports</h3>
+        For a list of the current locations being tracked, click on one of the links below to download a dynamically generated CSV file that can be consumed as a blocklist. More formats will be added over time.
+        <br />
+        <a href="/exports/mastodon">For Mastodon</a>
+        <h3>API</h3>
+        The Bad Space has a public api that can be used to search the database programatically and return results in the JSON format. The API can be accsess at<br />
+        <code>https://thebad.space/api/v1/search</code>
+        by posting a JSON object with the following format:
+        <code>{"url":"search.url"}</code><br />
+        Data from API request will be returned in the follow format:<br />
 
-                <h4>Custom CSV</h4>
-                <ul>
-                    @foreach($sources as $source)
-                        @if($source->format == 'csv')
-                            <li><a href="{{$source->url}}">{{$source->url}}</a></li>
-                        @else
-                            <!--
-                            <li>None</li>
-                            -->
-                        @endif
-                    @endforeach
-                </ul>
-
-                <h2>How do I use it?</h2>
-                <p>The Bad Space is meant to be a resource for anyone looking to improve the quality of their online experience by creating a tool that catalogs sources for harassment and abuse. There are several options for how it can be used.</p>
-
-                <h3>Search</h3>
-                <p>To see if a site is listed in the database, use the <a href="/">search feature</a> to search for that URL. If it is in the database, information for that instance will be returned and associated instances if applicable.</p>
-
-                <h3>CSV Exports</h3>
-                <p>For a list of the current locations being tracked, click on one of the links below to download a dynamically generated CSV file that can be consumed as a blocklist. More formats will be added over time.</p>
-                <p><a href="/exports">Exports</a></p>
-
-                <h3>API</h3>
-                <p>The Bad Space has a public api that can be used to search the database programatically and return results in the JSON format. The API can be accsess at <code>https://thebad.space/api/v1/search</code> by posting a JSON object with the following format: <code>{"url":"search.url"}</code>. Data from API request will be returned in the follow format:</p>
-
-                <pre>
-<code>{
-    data:{
-        "listingCount":1,
-          "locations":
-          [
-            {
-              "url":"search.url",
-              "name":"Instance Name",
-              "description":"instance description",
-              "link":"bad-space-instance-link"
+        <pre>
+        <code>{
+            data:{
+                "listingCount":1,
+                  "locations":
+                  [
+                    {
+                      "url":"search.url",
+                      "name":"Instance Name",
+                      "description":"instance description",
+                      "link":"bad-space-instance-link"
+                    }
+                  ]
             }
-          ]
-    }
-}</code>
-</pre>
-            </article>
-        </section>
-    @endsection
+        }</code>
+        </pre>
+        </p>
+      </article>
+    </section>
+  @endsection

resources/views/front/index.blade.php

@@ -40,21 +40,14 @@
     @endisset
     <section class="index-meta">
       <article>
-        <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>
+        <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>
       </article>
     </section>
   @endsection