mirror of
https://github.com/monero-project/monero-site.git
synced 2024-09-28 21:41:11 +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 }}
|
||||
|
||||
{% include footer.html %}
|
||||
{% include dog.html %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue