mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
4.1 KiB
204 lines
4.1 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>Page not found · Isotope</title> |
|
|
|
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> |
|
|
|
<style> |
|
.page { |
|
font-size: 10px; |
|
width: 8em; |
|
height: 10em; |
|
color: white; |
|
border: 0.5em solid; |
|
margin: 10px; |
|
float: left; |
|
position: relative; |
|
} |
|
|
|
.page div { |
|
position: absolute; |
|
top: -0.5em; |
|
right: -0.5em; |
|
} |
|
|
|
.page .fold { |
|
width: 2.5em; |
|
height: 2.5em; |
|
border-left: 0.5em solid; |
|
border-bottom: 0.5em solid; |
|
} |
|
|
|
.page .corner-a { |
|
border-top: 3em solid; |
|
border-left: 3em solid transparent; |
|
} |
|
|
|
.page .corner-b { |
|
border-top: 2.3em solid #1F1E1D; |
|
border-left: 2.3em solid transparent; |
|
} |
|
|
|
.page h4 { |
|
position: absolute; |
|
width: 100%; |
|
top: 0.75em; |
|
font-size: 6em; |
|
text-align: center; |
|
font-weight: normal; |
|
} |
|
|
|
/* bad page */ |
|
|
|
.page.bad { |
|
font-size: 30px; |
|
width: 280px; |
|
height: 340px; |
|
color: red; |
|
z-index: 100; |
|
} |
|
|
|
.page.bad h4 { |
|
top: 0.7em; |
|
font-size: 7em; |
|
} |
|
|
|
.page.bad:hover h4 { |
|
color: white; |
|
} |
|
|
|
.page.bad h1 { |
|
position: absolute; |
|
width: 100%; |
|
text-align: center; |
|
bottom: 5px; |
|
} |
|
|
|
|
|
/* back page */ |
|
|
|
.page.back { |
|
font-size: 20px; |
|
width: 180px; |
|
height: 220px; |
|
color: #4BF; |
|
z-index: 100; |
|
background: #4BF; |
|
} |
|
|
|
.page.back:hover { |
|
background: yellow; |
|
color: yellow; |
|
} |
|
|
|
.page.back a { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
color: #111; |
|
} |
|
|
|
.page.back .fold { color: #111; } |
|
|
|
.page.back .corner-b { |
|
|
|
border-top-width: 2.5em; |
|
border-left-width: 2.5em; |
|
} |
|
|
|
.page.back h4 { |
|
top: 0.6em; |
|
font-size: 7em; |
|
-webkit-transform: rotate(-135deg); |
|
-moz-transform: rotate(-135deg); |
|
-ms-transform: rotate(-135deg); |
|
-o-transform: rotate(-135deg); |
|
transform: rotate(-135deg); |
|
} |
|
|
|
.page.back h2 { |
|
position: absolute; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 28px; |
|
bottom: -10px; |
|
font-weight: 300; |
|
} |
|
|
|
#container { |
|
border: none; |
|
padding: 0; |
|
} |
|
|
|
</style> |
|
|
|
<!-- scripts at bottom of page --> |
|
|
|
<script src="http://desandro.com/mint/?js"></script> <!-- analytics --> |
|
|
|
</head> |
|
<body> |
|
|
|
<div id="container"> |
|
<div class="page bad" data-order="0"> |
|
<div class="fold"></div> |
|
<div class="corner-a"></div> |
|
<div class="corner-b"></div> |
|
<h4>✕</h4> |
|
<h1>Page not found</h1> |
|
</div> |
|
<div class="page back"> |
|
<a href="/"> |
|
<div class="fold"></div> |
|
<div class="corner-b"></div> |
|
<h4>➔</h4> |
|
<h2>Back to Isotope index</h2> |
|
</a> |
|
</div> |
|
<div class="page good"> |
|
<div class="fold"></div> |
|
<div class="corner-a"></div> |
|
<div class="corner-b"></div> |
|
<h4>✓</h4> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="http://code.jquery.com/jquery.min.js"></script> |
|
<script src="/jquery.isotope.js"></script> |
|
<script> |
|
$(function(){ |
|
var $container = $('#container') |
|
$goodPage = $('.page.good'), |
|
pages = $([]); |
|
|
|
for ( var i=0; i < 30; i++) { |
|
pages.push( $goodPage.clone()[0] ) |
|
} |
|
|
|
$container.append( $(pages) ).isotope({ |
|
masonry: { |
|
columnWidth: 110, |
|
} |
|
}); |
|
|
|
$('.page.bad').mouseenter(function(){ |
|
$container.isotope( 'shuffle' ); |
|
}); |
|
|
|
}); |
|
</script> |
|
|
|
<!-- analytics --> |
|
<script> |
|
var _gaq=[['_setAccount','UA-592624-5'],['_trackPageview'],['_setDomainName', '.metafizzy.co']]; |
|
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1; |
|
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; |
|
s.parentNode.insertBefore(g,s)}(document,'script')); |
|
</script> |
|
|
|
|
|
</body> |
|
</html> |