From bbff2d680d22051041be5fc5dd2e801fd1cc862d Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Thu, 31 May 2018 21:28:19 +0000 Subject: Update 404 and 403 pages --- app/assets/stylesheets/errors.scss | 120 +++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 app/assets/stylesheets/errors.scss (limited to 'app/assets/stylesheets/errors.scss') diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss new file mode 100644 index 00000000000..658e0ff638e --- /dev/null +++ b/app/assets/stylesheets/errors.scss @@ -0,0 +1,120 @@ +/* + * This is a minimal stylesheet, meant to be used for error pages. + */ +@import 'framework/variables'; +@import '../../../node_modules/bootstrap/scss/functions'; +@import '../../../node_modules/bootstrap/scss/variables'; +@import '../../../node_modules/bootstrap/scss/mixins'; +@import '../../../node_modules/bootstrap/scss/reboot'; +@import '../../../node_modules/bootstrap/scss/buttons'; +@import '../../../node_modules/bootstrap/scss/forms'; + +$body-color: #666; +$header-color: #456; + +body { + color: $body-color; + text-align: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: auto; + font-size: 14px; +} + +h1 { + font-size: 56px; + line-height: 100px; + font-weight: 400; + color: $header-color; +} + +h2 { + font-size: 24px; + color: $body-color; + line-height: 1.5em; +} + +h3 { + color: $header-color; + font-size: 20px; + font-weight: 400; + line-height: 28px; +} + +img { + max-width: 80vw; + display: block; + margin: 40px auto; +} + +a { + text-decoration: none; + color: $blue-600; +} + +.page-container { + margin: auto 20px; +} + +.container { + margin: auto; + max-width: 600px; + border-bottom: 1px solid $border-color; + padding-bottom: 1em; +} + +.action-container { + padding: 0.5em 0; +} + +.form-inline-flex { + display: flex; + flex-wrap: wrap; + + button { + display: block; + width: 100%; + } + + .field { + display: block; + width: 100%; + margin-bottom: 1em; + } + + @include media-breakpoint-up(sm) { + flex-wrap: nowrap; + + button { + width: auto; + } + + .field { + margin-bottom: 0; + margin-right: 0.5em; + } + } +} + +.error-nav { + padding: 0; + text-align: center; + + li { + display: block; + padding-bottom: 1em; + } + + @include media-breakpoint-up(sm) { + + li { + display: inline-block; + padding-bottom: 0; + + &:not(:first-child)::before { + content: '\00B7'; + display: inline-block; + padding: 0 1em; + } + } + } +} -- cgit v1.2.1