mirror of
https://github.com/monero-project/monero-site.git
synced 2024-11-16 15:58:16 +00:00
New 404 page
Removed the '404' folder with its content and created a new '404.html' file in the root directory, added some specific css and slighlty edited the 'error' layout.
This commit is contained in:
erciccione
parent
9979bde927
commit
dc2a0b118e
16 changed files with 33 additions and 453 deletions
12
404.html
Normal file
12
404.html
Normal 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>
|
||||||
|
|
@ -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)";
|
|
||||||
}
|
|
||||||
313
404/css/main.css
313
404/css/main.css
|
|
@ -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 |
39
404/index.md
39
404/index.md
|
|
@ -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>
|
|
||||||
|
|
@ -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!"
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -9,9 +9,6 @@
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
{% include footer.html %}
|
|
||||||
{% include dog.html %}
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4462,6 +4462,27 @@ p.hangouts-social {
|
||||||
border-bottom: none;
|
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********************************/
|
/*************************accordion********************************/
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue