Started CSS and Layout upgrades

Functionality is coming along at a good pace, so it was time to start
adjusting the templates and styles to the new layout.

Responsive will come after all of the pages have been updated.

.prettierrc

@@ -9,7 +9,7 @@
             "options": {
                 "tabWidth": 2,
                 "semi": false,
-                "singleQuote": true,
+                "singleQuote": false,
                 "printWidth": 90
             }
         },

app/Http/Controllers/AuthController.php

@@ -13,7 +13,7 @@ class AuthController extends Controller
         //$token = $request->session()->token();
 
         //$token = csrf_token();
-        return view('back.login');
+        return view('back.login', ["title" => "The Den Login"]);
     }
 
     public function memberAuth(Request $request): Response

app/Http/Controllers/FrontIndexController.php

@@ -16,6 +16,9 @@ class FrontIndexController extends Controller
 
         //$result = DB::select("SELECT * FROM searchlocations('$terms')");
 
-        return view('front.index', ['count' => $count]);
+        return view('front.index', [
+            'count' => $count,
+            'title' => "The Bad Space"
+        ]);
     }
 }

app/Models/Location.php

@@ -19,7 +19,6 @@ class Location extends Model
     protected $primaryKey = 'id';
     public $incrementing  = true;
     protected $fillable   = [
-        "id",
         "uuid",
         "name",
         "url", "description", "images", "active", "rating", "added_by", "tags", "created_at", "updated_at"];

public/assets/css/front/index.css

@@ -1,58 +1,43 @@
-section[role="start"] {
+section.index-search {
-  background-image: url("../../images/global/special-trash.jpg");
-  height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  align-items: center;
-  justify-content: center;
-}
-
-section[role="start"] div[role="index-wrapper"] {
-  margin: 0 auto;
   width: 100%;
+  background: var(--white);
 }
 
-section[role="start"] div[role="index-search"] {
+section.start a.search-link {
-  width: 100%;
-  border-bottom: 1px solid var(--secondary);
-}
-
-section[role="start"] div[role="index-results"] {
-  width: 100%;
-  padding: 10px;
-  background: rgb(var(--primary-rgb) / 60%);
-  border-bottom: 1px solid var(--white);
-}
-
-section[role="start"] div input[type="text"] {
-  background: none;
-  font-weight: bold;
-  font-size: 3.5em;
-  width: 91%;
-  color: var(--white);
-  text-shadow: 1px 1px 1px var(--primary);
-  outline: none;
-}
-
-section[role="start"] div button {
-  vertical-align: text-bottom;
-  width: 57px;
-  height: 57px;
-}
-
-section[role="start"] div button i {
-  font-size: 1.5em;
-}
-
-section[role="start"] h1 {
-  color: var(--white);
-}
-
-section[role="start"] a.search-link {
   color: var(--highlight);
   font-size: 2.5em;
   font-weight: bold;
   border: 0;
   display: block;
 }
+
+form.index-search-form {
+  width: 80%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 30px 0;
+}
+
+input[type="text"]:focus {
+  outline: solid var(--highlight);
+  background-color: var(--highlight);
+}
+
+form.index-search-form > input[type="text"] {
+  width: 91%;
+  height: 50px;
+  font: 44px var(--base-type);
+  transition: all 0.2s linear;
+}
+
+form.index-search-form > button {
+  height: 60px;
+  width: 60px;
+  position: relative;
+  top: 9px;
+}
+
+::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--highlight);
+}

public/assets/css/global/frame.css

@@ -16,31 +16,62 @@ html body {
   overflow-x: hidden;
 }
 
+a {
+  color: var(--highlight);
+  text-decoration: none;
+
+  /*
+  border-bottom: 1px solid var(--white);
+  transition: all 0.2s linear;
+  */
+}
+
 header {
   width: 100%;
   color: var(--primary);
   background: var(--secondary);
 }
 
