💄 404 style

This commit is contained in:
shenyu 2020-03-29 22:48:12 +08:00
parent 79b014ab4a
commit 6fbda2ece3
6 changed files with 28 additions and 44 deletions

View File

@ -29,7 +29,7 @@
<link rel="shortcut icon" href="<%- theme.favicon %>" /> <link rel="shortcut icon" href="<%- theme.favicon %>" />
<% } %> <% } %>
<%- css('dist/main') %> <%- css('dist/main') %>
<%- css('custom') %> <%- css('css/custom') %>
<% if (theme.progressBar){ %> <% if (theme.progressBar){ %>
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
<% } %> <% } %>

View File

@ -1,40 +0,0 @@
@charset "utf-8"
//
// 404
html, body, div, figure, img
margin 0
padding 0
body
font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "", Arial, sans-serif;
.notfound
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
figure.forrestgump
position relative
width 100%
img
width 100%
figcaption
float right
clear right
width 100%
padding 0
text-align right
@media (min-width: 768.02px)
figure.forrestgump
width 30rem
figcaption
width 60%
padding 0 2rem
.notfound-link
position absolute
z-index 9
margin-top 2rem

View File

@ -5,7 +5,31 @@
<title>404</title> <title>404</title>
<meta name="keywords" content="Hexo,404,Design"> <meta name="keywords" content="Hexo,404,Design">
<meta name="description" content="Tribute Forrest Gump"> <meta name="description" content="Tribute Forrest Gump">
<link rel="stylesheet" href="/css/404.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
html,figure {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
margin: 20px;
overflow: hidden;
}
h1,h3{
width: 100%;
text-align: center;
}
.forrestgump img{
width: 50rem;
margin-left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px){
.forrestgump img{
width: 100%;
}
</style>
</head> </head>
<body> <body>
<div class="notfound"> <div class="notfound">
@ -15,9 +39,9 @@
<figure class="forrestgump"> <figure class="forrestgump">
<figcaption> <figcaption>
<h1 style="color: #6b0b0c;">404<br>Not Found!</h1> <h1 style="color: #6b0b0c;">404<br>Not Found!</h1>
<h3 style="color: #14206a;">Life was like a box of chocolates, you never know what you're going to get.</h3> <h3 style="color: #14206a;">Life was like a journey on the sea, you never know what you're going to get.</h3>
</figcaption> </figcaption>
<img src="/images/forrestgump.png"> <img src="/images/404.jpg">
</figure> </figure>
</div> </div>
</body> </body>

BIN
source/images/404.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB