hall of fame / LUNA

<!DOCTYPE html>
<head>

<!--


                            luna

                          @odeysseus


- to edit the accent colours, use command + F or cntrl + F to find and replace the following: #f9dee9 (main color) and #ffeff5 (slightly lighter color)

-->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<title>hall of fame</title> <!--title-->


<style type="text/css">

.tmblr-iframe { display:none; }
* { margin:0;padding:0; }

body {
background:#fff;
color:#767676;
font-family:'Source Sans Pro', sans-serif; /* font */
font-size:11px; /* font size */
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}

a,article a b { transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;} a { color:#767676;text-decoration:none} a.cred { bottom:27px;right:27px;position:fixed;} a:hover,article a b:hover { text-decoration:none;color:#f9dee9; }

/* change 740px to 1110px for 3 columns, 370px for 1 column */
section { width:740px;margin:100px auto;text-align:center;}

.c { width:50px;border-radius:100%;height:50px;background:#f9dee9;margin:0 auto 20px; } h8 { margin-bottom:5px;display:block;font-weight:600;color:#444;font-size:14px;letter-spacing:.5px; } header:after { content:'';display:block;width:50px;height:2px;margin:25px auto;background:#eee;}  h7 { display:block;margin-bottom:30px;margin-top:-7px;} h7 span { background:#ffeff5;padding:5px;color:#444;font-size:12px;letter-spacing:.5px;}

/* change 32% to 49% for 2 per row, 24% for 4 per row  */
article a { width:32%;display:inline-block; }

article a b { margin:0;letter-spacing:0;font-style:normal;font-weight:600;color:#444;border:0 } article b { display:block;font-style:italic;color:#444;letter-spacing:1px;margin:15px 0px;} article b span { border:1px solid #f9dee9;padding:5px;} article { width:300px;margin:25px 23px;padding:0px 10px 25px;border:1px solid #eee;float:left; }
</style>

</head>
<body>

<section>

    <!--header-->
    <header>
    <div class="c"></div>
    <h8>hall of fame</h8> <!--main title-->

    <!--links below: add or remove as you wish-->
    <a href="/">return</a> .
    <a href="/ask">inbox</a> .
    <a href="http://tumblr.com/dashboard">dash</a>
    </header>
    <!--end header-->

<div class="hof">
<!--start hall of fame-->

<!--example event 1 (without categories): you can add or delete winners and runners up as required-->
<article>
    <h7><span> event </span></h7><!--heading-->

<a href="link url"><b> username </b></a><!--winner-->
<a href="link url"> username </a><!--runner up 1-->
<a href="link url"> username </a><!--runner up 2-->

</article>
<!--end example event-->

<!--example event 2 (with categories): you can add or delete winners, runners up and categories as required-->
<article>
    <h7><span> event </span></h7><!--heading-->

<b><span> category </span></b><!--category subheading-->
<a href="link url"><b> username </b></a><!--winner-->
<a href="link url"> username </a><!--runner up 1-->
<a href="link url"> username </a><!--runner up 2-->

<b><span> category </span></b><!--category subheading-->
<a href="link url"><b> username </b></a><!--winner-->
<a href="link url"> username </a><!--runner up 1-->
<a href="link url"> username </a><!--runner up 2-->

<b><span> category </span></b><!--category subheading-->
<a href="link url"><b> username </b></a><!--winner-->
<a href="link url"> username </a><!--runner up 1-->
<a href="link url"> username </a><!--runner up 2-->

</article>
<!--end example event-->

<!--end hall of fame: do not edit beyond this point-->
</div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script><script type="text/javascript">
$(window).load(function () {
$('.hof').masonry({
itemSelector : "article",
},
function() { $('.hof').masonry({ appendedContent: $(this) }); }
);
});
</script>

<a href="http://odeysseus.tumblr.com" class="cred">O</a>
</body>
</html>