Styles for error pages

tylergaw · Jun 10, 2011 · ad0e9c2 · ad0e9c2
1 parent 23e7b62
commit ad0e9c2
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>400 | Full Court Shots</title>
+	<meta name="description" content="A way to view all the lastest and most popular bits of tasty Dribbble design goodness.">
+	<meta name="author" content="Tyler Gaw http://www.tylergaw.com">
+	<link rel="shortcut icon" href="favicon.ico"> 
+	<link rel="stylesheet" href="css/core.css">
+</head>
+<body>
+	<div class="error-page">
+		<h1>400</h1>
+		<div>
+			<h2>Sorry, can't find that page.</h2>
+			<p>Why don't you <a href="/">come with me?</a></p>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+
+	  var _gaq = _gaq || [];
+	  _gaq.push(['_setAccount', 'UA-1104578-12']);
+	  _gaq.push(['_trackPageview']);
+
+	  (function() {
+	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	  })();
+
+	</script>
+
+</body>
+</html>
diff --git a/500.html b/500.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>500 | Full Court Shots</title>
+	<meta name="description" content="A way to view all the lastest and most popular bits of tasty Dribbble design goodness.">
+	<meta name="author" content="Tyler Gaw http://www.tylergaw.com">
+	<link rel="shortcut icon" href="favicon.ico"> 
+	<link rel="stylesheet" href="css/core.css">
+</head>
+<body>
+	<div class="error-page">
+		<h1>500</h1>
+		<div>
+			<h2>Whoa, that's probably really bad.</h2>
+			<p>Why don't you <a href="/">come with me?</a></p>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+
+	  var _gaq = _gaq || [];
+	  _gaq.push(['_setAccount', 'UA-1104578-12']);
+	  _gaq.push(['_trackPageview']);
+
+	  (function() {
+	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	  })();
+
+	</script>
+
+</body>
+</html>
diff --git a/css/core.css b/css/core.css
@@ -222,8 +222,57 @@ body
 		width: 150px;
 	}
 
+/*- Error pages --------------------------------------------------------------------------------------*/
+
+.error-page
+{
+	color: #f3f3f3;
+	font-size: 3.5em;
+	margin: 0 auto;
+	text-align: center;
+	width: 830px;
+}
+
+	.error-page h1
+	{
+		color: rgba(255, 255, 255, 0.12);
+		font-size: 12em;
+		line-height: 1em;
+		opacity: 0.28;
+		text-shadow: #000 -1px -2px 1px;
+		overflow: hidden;
+	}
+
+	.error-page div
+	{
+		margin-bottom: -290px;
+		position: relative;
+		top: -290px;
+	}
+
+	.error-page p
+	{
+		color: #A0A0A0;
+		font-size: 0.8em;
+		margin-top: 8px;
+	}
+
+	.error-page a
+	{
+		color: #f36500;
+	}
+
+		.error-page a:hover
+		{
+			text-decoration: underline;
+		}
+
 /*- Weird ass different size screens media queries ---------------------------------------------------*/
 
+@media screen and (max-width: 3119px) {
+	#shots { width: 2912px; }
+}
+
 @media screen and (max-width: 2911px) {
 	#shots { width: 2704px; }
 }