overhauling error page

This commit is contained in:
Kibi Kelburton 2022-05-21 11:30:23 +02:00
parent fa0496949c
commit a575f52005
2 changed files with 78 additions and 25 deletions

View File

@ -279,6 +279,11 @@ html[theme="paper"] {
--img-border-color: #363636; --img-border-color: #363636;
} }
html[theme="paper"] .err {
background: black;
color: white;
}
html[theme="paper"] ._204863 { html[theme="paper"] ._204863 {
color: white; color: white;
} }
@ -756,7 +761,8 @@ html[theme="f0ck95"] .err span {
} }
html[theme="f0ck95"] .err { html[theme="f0ck95"] .err {
background: #3f9595; background: silver;
border: outset 2px gray;
} }
html[theme="f0ck95"] div.posts > a::after { html[theme="f0ck95"] div.posts > a::after {
@ -853,6 +859,15 @@ html[theme="f0ck95"] .embed-responsive-image {
right: 2px; right: 2px;
} }
html[theme="f0ck95"] ._error_message {
color: black;
text-shadow: none;
}
html[theme="f0ck95"] ._error_topbar {
background: -webkit-linear-gradient(left,#08216b,#a5cef7);
}
/* f0ck95dARK */ /* f0ck95dARK */
html[theme='f0ck95d'] { html[theme='f0ck95d'] {
--accent: #fff; --accent: #fff;
@ -862,7 +877,7 @@ html[theme='f0ck95d'] {
--gray: silver; --gray: silver;
--nav-bg: #0b0a0a; --nav-bg: #0b0a0a;
--nav-brand-border: inset 1px black; --nav-brand-border: inset 1px black;
--nav-brand-bg: #022544; --nav-brand-bg: #4c4c4c;
--navigation-links-bg: #0b0b0b; --navigation-links-bg: #0b0b0b;
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0); --navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); --navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
@ -894,6 +909,15 @@ html[theme='f0ck95d'] {
--img-border-color: #808080; --img-border-color: #808080;
} }
html[theme="f0ck95d"] .err {
background: #4c4c4c;
border: 2px outset gray;
}
html[theme="f0ck95d"] ._error_topbar {
background: #081f3e;
}
html[theme="f0ck95d"] ._204863 { html[theme="f0ck95d"] ._204863 {
content: " "; content: " ";
background: -webkit-linear-gradient(left,#0e111a,#073c71); background: -webkit-linear-gradient(left,#0e111a,#073c71);
@ -1004,20 +1028,16 @@ html[theme="f0ck95d"] .pagination > span {
} }
html[theme="f0ck95d"] .dropdown-menu { html[theme="f0ck95d"] .dropdown-menu {
border-left: inset 1px silver; border-left: inset 1px #4c4c4c;
border-bottom: outset 1px silver; border-bottom: outset 1px #4c4c4c;
border-right: outset 1px silver; border-right: outset 1px #4c4c4c;
border-top: outset 1px gray; border-top: outset 0px #4c4c4c;
} }
html[theme="f0ck95d"] .err span { html[theme="f0ck95d"] .err span {
text-shadow: 0px 0px transparent; text-shadow: 0px 0px transparent;
} }
html[theme="f0ck95d"] .err {
background: #3f9595;
}
html[theme="f0ck95d"] div.posts > a::after { html[theme="f0ck95d"] div.posts > a::after {
color: var(--white); color: var(--white);
} }
@ -2390,22 +2410,45 @@ a[data-mime^="audio"] {
} }
/* err page */ /* err page */
.err { ._error_wrapper {
display: grid; display: flex;
grid-template-rows: auto 1fr; justify-content: center;
grid-template-columns: 1fr auto;
margin: 50px;
box-shadow: 5px 5px 5px black;
border-radius: .45rem;
background: #bb880b;
} }
.err span { .err {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
margin: 50px;
background: #bb880b;
max-width: 100%;
width: 500px;
}
._error_topbar {
border-bottom: inset 2px gray;
text-align: left;
padding-left: 10px;
}
._error_content {
display: grid;
grid-template-columns: auto 1fr;
}
._error_message {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
margin: 5px;
padding: 5px;
text-shadow: 1px 1px black;
}
.err code {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
align-self: center; align-self: baseline;
margin: 35px;
text-shadow: 1px 1px black;
font-size: 15px; font-size: 15px;
} }

View File

@ -1,8 +1,18 @@
@include(snippets/header) @include(snippets/header)
<div class="container"> <div class="container">
<div class="err"> <div class="_error_wrapper">
<span>{{ message }}</span> <div class="err">
<img src="/s/img/favicon.gif" alt="f0ck?!"> <div class="_error_topbar">
<span>x.x</span>
</div>
<div class="_error_content">
<img src="/s/img/favicon.gif" alt="f0ck?!">
<div class="_error_message">
<span>Error</span>
<code>{{ message }}</code>
</div>
</div>
</div>
</div> </div>
</div> </div>
@include(snippets/footer) @include(snippets/footer)