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.
about-updates
Ro 1 year ago
parent 7feb76517a
commit c087d00a2b
Signed by untrusted user: are0h
GPG Key ID: 29B551CDBD4D3B50

@ -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;
}
*/
}
}

@ -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);
}
}

@ -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 */
#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 {
padding: 7px;
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) {
}

@ -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;
}

@ -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>

After

Width:  |  Height:  |  Size: 523 B

@ -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>

After

Width:  |  Height:  |  Size: 658 B

@ -12,18 +12,27 @@
</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>
<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 />
@ -45,6 +54,7 @@
</nav>
</div>
</div>
</div>
</header>
@if($errors->any())

@ -6,13 +6,17 @@
@parent
<section>
<article>
<h1 class="location-title">{{$title}}</h1>
<h2>Description</h2>
{{$location->description}}<br />
<h2>Screens</h2>
@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>

@ -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']);

Loading…
Cancel
Save