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

18
_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>

78
_sass/tale/_404.scss
View file

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