Added mobile first menu and started responsive

Swithced the main nav to a mobile layout to cut down on complex
responsive styling to make the heaader work.

Also began touching up site wide responsive styles so the site works on
multiple devices.

app/Http/Controllers/ExportController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+class ExportController extends Controller
+{
+    //
+    public function exportCSV()
+    {
+        /*
+        $columns = [
+            'id',
+            'product_name',
+            'product_url',
+            'price',
+            'category'
+        ];
+
+        $products = [
+            [1, 'product 1', 'https://example.com/product-1', '9.99', 'category 1'],
+            [2, 'product 2', 'https://example.com/product-2', '19.99', 'category 2'],
+            [3, 'product 3', 'https://example.com/product-3', '29.99', 'category 3'],
+            [4, 'product 4', 'https://example.com/product-4', '39.99', 'category 4'],
+        ];
+
+        header('Content-Type: text/csv');
+        header('Content-Disposition: attachment; filename="products.csv"');
+
+        echo implode(',', $columns) . PHP_EOL;
+        foreach ($products as $product) {
+            echo implode(',', $product) . PHP_EOL;
+        }
+        */
+    }
+}

public/assets/css/front/index.css

@@ -19,7 +19,7 @@ form.index-search-form {
 }
 
 form.index-search-form > input[type="text"] {
-  width: 91%;
+  width: 88%;
   height: 50px;
   font: 44px var(--base-type);
 }
