mod: Страницы ошибок (в новом дизайне и оптимизированы).
This commit is contained in:
@@ -42,4 +42,7 @@ if settings.DEBUG:
|
|||||||
path('500/', TemplateView.as_view(template_name="500.html")),
|
path('500/', TemplateView.as_view(template_name="500.html")),
|
||||||
path('403/', TemplateView.as_view(template_name="403.html")),
|
path('403/', TemplateView.as_view(template_name="403.html")),
|
||||||
path('400/', TemplateView.as_view(template_name="400.html")),
|
path('400/', TemplateView.as_view(template_name="400.html")),
|
||||||
|
# Для проверки статических страниц ошибок (Nginx)
|
||||||
|
path('static_404/', TemplateView.as_view(template_name="static_404.html")),
|
||||||
|
path('static_500/', TemplateView.as_view(template_name="static_500.html")),
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,31 +1,44 @@
|
|||||||
{% extends "base.html" %}
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
{% block Title %}400: Плохой запрос{% endblock %}
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
{% block CONTENT %}{% include "blocks/header_nav.html" %}
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<div class="container main-content">
|
<title>400: Плохой запрос | DicQuo</title>
|
||||||
<!-- Осно<D0BD><D0BE>ной контент: Текст + Картинка -->
|
<style>
|
||||||
<div class="content-row">
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
<!-- Текстовая колонка -->
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
<div class="text-col">
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
<!-- Цитата -->
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
<blockquote id="bb" style="border:none; margin:0; padding:0;">
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
<span style="margin-left:-0.44em;">«</span>Вы спрашиваете меня о чем-то странном. Я не понимаю ваш запрос.»
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Загадочно:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
|
<span style="margin-left:-0.44em;">«</span>Вы спрашиваете меня о чем-то странном. Я не понимаю
|
||||||
|
ваш запрос.»
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<!-- Автор -->
|
|
||||||
<div id="author">
|
|
||||||
<cite>Озадаченный Сервер (400)</cite>
|
<cite>Озадаченный Сервер (400)</cite>
|
||||||
</div>
|
</figure>
|
||||||
</div>
|
</article>
|
||||||
|
</main>
|
||||||
</div>
|
<div class="tags">
|
||||||
|
|
||||||
<!-- Блок тегов и навигации -->
|
|
||||||
<div class="tags">
|
|
||||||
<a href="/">Сформулировать иначе (на главную)</a>
|
<a href="/">Сформулировать иначе (на главную)</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
</html>
|
||||||
|
|||||||
@@ -1,31 +1,43 @@
|
|||||||
{% extends "base.html" %}
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
{% block Title %}403: Доступ запрещен{% endblock %}
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
{% block CONTENT %}{% include "blocks/header_nav.html" %}
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<div class="container main-content">
|
<title>403: Доступ запрещен | DicQuo</title>
|
||||||
<!-- Основной контент: Текст + Картинка -->
|
<style>
|
||||||
<div class="content-row">
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
<!-- Текстовая колонка -->
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
<div class="text-col">
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
<!-- Цитата -->
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
<blockquote id="bb" style="border:none; margin:0; padding:0;">
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Категорически:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
<span style="margin-left:-0.44em;">«</span>Вам сюда нельзя. Даже если очень хочется. Уходите!»
|
<span style="margin-left:-0.44em;">«</span>Вам сюда нельзя. Даже если очень хочется. Уходите!»
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<!-- Автор -->
|
|
||||||
<div id="author">
|
|
||||||
<cite>Строгий Вахтёр (403)</cite>
|
<cite>Строгий Вахтёр (403)</cite>
|
||||||
</div>
|
</figure>
|
||||||
</div>
|
</article>
|
||||||
|
</main>
|
||||||
</div>
|
<div class="tags">
|
||||||
|
|
||||||
<!-- Блок тегов и навигации -->
|
|
||||||
<div class="tags">
|
|
||||||
<a href="/">Уйти по-добру по-здорову</a>
|
<a href="/">Уйти по-добру по-здорову</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
</html>
|
||||||
|
|||||||
@@ -1,31 +1,43 @@
|
|||||||
{% extends "base.html" %}
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
{% block Title %}404: Страница не найдена{% endblock %}
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
{% block CONTENT %}{% include "blocks/header_nav.html" %}
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<div class="container main-content">
|
<title>404: Страница не найдена | DicQuo</title>
|
||||||
<!-- Основной контент: Текст + Картинка -->
|
<style>
|
||||||
<div class="content-row">
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
<!-- Текстовая колонка -->
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
<div class="text-col">
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
<!-- Цитата -->
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
<blockquote id="bb" style="border:none; margin:0; padding:0;">
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Вздыхая:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
<span style="margin-left:-0.44em;">«</span>Я искал везде. Даже под диваном. Этой страницы здесь нет.»
|
<span style="margin-left:-0.44em;">«</span>Я искал везде. Даже под диваном. Этой страницы здесь нет.»
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<!-- Автор -->
|
|
||||||
<div id="author">
|
|
||||||
<cite>Системный Администратор (404)</cite>
|
<cite>Системный Администратор (404)</cite>
|
||||||
</div>
|
</figure>
|
||||||
</div>
|
</article>
|
||||||
|
</main>
|
||||||
</div>
|
<div class="tags">
|
||||||
|
|
||||||
<!-- Блок тегов и навигации -->
|
|
||||||
<div class="tags">
|
|
||||||
<a href="/">Вернуться на главную</a>
|
<a href="/">Вернуться на главную</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
</html>
|
||||||
|
|||||||
@@ -1,31 +1,44 @@
|
|||||||
{% extends "base.html" %}
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
{% block Title %}500: Ошибка сервера{% endblock %}
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
{% block CONTENT %}{% include "blocks/header_nav.html" %}
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<div class="container main-content">
|
<title>500: Ошибка сервера DicQuo</title>
|
||||||
<!-- Основной контент: Текст + Картинка -->
|
<style>
|
||||||
<div class="content-row">
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
<!-- Текстовая колонка -->
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
<div class="text-col">
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
<!-- Цитата -->
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
<blockquote id="bb" style="border:none; margin:0; padding:0;">
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
<span style="margin-left:-0.44em;">«</span>Что-то пошло не так. Кажется, я уронил сервер. Подождите, пока я его подниму.»
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Неожиданно:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
|
<span style="margin-left:-0.44em;">«</span>Что-то пошло не так. Кажется, я уронил сервер.
|
||||||
|
Подождите, пока я его подниму.»
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<!-- Автор -->
|
|
||||||
<div id="author">
|
|
||||||
<cite>Системный Администратор (500)</cite>
|
<cite>Системный Администратор (500)</cite>
|
||||||
</div>
|
</figure>
|
||||||
</div>
|
</article>
|
||||||
|
</main>
|
||||||
</div>
|
<div class="tags">
|
||||||
|
|
||||||
<!-- Блок тегов и навигации -->
|
|
||||||
<div class="tags">
|
|
||||||
<a href="/">Попробовать обновить страницу</a>
|
<a href="/">Попробовать обновить страницу</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
</html>
|
||||||
|
|||||||
@@ -1,27 +1,43 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
</html>
|
|
||||||
</body>
|
|
||||||
</div>
|
|
||||||
<a href="/">Вернуться на главную</a>
|
|
||||||
<cite>Системный Администратор (404)</cite>
|
|
||||||
</blockquote>
|
|
||||||
<span>«</span>Я искал везде. Даже под диваном. Этой страницы здесь нет.»
|
|
||||||
<blockquote>
|
|
||||||
<div class="container">
|
|
||||||
<body>
|
|
||||||
</head>
|
|
||||||
</style>
|
|
||||||
a:hover { color: #999; border-bottom: 1px solid #999; }
|
|
||||||
a { color: #555; text-decoration: none; border-bottom: 1px dotted #555; transition: color 0.3s; font-size: 0.8em; margin-top: 30px; display: inline-block;}
|
|
||||||
cite { display: block; font-size: 0.9em; color: #777; margin-top: 15px; font-style: normal;}
|
|
||||||
blockquote span { margin-left: -0.44em; }
|
|
||||||
blockquote { font-size: 2em; margin: 0 0 20px 0; font-style: italic; line-height: 1.4; }
|
|
||||||
.container { max-width: 600px; padding: 20px; }
|
|
||||||
body { background-color: #111; color: #ccc; font-family: Georgia, serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; text-align: center; }
|
|
||||||
<style>
|
|
||||||
<title>404: Страница не найдена</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<head>
|
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>404: Страница не найдена | DicQuo</title>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Озадачено:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
|
<span style="margin-left:-0.44em;">«</span>Я искал везде. Даже под диваном. Этой страницы здесь нет.»
|
||||||
|
</blockquote>
|
||||||
|
<cite>Системный Администратор (404)</cite>
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<div class="tags">
|
||||||
|
<a href="/">Вернуться на главную</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -3,25 +3,43 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>500: Ошибка сервера</title>
|
<title>500: Ошибка сервера | DicQuo</title>
|
||||||
<style>
|
<style>
|
||||||
body { background-color: #111; color: #ccc; font-family: Georgia, serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; text-align: center; }
|
body { margin: 0; min-height: 100vh; background-color: #211; color: silver; font-family: serif; opacity: 1; transition: opacity 0.9s ease-in-out; }
|
||||||
.container { max-width: 600px; padding: 20px; }
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1vh 4vw; }
|
||||||
blockquote { font-size: 2em; margin: 0 0 20px 0; font-style: italic; line-height: 1.4; }
|
header > #logo { margin-top: 1vh; float: left; }
|
||||||
blockquote span { margin-left: -0.44em; }
|
header > #logo a { border: none; text-decoration: none; color: silver;}
|
||||||
cite { display: block; font-size: 0.9em; color: #777; margin-top: 15px; font-style: normal; }
|
main { padding: 1vh 8vw; display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
|
||||||
a { color: #555; text-decoration: none; border-bottom: 1px dotted #555; transition: color 0.3s; font-size: 0.8em; margin-top: 30px; display: inline-block;}
|
main > article { display: flex; align-items: center; justify-content: center; gap: 2vw; }
|
||||||
a:hover { color: #999; border-bottom: 1px solid #999; }
|
main > article > figure > p { color: silver; font-size: 3vmin; line-height: 3.5vmin; padding-bottom: 2vmin; font-style: italic; }
|
||||||
|
main > article > figure > blockquote { color: whitesmoke; font-size: 4.5vmin; line-height: 5vmin; border:none; margin:0; padding:0; }
|
||||||
|
main > article > figure > cite { color: silver; font-size: 3.5vmin; line-height: 4vmin; text-align: right; padding-top: 8vmin; font-style: italic; display: block; }
|
||||||
|
.tags { text-align: center; color: silver; font-size: 1.5vmin; line-height: 1.9vmin; padding: 1vh 8vw; float: left;}
|
||||||
|
.tags a { text-decoration: none; position: relative; padding: 0 0.5ex; display: inline-block; color: white; border-bottom: dotted 1px silver; background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4)); background-clip: initial; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 250% 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; background-position: 100%; transition: background-position 0.65s ease; margin-right: 2vmin; }
|
||||||
|
.tags a:hover { color: white; background-position: 0 100%; border-bottom: solid 1px white; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<header>
|
||||||
<blockquote>
|
<div id="logo">
|
||||||
<span>«</span>Что-то пошло не так. Кажется, я уронил сервер, контейнер или случилось что-то ещё. Подождите, пока я его подниму.»
|
<a href="/" style="font-size: 3em; font-weight: bold; color: orange; font-style: italic">DQ</a>
|
||||||
</blockquote>
|
|
||||||
<cite>Системный Администратор (5xx)</cite>
|
|
||||||
<a href="#" onclick="window.location.reload(); return false;">Попробовать обновить через 5 минут.</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<figure>
|
||||||
|
<p>Неожиданно:</p>
|
||||||
|
<blockquote id="bb">
|
||||||
|
<span style="margin-left:-0.44em;">«</span>Что-то пошло не так. Кажется, я уронил сервер.
|
||||||
|
Подождите, пока я его подниму.»
|
||||||
|
</blockquote>
|
||||||
|
<cite>Системный Администратор (500)</cite>
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<div class="tags">
|
||||||
|
<a href="#" onclick="window.location.reload(); return false;">Попробовать обновить страницу</a>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -120,16 +120,11 @@ header > nav > #stats-menu > a:hover {
|
|||||||
|
|
||||||
/* MAIN ARTICLE CONTENT */
|
/* MAIN ARTICLE CONTENT */
|
||||||
main {
|
main {
|
||||||
/*justify-content: space-between;*/
|
|
||||||
/*align-items: center;*/
|
|
||||||
padding: 1vh 8vw;
|
padding: 1vh 8vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
/*width: 90%;*/
|
|
||||||
/*max-width: 1200px;*/
|
|
||||||
/*margin: 0 auto;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main > article {
|
main > article {
|
||||||
|
|||||||
Reference in New Issue
Block a user