aleks/hexo-theme-ayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 404 style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/_partial/head.ejs
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>
<% } %> <% } %>

40
source-src/css/404.styl
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

30
source/404.html
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>

0
source/custom.styl → source/css/custom.styl
View File

BIN
source/images/404.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
source/images/forrestgump.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 265 KiB