@@ -29,6 +29,7 @@ form.index-search-form > button {
   width: 60px;
   position: relative;
   top: 9px;
+  right: 0;
 }
 
 ::placeholder {
@@ -39,3 +40,11 @@ form.index-search-form > button {
 section.index-meta article {
   margin-top: 20px;
 }
+
+@media only screen and (max-width: 800px) {
+  form.index-search-form > input[type="text"] {
+    width: 85%;
+    height: 50px;
+    font: 34px var(--base-type);
+  }
+}

public/assets/css/global/frame.css

@@ -19,10 +19,10 @@ html body {
 a {
   color: var(--highlight);
   text-decoration: none;
-
+  transition: all 0.2s linear;
   /*
   border-bottom: 1px solid var(--white);
-  transition: all 0.2s linear;
+
   */
 }
 
@@ -34,7 +34,7 @@ header {
 
 header > div:nth-child(1) {
   display: grid;
-  grid-template-columns: 200px 50% 1fr;
+  grid-template-columns: 200px 1fr 40px;
   padding: 10px;
   gap: 10px;
   height: 200px;
@@ -66,9 +66,12 @@ header > div i {
 }
 
 header > div nav {
-  position: absolute;
-  bottom: 20px;
-  right: 0;
+  background: var(--black);
+  position: relative;
+}
+
+.header-right {
+  text-align: right;
 }
 
 div.system-notice-error {
@@ -90,15 +93,47 @@ main > section > article {
   min-height: 400px;
 }
 
-/* GLOBALS */
+/* NAV */
 
-a.nav-links {
-  padding: 7px;
-  border-bottom: none;
+#main-nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--black);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+label[for="element-toggle"] {
+  cursor: pointer;
+}
+
+#element-toggle {
+  display: none;
+}
+
+#element-toggle:not(:checked) ~ #main-nav {
+  display: none;
+}
+
+a.nav-links {
+  border-bottom: none;
+  font-size: 40px;
+  color: var(--highlight);
+  text-decoration: none;
+}
+
+/* GLOBALS */
+
 a:hover {
+  /*
   border-bottom: 1px solid var(--secondary);
+  */
+  color: var(--white);
 }
 
 pre {
@@ -126,6 +161,14 @@ sup {
   padding-top: 3px;
 }
 
+.menu-icon {
+  width: 40px;
+}
+
+.location-title {
+  display: none;
+}
+
 .location-image {
   height: 200px;
   width: 200px;
@@ -133,8 +176,6 @@ sup {
   border-radius: 3px;
 }
 
-/* GLOBALS */
-
 footer {
   width: 100%;
   color: var(--primary);
@@ -153,3 +194,30 @@ footer > div:nth-child(1) {
   max-width: 1000px;
   position: relative;
 }
+
+/*
+    responsive
+ */
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+    grid-template-columns: 150px 65% 1fr;
+    height: 150px;
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+}

public/assets/css/global/typography.css

@@ -41,7 +41,7 @@
 }
 
 h1 {
-  font-size: 3em;
+  font-size: 2.5em;
   font-weight: 600;
   font-kerning: normal;
   letter-spacing: -5px;
@@ -50,11 +50,12 @@ h1 {
   margin: 0;
   position: absolute;
   bottom: 20px;
-  width: 66%;
+  width: 70%;
+  overflow-wrap: break-word;
 }
 
 h2 {
-  font-size: 2em;
+  font-size: 1.5em;
   font-weight: 500;
   line-height: 0.8em;
   color: var(--white);
@@ -62,6 +63,6 @@ h2 {
 }
 
 h3 {
-  font-size: 2em;
+  font-size: 1.5em;
   font-weight: 300;
 }

public/assets/images/global/close.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 18 6 L 6 18"/>
+    <path id="path2" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 6 6 L 18 18"/>
+</svg>

public/assets/images/global/menu.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 6 L 20 6"/>
+    <path id="path2" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 12 L 20 12"/>
+    <path id="path3" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 18 L 20 18"/>
+</svg>

resources/views/frame.blade.php

@@ -12,37 +12,47 @@
 </head>
 
 <body>
+
   <header>
     <div>
-      <div class="nav-left">
+      <div class="header-left">
         <a href="/">
           <img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
         </a>
       </div>
-      <div>
+      <div class="header-center">
         <h1>{{$title}}</h1>
       </div>
-      <div>
-        <nav>
-          <a href="/about" title="about" class="nav-links">
-            About
-          </a><br />
-          <a href="/listings/1" title="instance listing" class="nav-links">
-            Listings
-          </a><br />
-          @if(Auth::check())
-            <a href="/den" title="den-start" class="nav-links">
-              Den
+      <div class="header-right">
+        <label for="element-toggle">
+          <img class="menu-icon" src="/assets/images/global/menu.svg" title="menu-open-toggle" />
+        </label>
+        <input id="element-toggle" type="checkbox" />
+        <div id="main-nav">
+          <nav>
+            <label for="element-toggle">
+              <img class="menu-icon" src="/assets/images/global/close.svg" title="menu-open-toggle" />
+            </label><br>
+            <a href="/about" title="about" class="nav-links">
+              About
             </a><br />
-            <a href="/logout" title="logout" class="nav-links">
-              Logout
+            <a href="/listings/1" title="instance listing" class="nav-links">
+              Listings
             </a><br />
-          @else
-            <a href="/den" title="login" class="nav-links">
-              The Den
-            </a><br />
-          @endif
-        </nav>
+            @if(Auth::check())
+              <a href="/den" title="den-start" class="nav-links">
+                Den
+              </a><br />
+              <a href="/logout" title="logout" class="nav-links">
+                Logout
+              </a><br />
+            @else
+              <a href="/den" title="login" class="nav-links">
+                The Den
+              </a><br />
+            @endif
+          </nav>
+        </div>
       </div>
     </div>
   </header>

resources/views/front/location.blade.php

@@ -6,13 +6,17 @@
     @parent
     <section>
       <article>
+        <h1 class="location-title">{{$title}}</h1>
         <h2>Description</h2>
         {{$location->description}}<br />
         <h2>Screens</h2>
-        @foreach($images as $image)
-          <a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
-          </a>
-        @endforeach
+        @if($images != null)
+          @foreach($images as $image)
+            <a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
+            </a>
+          @endforeach
+        @endif
+
         <br />UPDATED : {{$updated}}
       </article>
     </section>

routes/web.php

@@ -5,6 +5,7 @@ use App\Http\Controllers\FrontIndexController;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\DenController;
 use App\Http\Controllers\LocationController;
+use App\Http\Controllers\ExportController;
 
 /*
 |--------------------------------------------------------------------------
@@ -24,6 +25,9 @@ Route::get("/about", [FrontIndexController::class, 'about']);
 Route::get("/location/{uuid}", [FrontIndexController::class, 'location']);
 Route::post("/search", [FrontIndexController::class, 'indexSearch']);
 
+//exports
+Route::get("/exports/test", [ExportController::class, 'exportCSV']);
+
 //auth
 Route::get("/login", [AuthController::class, 'showLogin']);
 Route::post("/login", [AuthController::class, 'memberAuth']);