error page, slight tweaks to sitemap generator

404/css/ie7.css

@@ -0,0 +1,25 @@
+@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)";
+}

404/css/main.css

@@ -0,0 +1,313 @@
+@charset "utf-8";
+
+/* === General stuff === */
+
+html, body{
+	height:100%;
+	background:#186aa9 url(../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(../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(../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(../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(../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;
+		}
+    }

404/index.md

@@ -0,0 +1,39 @@
+---
+layout: error
+title: "Error 404, Page Not Found"
+---
+
+<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, projection" />
+<!--[if lt IE 8]>
+	<link rel="stylesheet" type="text/css" href="css/ie7.css" />
+<![endif]-->
+
+<div id="wrapper">
+	<div class="graphic">
+		<img src="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="images/planet.png" alt="planet" />
+	</div>
+
+</div>

_config.yml

@@ -34,3 +34,4 @@ sitemap:
         - "/ietemplates/poll4.xml"
         - "/ietemplates/poll5.xml"
         - "/feed.xml"
+        - "/404/index.md"

_data/dogtalk.yml

@@ -0,0 +1,10 @@
+- 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='images/cookie.png' alt='cookie' />"
+- bubble: "<br />I'm sure the page is just around the corner..."
+- bubble: "<br />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='images/cat.png' alt='cat' />"
+- bubble: "<br />Uh oh...I forgot what I'm looking for!"

_includes/dog.html

@@ -0,0 +1,63 @@
+    <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>

_layouts/error.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+  {% include head.html %}
+
+  <body>
+
+    {% include header.html %}
+
+    {{ content }}
+
+    {% include footer.html %}
+    {% include dog.html %}
+
+  </body>
+
+</html>

_plugins/sitemap_generator.rb

@@ -27,7 +27,8 @@ module Jekyll
     end
 
     def location_on_server(my_url)
-      "#{my_url}#{url}"
+      location = "#{my_url}#{url}"
+      location.gsub(/index.html$/, "")
     end
   end
 

_strings_en.yml

@@ -86,4 +86,4 @@ blog:
   forum: Click here to join the discussion for this entry on the Monero Forum
 tags:
   all: Articles by Tag
-  notags: There are no posts for this tag.
+  notags: There are no posts for this tag.