Responsive Part 2, environment changes

Hit the major friction points in the responsive UI. Still have some
polishing to do but there shouldn't be any show stoppers at this points.

Also moved some variable to the env so they can be changed easily when
necessary

app/Http/Controllers/AppealMailController.php

@@ -21,7 +21,7 @@ class AppealMailController extends Controller
                 'error' => 'Invalid Request',
             ]);
         } else {
-            Mail::to('ro@h-i.works')->send(new LocationAppeal($request->location, $request->sponsor));
+            Mail::to(env('TBS_ADMIN_EMAIL'))->send(new LocationAppeal($request->location, $request->sponsor));
 
             //return redirect('/appeals');
             return back()->with('message', "Appeal Filed");

app/Mail/LocationAppeal.php

@@ -27,7 +27,7 @@ class LocationAppeal extends Mailable
     public function envelope(): Envelope
     {
         return new Envelope(
-            from: new Address('thebadspace@h-i.works', 'TBS Appeal Request'),
+            from: new Address(env('TBS_FROM_ADDRESS'), 'TBS Appeal Request'),
             subject: 'Location Appeal',
         );
     }

public/assets/css/front/index.css

@@ -32,6 +32,18 @@ form.index-search-form > button {
   right: 0;
 }
 
+form.index-search-form > button > img#search-icon {
+  float: none;
+}
+
+form.index-search-form > button > label {
+  font-weight: 500;
+  top: 15px;
+  position: relative;
+  font-size: 1.5em;
+  display: none;
+}
+
 ::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: var(--highlight);
@@ -65,3 +77,32 @@ div.index-meta > label:nth-child(6) {
     font: 34px var(--base-type);
   }
 }
+
+@media only screen and (max-width: 650px) {
+  form.index-search-form > input[type="text"] {
+    width: 80%;
+    height: 50px;
+    font: 34px var(--base-type);
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  form.index-search-form > input[type="text"] {
+    width: 99%;
+    height: 50px;
+    font: 27px var(--base-type);
+  }
+
+  form.index-search-form > button {
+    width: 99%;
+    top: 15px;
+  }
+
+  form.index-search-form > button > label {
+    display: inline;
+  }
+
+  form.index-search-form > button > img#search-icon {
+    float: right;
+  }
+}

public/assets/css/front/listing.css

@@ -39,7 +39,7 @@ a.list-link {
   display: grid;
   grid-template-columns: 70px 1fr 80px 80px;
   gap: 10px;
-  height: 45px;
+  height: auto;
   padding-bottom: 20px;
   cursor: pointer;
 }
@@ -123,3 +123,33 @@ a.list-link > .item-block > .item-icon {
     height: 100%;
   }
 }
+
+@media only screen and (max-width: 480px) {
+  a.list-link {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 100% auto 30px 30px;
+    gap: 5px;
+    height: auto;
+    padding-bottom: 20px;
+    cursor: pointer;
+  }
+
+  a.list-link > .item-rating {
+    grid-row: 3;
+    grid-column: 1/2;
+    height: 100%;
+  }
+
+  a.list-link > .item-silence {
+    grid-row: 3/4;
+    grid-column: 2/4;
+    height: 100%;
+  }
+
+  a.list-link > .item-block {
+    grid-row: 3/4;
+    height: 100%;
+    grid-column: 4/6;
+  }
+}

public/assets/css/front/location.css

@@ -54,3 +54,31 @@ div.location-rating > div > span {
   width: 35px;
   position: relative;
 }
+
+@media only screen and (max-width: 800px) {
+  div.location-rating {
+    font-size: 0.65em;
+  }
+
+  div.location-rating > div > span {
+    width: 75%;
+  }
+}
+
+@media only screen and (max-width: 670px) {
+  div.location-rating {
+    grid-template-columns: 1fr 1fr;
+    font-size: 0.7em;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  div.location-rating {
+    grid-template-columns: 1fr;
+    font-size: 0.8em;
+  }
+
+  div.location-rating > div > span {
+    width: 85%;
+  }
+}

public/assets/css/global/frame.css

@@ -205,9 +205,6 @@ footer > div:nth-child(1) {
  */
 
 @media only screen and (max-width: 960px) {
-  header > div:nth-child(1) {
-  }
-
   header > div nav {
     bottom: 17px;
   }
@@ -224,5 +221,29 @@ footer > div:nth-child(1) {
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 650px) {
+  header > div:nth-child(1) {
+    grid-template-columns: 150px 65% 1fr;
+    grid-template-rows: 75% 1fr;
+    height: auto;
+    gap: 15px;
+  }
+
+  header > div > div.header-left {
+    grid-row: 1/2;
+    position: relative;
+    width: 100px;
+  }
+
+  header > div > div.header-center {
+    grid-row: 2/3;
+    grid-column: 1/4;
+    position: relative;
+  }
+}
+
+@media only screen and (max-width: 440px) {
+  header > div:nth-child(1) {
+    grid-template-columns: 150px 40% 1fr;
+  }
 }

public/assets/css/global/typography.css

@@ -66,3 +66,23 @@ h3 {
   font-size: 1em;
   font-weight: 500;
 }
+
+@media only screen and (max-width: 800px) {
+  h1 {
+    font-size: 2em;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  h1 {
+    font-size: 1.5em;
+    letter-spacing: -3px;
+    width: 100%;
+    position: relative;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  font-size: 1.5em;
+  letter-spacing: -3px;
+}

resources/views/front/index.blade.php

@@ -6,7 +6,8 @@
       <form class="index-search-form" action="/search" method="post" enctype="multipart/form-data">
         <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
         <button aria-label="search-button">
-          <img class="button-icon" src="assets/images/global/icon-search.svg" />
+          <label id="search-label">LOOK FOR IT</label>
+          <img id="search-icon" class="button-icon" src="assets/images/global/icon-search.svg" />
         </button>
         @csrf
       </form>