kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-09-19 10:14:21 -04:00
Code Issues Projects Releases Packages Wiki Activity

Use custom styling for the laravel-based error pages

Browse source
This commit is contained in:
Kevin MacMartin 2018-04-15 21:54:43 -04:00
parent 71e8146f9c
commit d335a3d587
12 changed files with 72 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
gulpfile.js vendored
View file

@ -140,6 +140,11 @@ gulp.task("sass-dashboard", () => {
return processSass("dashboard");
});
// Task for error page styles
gulp.task("sass-error", () => {
return processSass("error");
});
// Task for public javascript
gulp.task("js-public", () => {
return processVue("app", jsPublic);
@ -191,13 +196,14 @@ gulp.task("watch", () => {
gulp.watch([ "app/**/*.php", "routes/**/*.php", "resources/views/**/*.blade.php" ], gulp.series(browserSyncReload));
gulp.watch([ jsPublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], gulp.series("js-public", browserSyncReload));
gulp.watch(jsDashboard, gulp.series("js-dashboard", browserSyncReload));
gulp.watch("resources/assets/sass/**/*.scss", gulp.parallel("sass-public", "sass-dashboard"));
gulp.watch("resources/assets/sass/**/*.scss", gulp.parallel("sass-public", "sass-dashboard", "sass-error"));
});
// Task to run non-development tasks
gulp.task("default", gulp.parallel(
"sass-public",
"sass-dashboard",
"sass-error",
"js-public",
"js-public-libs",
"js-dashboard",

BIN
resources/assets/fonts/OpenSans-Bold.eot Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.otf Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.ttf Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.woff Normal file
View file

Binary file not shown.

BIN
resources/assets/fonts/OpenSans-Bold.woff2 Normal file
View file

Binary file not shown.

17
resources/assets/sass/_fonts.scss vendored
View file

@ -10,6 +10,18 @@
font-style: normal;
}
@font-face {
font-family: "OpenSans-Bold";
src: url("/fonts/OpenSans-Bold.eot");
src: url("/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"),
url("/fonts/OpenSans-Bold.woff") format("woff"),
url("/fonts/OpenSans-Bold.woff2") format("woff2"),
url("/fonts/OpenSans-Bold.ttf") format("truetype"),
url("/fonts/OpenSans-Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@mixin normalize-font {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -19,3 +31,8 @@
@include normalize-font;
font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
}
@mixin font-sans-bold {
@include normalize-font;
font-family: "OpenSans-Bold", Arial, Helvetica, sans-serif;
}

28
resources/assets/sass/error.scss vendored Normal file
View file

@ -0,0 +1,28 @@
// Core
@import "_fonts";
// Libraries
@import "bootstrap/scss/bootstrap.scss";
.error-page {
display: flex;
min-height: 100vh;
padding: $grid-gutter-width ($grid-gutter-width / 2);
align-items: center;
&-content {
@include font-sans-bold;
width: 100%;
font-size: 22px;
text-align: center;
text-transform: uppercase;
@include media-breakpoint-up(sm) {
font-size: 32px;
}
@include media-breakpoint-up(lg) {
font-size: 48px;
}
}
}

8
resources/views/errors/404.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error')
@section('error-title')
Page Not Found
@endsection
@extends('templates.error', [
'title' => 'Page Not Found'
])

8
resources/views/errors/503.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error')
@section('error-title')
Be Right Back
@endsection
@extends('templates.error', [
'title' => 'Be Right Back'
])

8
resources/views/errors/no-such-record.blade.php
View file

@ -1,5 +1,3 @@
@extends('templates.error')
@section('error-title')
No Such Record
@endsection
@extends('templates.error', [
'title' => 'No Such Record'
])

53
resources/views/templates/error.blade.php
View file

@ -1,46 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>@yield('error-title') - {{ env('APP_NAME') }}</title>
@extends('templates.base')
<style>
html, body {
height: 100%;
}
@section('page-includes')
<link rel="stylesheet" href="/css/error.css?version={{ env('CACHE_BUST') }}" />
@endsection
body {
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: Impact, Charcoal, sans-serif;
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 72px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">@yield('error-title')</div>
@section('page-content')
<div class="flex-wrapper">
<div class="error-page">
<div class="error-page-content">
{{ $title }}
</div>
</div>
</body>
</html>
</div>
@endsection