mirrors/tale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style 404 page

Browse source
This commit is contained in:
Chester How 2020-09-16 13:02:00 +08:00
parent 92f6a2577b
commit 34df66d7ef
2 changed files with 27 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_pages/404.html
View file

@ -2,14 +2,14 @@
layout: default layout: default
permalink: /404.html permalink: /404.html
title: "404" title: "404"
description: "page not found :("
--- ---
<div class="notfound"> <div class="notfound">
<div class="notfound-main"> <h1 class="notfound-error">404: Page not found</h1>
<div class="notfound-content"> <div class="notfound-line"></div>
<h3>Oops! Page not found</h3> <p class="notfound-message">
<h1><span>4</span><span>0</span><span>4</span></h1> Oops! We can't seem to find the page you are looking for. Let's
</div> <a href="{{ site.baseurl }}/">head back home</a>.
<h2>{{page.description}}</h2> </p>
</div> <p></p>
</div> </div>

66
_sass/tale/_404.scss
View file

@ -1,64 +1,22 @@
.notfound { .notfound {
position: relative; position: relative;
height: 100vh;
&-main {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
line-height: 1.4;
text-align: center; text-align: center;
margin: 4rem 0;
-webkit-transform: translate(-50%, -50%); &-error {
-ms-transform: translate(-50%, -50%); font-size: 4rem;
transform: translate(-50%, -50%); margin: 1rem 0;
h2 {
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
color: #000;
margin-top: 0px;
margin-bottom: 25px;
}
} }
&-content { &-line {
position: relative; border-top: 0.4rem solid $default-shade;
height: 260px; display: block;
margin: 0 auto 3rem;
h1 { width: 4rem;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 256px;
font-weight: 800;
margin: 0px;
color: #262626;
text-transform: uppercase;
letter-spacing: -40px;
margin-left: -20px;
span {
text-shadow: -8px 0px 0px #fff;
}
} }
h3 { &-message {
position: relative; max-width: 25rem;
font-size: 16px; margin: 0 auto;
font-weight: 700;
text-transform: uppercase;
color: #262626;
margin: 0px;
letter-spacing: 3px;
padding-left: 6px;
} }
} }
}