// ============================================================================= // Light theme 404 page // =============================================================================
// Variables // =============================================================================
// Shades of gray
$black: #000; $gray-darkest: #121111; $gray-darker: lighten($gray-darkest, 15); $gray-dark: lighten($gray-darkest, 30); $gray: lighten($gray-darkest, 45); $gray-light: lighten($gray-darkest, 60); $gray-lighter: lighten($gray-darkest, 75); $gray-lightest: lighten($gray-darkest, 85); $white: fff;
// Font colors
$base-font-color: $gray-dark; $base-accent-color: $gray-dark; $base-accent-highlighted-color: darken($base-accent-color, 15);
// Border color
$base-border-color: $gray-lightest;
// Page specific colors
$body-background: $white; $header-logo-color: $black; $header-link-color: $gray-darker; $header-link-color-hover: $gray-darkest; $article-header-title-color: $gray-darkest; $article-header-description-color: $gray-dark; $article-post-titles-color: $gray-darkest; $article-footer-color: $gray-light; $article-footer-link-color: $gray-dark; $article-footer-link-color-hover: $gray-darkest; $article-paginator-color-hover: $gray-darkest;
// Imports // =============================================================================
// Vendors
@import “vendor/normalize”;
// Settings
@import “variables”; @import “mixins”; @import “base”;
// Styles
.notfound-wrapper {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
}
.notfound-content {
flex: auto; max-width: 250px; text-align: center; h1 { display: inline-block; margin-bottom: 4px; font-family: $serif; font-size: 36px; a { color: $gray-darkest; text-decoration: none; } } p { display: block; text-align: center; a { color: $gray-darkest; } }
}