-header > nav {
+header > div:nth-child(1) {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 200px 50% 1fr;
   padding: 10px;
+  gap: 10px;
+  height: 200px;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 1000px;
+  position: relative;
 }
 
-header > nav a {
+header > div span {
+  font-size: 3em;
+  font-weight: bold;
+  position: absolute;
+  bottom: 25px;
+  width: 50%;
+  line-height: 0.8em;
+}
+
+header > div img {
+  width: 100%;
+}
+
+header > div a {
   color: var(--primary);
 }
 
-header > nav i {
+header > div i {
   font-size: 1.3em;
 }
 
-header > nav > div[role="nav-right"] {
+header > div nav {
-  text-align: right;
+  position: absolute;
+  bottom: 20px;
+  right: 0;
 }
 
-div[role="system-notice"] {
+div.system-notice {
   background: var(--highlight);
   color: var(--primary);
   padding: 10px;
@@ -50,16 +81,15 @@ main {
   height: 100%;
 }
 
-/* GLOBALS */
+main > section > article {
-
+  width: 80%;
-a {
+  max-width: 1000px;
-  color: var(--highlight);
+  margin: 0 auto;
-  text-decoration: none;
-  border-bottom: 1px solid var(--white);
-  transition: all 0.2s linear;
 }
 
-a[role="nav-links"] {
+/* GLOBALS */
+
+a.nav-links {
   padding: 7px;
   border-bottom: none;
 }
@@ -87,3 +117,8 @@ sup {
   vertical-align: baseline;
   font-family: var(--mono-type);
 }
+
+.button-icon {
+  height: 90%;
+  padding-top: 3px;
+}

public/assets/images/global/icon-search.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="101" height="100" viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group-copy">
+        <path id="Path-copy-2" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
+        <path id="Path-copy" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
+    </g>
+</svg>

resources/views/back/login.blade.php

@@ -7,15 +7,17 @@
     @if($errors->any())
       <h4>{{$errors->first()}}</h4>
     @endif
-    <div>
+    <section>
+      <article>
         <form action="/login" method="post" enctype="multipart/form-data">
           @csrf
           <label>Handle</label><br />
           <input type="text" name="handle" value="" />
           <br />
           <label>Password</label><br />
-        <input type="password" name="password" value="" />
+          <input type="password" name="password" value="" /><br />
           <input type="submit" value="Knock Knock" name="submit_button">
         </form>
-    </div>
+      </article>
+    </section>
   @endsection

resources/views/frame.blade.php

@@ -11,33 +11,37 @@
 
 <body>
   <header>
-    <nav>
+    <div>
-      <div role="nav-left">
+      <div class="nav-left">
-        <a href="/" title="home" role="nav-links">
+        <a href="/">
-          <i class="ti ti-biohazard-off"></i>
+          <img src="assets/images/global/logo-dark.svg" title="bad-space-logo" />
         </a>
-        <a href="/about" title="about" role="nav-links">
-          <i class="ti ti-info-circle"></i>
-        </a>
-        <a href="/listings/page/1" title="instance listing" role="nav-links">
-          <i class="ti ti-list"></i>
-        </a>
-
       </div>
-      <div role="nav-right">
+      <div>
-        <a href="/den" title="login" role="nav-links">
+        <span title="page-title">{{$title}}</span>
-          <i class="ti ti-door-enter" title="login"></i>
+      </div>
+      <div>
+        <nav>
+          <a href="/about" title="about" class="nav-links">
+            About
+          </a><br />
+          <a href="/listings/page/1" title="instance listing" class="nav-links">
+            Listing
+          </a><br />
+          <a href="/den" title="login" class="nav-links">
+            The Den
           </a>
-
         </nav>
+      </div>
+    </div>
   </header>
   @if($errors->any())
-    <div role="system-notice">
+    <div class="system-notice">
       <i class="ti ti-alert-circle"></i> {{$errors->first()}}
     </div>
   @endif
   @if(session('message'))
-    <div role="system-notice">
+    <div class="system-notice">
       <i class="ti ti-alert-circle"></i> {!! session('message') !!}
     </div>
   @endif

resources/views/front/index.blade.php

@@ -1,31 +1,18 @@
 @extends('frame') 
-
 @section('title', 'This is The Bad Space')
-
   @section('main-content')
     @parent
-
+    <section class="index-search">
-    <section role="start">
+      <form class="index-search-form" action="/search" method="post" enctype="multipart/form-data">
-      <div role="index-wrapper">
+        <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
-        <div role="index-search">
+        <button aria-label="search-button">
-          <form action="/search" method="post" enctype="multipart/form-data">
+          <img class="button-icon" src="assets/images/global/icon-search.svg" />
-            <input type="text" name="index_search" value="" placeholder="SEARCH ME!" />
-            <button>
-              <i class="ti ti-search"></i>
         </button>
       </form>
-        </div>
+    </section>
-
+    <section>
-
+      <article>
-        <div role="index-results">
+        tracking {{$count}} sites;
-
+      </article>
-          {{$count}}
-          Bad Spaces tracked. Shot by
-          <a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
-        </div>
-
-      </div>
-
-
     </section>
   @endsection