mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 19:26:38 -05:00
Use custom styling for the laravel-based error pages
This commit is contained in:
parent
71e8146f9c
commit
d335a3d587
12 changed files with 72 additions and 58 deletions
8
gulpfile.js
vendored
8
gulpfile.js
vendored
|
@ -140,6 +140,11 @@ gulp.task("sass-dashboard", () => {
|
||||||
return processSass("dashboard");
|
return processSass("dashboard");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Task for error page styles
|
||||||
|
gulp.task("sass-error", () => {
|
||||||
|
return processSass("error");
|
||||||
|
});
|
||||||
|
|
||||||
// Task for public javascript
|
// Task for public javascript
|
||||||
gulp.task("js-public", () => {
|
gulp.task("js-public", () => {
|
||||||
return processVue("app", jsPublic);
|
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([ "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([ jsPublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], gulp.series("js-public", browserSyncReload));
|
||||||
gulp.watch(jsDashboard, gulp.series("js-dashboard", 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
|
// Task to run non-development tasks
|
||||||
gulp.task("default", gulp.parallel(
|
gulp.task("default", gulp.parallel(
|
||||||
"sass-public",
|
"sass-public",
|
||||||
"sass-dashboard",
|
"sass-dashboard",
|
||||||
|
"sass-error",
|
||||||
"js-public",
|
"js-public",
|
||||||
"js-public-libs",
|
"js-public-libs",
|
||||||
"js-dashboard",
|
"js-dashboard",
|
||||||
|
|
BIN
resources/assets/fonts/OpenSans-Bold.eot
Normal file
BIN
resources/assets/fonts/OpenSans-Bold.eot
Normal file
Binary file not shown.
BIN
resources/assets/fonts/OpenSans-Bold.otf
Normal file
BIN
resources/assets/fonts/OpenSans-Bold.otf
Normal file
Binary file not shown.
BIN
resources/assets/fonts/OpenSans-Bold.ttf
Normal file
BIN
resources/assets/fonts/OpenSans-Bold.ttf
Normal file
Binary file not shown.
BIN
resources/assets/fonts/OpenSans-Bold.woff
Normal file
BIN
resources/assets/fonts/OpenSans-Bold.woff
Normal file
Binary file not shown.
BIN
resources/assets/fonts/OpenSans-Bold.woff2
Normal file
BIN
resources/assets/fonts/OpenSans-Bold.woff2
Normal file
Binary file not shown.
17
resources/assets/sass/_fonts.scss
vendored
17
resources/assets/sass/_fonts.scss
vendored
|
@ -10,6 +10,18 @@
|
||||||
font-style: normal;
|
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 {
|
@mixin normalize-font {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
@ -19,3 +31,8 @@
|
||||||
@include normalize-font;
|
@include normalize-font;
|
||||||
font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
|
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
28
resources/assets/sass/error.scss
vendored
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,3 @@
|
||||||
@extends('templates.error')
|
@extends('templates.error', [
|
||||||
|
'title' => 'Page Not Found'
|
||||||
@section('error-title')
|
])
|
||||||
Page Not Found
|
|
||||||
@endsection
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@extends('templates.error')
|
@extends('templates.error', [
|
||||||
|
'title' => 'Be Right Back'
|
||||||
@section('error-title')
|
])
|
||||||
Be Right Back
|
|
||||||
@endsection
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@extends('templates.error')
|
@extends('templates.error', [
|
||||||
|
'title' => 'No Such Record'
|
||||||
@section('error-title')
|
])
|
||||||
No Such Record
|
|
||||||
@endsection
|
|
||||||
|
|
|
@ -1,46 +1,15 @@
|
||||||
<!DOCTYPE html>
|
@extends('templates.base')
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>@yield('error-title') - {{ env('APP_NAME') }}</title>
|
|
||||||
|
|
||||||
<style>
|
@section('page-includes')
|
||||||
html, body {
|
<link rel="stylesheet" href="/css/error.css?version={{ env('CACHE_BUST') }}" />
|
||||||
height: 100%;
|
@endsection
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
@section('page-content')
|
||||||
margin: 0;
|
<div class="flex-wrapper">
|
||||||
padding: 0;
|
<div class="error-page">
|
||||||
width: 100%;
|
<div class="error-page-content">
|
||||||
color: #B0BEC5;
|
{{ $title }}
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
@endsection
|
||||||
|
|
Loading…
Reference in a new issue