Embrace updated error page

This commit is contained in:
Dmitry Isaenko 2024-01-20 18:10:46 +03:00
parent 223fe0c4fb
commit a496e05642
2 changed files with 78 additions and 35 deletions

View file

@ -8,7 +8,7 @@
src: url('/styles/Arimo-VariableFont_wght.ttf'); src: url('/styles/Arimo-VariableFont_wght.ttf');
} }
html{ html {
line-height: 1.5; line-height: 1.5;
} }
@ -23,7 +23,7 @@ body {
flex-direction: column; flex-direction: column;
} }
.page{ .page {
flex: 1 0 auto; flex: 1 0 auto;
padding: 0 0 0; padding: 0 0 0;
width: 100%; width: 100%;
@ -59,7 +59,7 @@ a {
} }
a:link, a:link,
a:visited{ a:visited {
color: #74bfbd; color: #74bfbd;
} }
@ -111,7 +111,8 @@ header {
float: right; float: right;
padding: 0%; padding: 0%;
} }
#header_menu_block{
#header_menu_block {
list-style-type: none; list-style-type: none;
list-style-image: none; list-style-image: none;
height: 100%; height: 100%;
@ -121,9 +122,9 @@ header {
padding: 0%; padding: 0%;
} }
.search_line{ .search_line {
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
margin-top: 7px; margin-top: 7px;
margin-bottom: 7px; margin-bottom: 7px;
flex-grow: 1; flex-grow: 1;
@ -155,7 +156,7 @@ header {
color: #74bfbd; color: #74bfbd;
} }
.search_entry{ .search_entry {
text-decoration: none; text-decoration: none;
font-variant: small-caps; font-variant: small-caps;
font-size: 0.75em; font-size: 0.75em;
@ -163,7 +164,7 @@ header {
color: #74bfbd; color: #74bfbd;
} }
.search_checkbox{ .search_checkbox {
flex: auto; flex: auto;
flex-grow: 1; flex-grow: 1;
} }
@ -172,9 +173,11 @@ header {
.header_logo_link:link { .header_logo_link:link {
color: #74bfbd; color: #74bfbd;
} }
.header_logo_link:visited{
.header_logo_link:visited {
color: #74bfbd; color: #74bfbd;
} }
.header_logo_link:hover { .header_logo_link:hover {
color: #74bfbd; color: #74bfbd;
} }
@ -264,24 +267,47 @@ button:hover {
} }
/* footer */ /* footer */
.footer{ .footer {
background: #323833; background: #323833;
color: #a7a691; color: #a7a691;
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
} }
.inner_footer{
.inner_footer {
padding: 10px; padding: 10px;
display: block; display: block;
float: right; float: right;
} }
.copy_link{
.copy_link {
font-family: Spectral; font-family: Spectral;
text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e; text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e;
color: #74bfbd; color: #74bfbd;
} }
/* error */ /* error */
.error_wrapper{
margin: auto;
height: 100%;
}
.error_inner_wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.error_element1{
flex: 1 1 auto;
display: flex;
align-items: center;
}
.error_element2{
flex: 10 1 auto;
display: flex;
align-items: center;
}
.error { .error {
text-align: center; text-align: center;
background: #283338; background: #283338;
@ -292,56 +318,69 @@ button:hover {
} }
.bli { .bli {
padding: 3px; display: flex;
font-size: 4em;
padding-left: 50px;
padding-right: 50px;
padding-top: 2px;
padding-bottom: 2px;
height: fit-content;
width: auto;
align-items: center;
background-color: #D00000; background-color: #D00000;
} }
.book_title{ .book_title {
font-weight: bold; font-weight: bold;
} }
.wrapper{ .wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.horizontal_el_left{
flex:1; .horizontal_el_left {
flex: 1;
padding-right: 2px; padding-right: 2px;
} }
.horizontal_el_right{
flex:1; .horizontal_el_right {
flex: 1;
padding-left: 2px; padding-left: 2px;
} }
.wrapper_centred{ .wrapper_centred {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.item0{
.item0 {
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
flex-grow: 0; flex-grow: 0;
flex-basis: 15%; flex-basis: 15%;
} }
.item1{
.item1 {
flex-grow: 0; flex-grow: 0;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
flex-basis: 350px; flex-basis: 350px;
} }
/* Book page */ /* Book page */
.title{ .title {
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
} }
.series{ .series {
font-style: italic; font-style: italic;
font-size: 1.2em; font-size: 1.2em;
} }
.not_important{ .not_important {
font-style: italic; font-style: italic;
color: #888888; color: #888888;
} }

View file

@ -4,19 +4,23 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="/favicon.png" type="image/png"> <link rel="alternate icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" th:href="@{/styles/styles.css}" /> <link rel="stylesheet" th:href="@{/styles/styles.css}" />
<title th:text="${code}">title</title> <title th:text="${code}">title</title>
</head> </head>
<body> <body>
<div class='error'> <div class="wrapper error_wrapper">
<a href="/"> <div class="error_inner_wrapper">
<img height="65px" th:src="@{/images/s_logo.svg}" alt="Marinesco"> <div class="error_element1">
</a> <a href="/">
<p> <img height="60px" th:src="@{/images/s_logo.svg}" alt="Marinesco">
ОШИБКА <span class='bli' th:text="${code}"></span> </a>
</p> </div>
<div class="error_element2">
<div class="bli" th:text="${code}"></div>
</div>
</div>
</div> </div>
</body> </body>