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.remotes/alcapurrias/about-updates
parent
62a11168ec
commit
e35dff591f
|
@ -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;
|
||||
section.index-search {
|
||||
width: 100%;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
section[role="start"] div[role="index-search"] {
|
||||
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 {
|
||||
section.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);
|
||||
}
|
||||
|
|
|
@ -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"] {
|
||||
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…
Reference in New Issue