Embrace updated error page
This commit is contained in:
parent
223fe0c4fb
commit
a496e05642
2 changed files with 78 additions and 35 deletions
|
@ -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,7 +122,7 @@ 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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue