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": {
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"singleQuote": false,
"printWidth": 90
}
},

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

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

@ -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"];

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

@ -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 > 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);
}
header > nav i {
header > div i {
font-size: 1.3em;
}
header > nav > div[role="nav-right"] {
text-align: right;
header > div nav {
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 */
a {
color: var(--highlight);
text-decoration: none;
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
main > section > article {
width: 80%;
max-width: 1000px;
margin: 0 auto;
}
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;
}

@ -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())
<h4>{{$errors->first()}}</h4>
@endif
<div>
<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="submit" value="Knock Knock" name="submit_button">
</form>
</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="" /><br />
<input type="submit" value="Knock Knock" name="submit_button">
</form>
</article>
</section>
@endsection

@ -11,33 +11,37 @@
<body>
<header>
<nav>
<div role="nav-left">
<a href="/" title="home" role="nav-links">
<i class="ti ti-biohazard-off"></i>
<div>
<div class="nav-left">
<a href="/">
<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">
<a href="/den" title="login" role="nav-links">
<i class="ti ti-door-enter" title="login"></i>
</a>
</nav>
<div>
<span title="page-title">{{$title}}</span>
</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

@ -1,31 +1,18 @@
@extends('frame')
@section('title', 'This is The Bad Space')
@section('main-content')
@parent
<section role="start">
<div role="index-wrapper">
<div role="index-search">
<form action="/search" method="post" enctype="multipart/form-data">
<input type="text" name="index_search" value="" placeholder="SEARCH ME!" />
<button>
<i class="ti ti-search"></i>
</button>
</form>
</div>
<div role="index-results">
{{$count}}
Bad Spaces tracked. Shot by
<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
</div>
</div>
<section class="index-search">
<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" />
</button>
</form>
</section>
<section>
<article>
tracking {{$count}} sites;
</article>
</section>
@endsection
Loading…
Cancel
Save