Merge pull request #956

New 404 page
This commit is contained in:
luigi1111 2020-05-14 16:14:36 -05:00 committed by GitHub
commit 5996e50402
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 33 additions and 453 deletions

12
404.html Normal file
View file

@ -0,0 +1,12 @@
---
layout: error
title: "Error 404, Page Not Found"
---
<section class="container">
<div class="nopage">
<h1 id="fourofour">404</h1>
<h1>Page not found (perhaps it values privacy)</h1>
<p><a href="{{ site.baseurl }}/index.html" class="btn-link btn-fixed">To the Homepage</a></p>
</div>
</section>

View file

@ -1,25 +0,0 @@
@charset "utf-8";
div.not-found-text{
top:65px;
}
div.planet{
z-index:-1;
}
div.dog{
z-index:1000;
}
div.dog-bubble{
filter: alpha(opacity=0); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
padding-top:35px;
}
#dog-changer ul li a{
filter: alpha(opacity=30); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
}

View file

@ -1,313 +0,0 @@
@charset "utf-8";
/* === General stuff === */
html, body{
height:100%;
background:#186aa9 url(/404/images/sky-background.png) top repeat-x;
overflow:hidden;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
margin-top: 5px;
}
.footer{
display: none;
}
a{
color:#3680b1;
}
img, a img{
border:0px none;
outline:none;
}
/* === Main Section === */
#wrapper{
width:980px;
margin:0px auto;
position:relative;
height:100%;
background:url(/404/images/sky-shine.jpg) top left no-repeat;
}
div.top-left{
position:absolute;
right:0px;
}
div.not-found-text{
position:absolute;
top:35px;
right:0px;
width:430px;
}
h1.not-found-text{
font-size:50px;
color:#fff;
letter-spacing:2px;
margin-bottom:20px;
}
div.graphic{
position:absolute;
top:80px;
left:0px;
}
div.planet{
position:absolute;
bottom:-720px;
margin:0px auto;
z-index:0;
}
div.planet>img{
width:960px;
}
div.dog-wrapper{
position:absolute;
top:45px;
left:440px;
}
div.dog{
position:absolute;
bottom:0px;
left:0px;
width:80px;
height:80px;
z-index:999;
background:url(/404/images/dog1.png) 0px 0px no-repeat;
}
div.dog-bubble{
font-size:18px;
line-height:1.5;
font-style:italic;
height:179px;
width:246px;
background:url(/404/images/bubble.png) top center no-repeat;
padding:20px 0px;
position:absolute;
bottom:0px;
left:30px;
z-index:999;
opacity:0;
color:#555555;
text-shadow:1px 1px 0 #ffffff;
}
div.dog-bubble>p{
text-align:center;
padding:0px 35px;
}
div.bubble-options{
opacity:0;
visibility:hidden;
display:none;
}
/* === Responsive === */
/* #Small laptop screens
================================================== */
@media only screen and (max-width: 960px) {
#wrapper{
width:600px;
background-image:none;
margin-top: 50px;
}
div.planet{
position:absolute;
bottom:-300px;
margin:0 auto 0 -280px;
z-index:0;
left:50%;
}
div.planet>img{
width:560px;
}
div.dog-wrapper{
position:absolute;
top:30px;
left:250px;
}
div.graphic{
position:absolute;
top:50px;
left:40px;
}
div.top-left {
position: absolute;
right: 0px;
top: -40px;
}
div.graphic>img{
width:60%;
}
div.graphic{
left: 0px;
position: absolute;
top: 20px;
}
div.not-found-text{
right:0px;
top:22px;
width:320px;
}
h1.not-found-text{
font-size:35px;
}
}
/* #Tablets and small screens
================================================== */
@media only screen and (max-width: 767px) {
#wrapper{
width:400px;
background-image:none;
}
div.graphic>img{
width:40%;
}
div.planet{
position:absolute;
bottom:-170px;
margin:0 auto 0 -180px;
z-index:0;
left:50%;
}
div.planet>img{
width:360px;
}
div.dog-wrapper{
position:absolute;
top:30px;
left:150px;
}
div.graphic{
position:absolute;
top:20px;
left:0px;
}
div.top-left {
position: absolute;
right: 390px;
top: 170px;
}
h1.not-found-text {
font-size: 26px;
}
div.not-found-text {
right: -60px;
top: 33px;
width: 270px;
}
div.top-left {
position: absolute;
right: 0;
top: -38px;
}
}
/* #Mobile phones
================================================== */
@media only screen and (max-width: 479px){
#wrapper{
width:320px;
background-image:none;
}
h1.not-found-text {
font-size: 20px;
text-align: center;
}
div.not-found-text {
right: 20px;
top: 210px;
}
div.graphic>img{
width:100%;
}
div.planet{
position:absolute;
bottom:-70px;
margin:0 auto 0 -100px;
z-index:0;
left:50%;
}
div.planet>img{
width:200px;
}
div.dog-wrapper {
left: 70px;
position: absolute;
top: 26px;
}
div.dog-bubble{
font-size:10px;
line-height:1.5;
font-style:italic;
height:107px;
width:147px;
background:url(/404/images/bubble.png) top center no-repeat;
background-size: contain;
padding:10px 0px;
position:absolute;
bottom:0px;
left:55px;
z-index:999;
opacity:0;
color:#555555;
text-shadow:1px 1px 0 #ffffff;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

View file

@ -1,39 +0,0 @@
---
layout: error
title: "Error 404, Page Not Found"
---
<link rel="stylesheet" href="/404/css/main.css" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/404/css/ie7.css" />
<![endif]-->
<div id="wrapper">
<div class="graphic">
<img src="/404/images/404.png" alt="404" />
</div>
<div class="top-left">
<div class="not-found-text">
<h1 class="not-found-text">Oh no! We couldn't find anything for that link!</h1>
</div>
</div>
<div class="planet">
<div class="dog-wrapper">
<div class="dog"></div>
<div class="dog-bubble"></div>
<div class="bubble-options">
{% for data_talk in site.data.dogtalk %}
<p class="dog-bubble">
{{ data_talk.bubble }}
</p>
{% endfor %}
</div>
</div>
<img src="/404/images/planet.png" alt="planet" />
</div>
</div>

View file

@ -1,10 +0,0 @@
- bubble: "The page went missing? The entire page? Oh noooo!"
- bubble: "<br />Barooooooooooo!"
- bubble: "<br />I'm the best tracker out there, I'll find it!"
- bubble: "My kingdom for a dog biscuit!<br /><img style='margin-top:8px' src='/404/images/cookie.png' alt='cookie' />"
- bubble: "<br />I'm sure the page is just around the corner..."
- bubble: "Does anyone smell something cooking? Nom nom nom."
- bubble: "Am I just going in circles?<br />IS IT TRUE??"
- bubble: "<br />Have you tried to Google for it?"
- bubble: "I keep day-dreaming...<br /><img style='margin-top:8px' src='/404/images/cat.png' alt='cat' />"
- bubble: "<br />Uh oh...I forgot what I'm looking for!"

View file

@ -1,63 +0,0 @@
<script type="text/javascript">
var degree = 0;
var maxtalk = 0;
var talkbubble = 1;
$(document).ready(function(){
$("div.bubble-options p.dog-bubble").each(function(){
maxtalk++;
});
});
function dogTalk(){
var timer = setTimeout(function() {
$temp = "<p>"+$("div.bubble-options p.dog-bubble:nth-child("+talkbubble+")").html()+"</p>";
$("div.dog-bubble").html($temp);
//randomize bubbles
oldbubble = talkbubble;
while (talkbubble == oldbubble) {
talkbubble = Math.floor((Math.random()*maxtalk)+1);
}
//show the bubble
$(".dog-bubble").animate({"opacity":'1', "bottom":'30px'}, 400);
//hide the bubble
setTimeout(function() {
$(".dog-bubble").animate({"opacity":'0', "bottom":'0px'}, 400);
dogTalk();
}, 5000);
}, 2000);
}
function rotate() {
$planet = $("div.planet>img");
//CSS3
$planet.css({ 'transform' : 'rotate(' + degree + 'deg)'});
// For webkit browsers: e.g. Chrome
$planet.css({ WebkitTransform : 'rotate(' + degree*2 + 'deg)'});
// For Mozilla browser: e.g. Firefox
$planet.css({ '-moz-transform' : 'rotate(' + degree + 'deg)'});
//IE9
$planet.css({ '-ms-transform' : 'rotate(' + degree + 'deg)'});
//Opera
$planet.css({ '-o-transform' : 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call
var timer = setTimeout(function() {
degree-=0.1;
rotate();
},10);
}
function dogRun(){
var dog = $("div.dog");
var timer2 = setTimeout(function() {
if(dog.css("background-position") == "0px 0px")
dog.css({"background-position":"-80px -2px"});
else
dog.css({"background-position":"0px 0px"});
dogRun();
}, 130);
}
$(window).load(function(){
rotate();
dogRun();
dogTalk();
});
</script>

View file

@ -9,9 +9,6 @@
{{ content }}
{% include footer.html %}
{% include dog.html %}
</body>
</html>

View file

@ -4462,6 +4462,27 @@ p.hangouts-social {
border-bottom: none;
}
/*************************404********************************/
.nopage {
text-align: center;
}
#fourofour {
font-weight: bold;
font-size: 15rem;;
margin-top: 5%;
}
@media only screen and (max-width: 48rem) {
#fourofour {
font-weight: bold;
font-size: 8rem;
margin-top: 25%;
}
}
/*************************accordion********************************/
.tab {