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.
pull/8/head
Ro 1 year ago
parent 62a11168ec
commit e35dff591f
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50

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

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

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

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

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

@ -16,31 +16,62 @@ html body {
overflow-x: hidden; overflow-x: hidden;
} }
a {
color: var(--highlight);
text-decoration: none;
/*
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
*/
}
header { header {
width: 100%; width: 100%;
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
} }
header > nav { header > div:nth-child(1) {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 200px 50% 1fr;
padding: 10px; padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
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 > nav a { header > div a {
color: var(--primary); color: var(--primary);
} }
header > nav i { header > div i {
font-size: 1.3em; 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); background: var(--highlight);
color: var(--primary); color: var(--primary);
padding: 10px; padding: 10px;
@ -50,16 +81,15 @@ main {
height: 100%; 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; padding: 7px;
border-bottom: none; border-bottom: none;
} }
@ -87,3 +117,8 @@ sup {
vertical-align: baseline; vertical-align: baseline;
font-family: var(--mono-type); font-family: var(--mono-type);
} }
.button-icon {
height: 90%;
padding-top: 3px;
}

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

After

Width:  |  Height:  |  Size: 729 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

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

@ -11,33 +11,37 @@
<body> <body>
<header> <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>
<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>
<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>
</a> <div>
<nav>
</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> </header>
@if($errors->any()) @if($errors->any())
<div role="system-notice"> <div class="system-notice">
<i class="ti ti-alert-circle"></i> {{$errors->first()}} <i class="ti ti-alert-circle"></i> {{$errors->first()}}
</div> </div>
@endif @endif
@if(session('message')) @if(session('message'))
<div role="system-notice"> <div class="system-notice">
<i class="ti ti-alert-circle"></i> {!! session('message') !!} <i class="ti ti-alert-circle"></i> {!! session('message') !!}
</div> </div>
@endif @endif

@ -1,31 +1,18 @@
@extends('frame') @extends('frame')
@section('title', 'This is The Bad Space') @section('title', 'This is The Bad Space')
@section('main-content') @section('main-content')
@parent @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>
<button> </form>
<i class="ti ti-search"></i> </section>
</button> <section>
</form> <article>
</div> tracking {{$count}} sites;
</article>
<div role="index-results">
{{$count}}
Bad Spaces tracked. Shot by
<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
</div>
</div>
</section> </section>
@endsection @endsection
Loading…
Cancel
Save