wheeyls/floaters.html

## floaters.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />

    <style type="text/css" media="screen">
      /* RESET */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, font, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td {
          margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
      }
      body { line-height: 1; }
      ol, ul { list-style: none; }
      blockquote, q { quotes: none; }
      blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
      :focus { outline: 0; }
      del { text-decoration: line-through; }
      table { border-collapse: collapse; border-spacing: 0; }
      /* end reset */

      body {
        font-family: 'Liberation Serif','Georgia';
        background-color: #FFF3E0;
        color: #3B353D;
      }

      .main {
        width: 80%;
        padding: 15px;
        padding-bottom: 300px;
        margin: auto;
      }

      .main-header {
        overflow: auto;
        padding: 5px;
      }

      .main-header a {
        color: #3B353D;
        text-decoration: none;
      }

      .pretty {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
      }
      #search {
        float: right;
      }

      h1 {
        float: left;
        font-size: 1.4em;
      }

      h2 {
        font-size: 2.8em;
        text-align: center;
        margin-bottom: 0;
        color: #3B353D;
      }


      pre {
        border: 1px solid #736877;
        background-color: #ffffff;
        padding: 20px;
        overflow-x: scroll;
      }

      .title-link {
        color: #3B353D;
        text-decoration: none;
      }

      .photo img {
        border: 5px solid #736877;
      }

      .text {
        -moz-column-gap: 4em;
        -moz-column-rule: 1px dashed #cccccc;
        -moz-column-width: 60ex;
        -webkit-column-gap: 4em;
        -webkit-column-rule: 1px dashed #cccccc;
        -webkit-column-width: 60ex;
        column-gap: 4em;
        column-rule: 1px dashed #cccccc;
        column-width: 60ex;
        text-align: justify;
        padding: 5px;
      }

      .photo {
        text-align: center;
      }

      .article {
        margin-top: 4em;
        border: 4px dashed #736877;
        border-radius: 12px;
        padding: 25px;
        /*box-shadow: 1px 1px 2px #736877;*/
      }

      #disqus_thread {
        border-top: 1px solid #ccc;
        margin: 75px 30px 0;
      }

      .article p {
        margin: 6px 0px 6px 0;
        padding: 2px 0;
        font-size: 1.1em;
        line-height: 1.1em;
      }

      .article-links {
        text-align: center;
        overflow: auto;
        padding-bottom: .8em;
        padding-top: .2em;
      }

      .article-links li {
        display: inline;
        padding: 0px 10px 10px 10px;
      }

      .section {
        padding: 5px 0;
      }

      @media (max-width: 500px) {
        h2 {
          font-size: 1.8em;
        }

        .main {
          width: 94%;
          padding: 2%;
          padding-top: 1em;
        }

        .article {
          padding: 2%;
          padding-top: .5em;
          margin-top: 1em;
        }

        img {
          width: 94%;
          max-width: 100%;
        }
      }

      @media (max-width: 400px) {
        #search {
          margin-top: .8em;
          text-align: center;
          float: none;
          clear: both;
        }

        h1 {
          font-size: 1.8em;
          clear: both;
          float: none;
          text-align: center;
        }
      }
      {CustomCSS}
    </style>
  </head>
  <body>
    <div class="main pretty">
      <div class="main-header">
        <h1 class="pretty"> <a href="/">{Title}</a> </h1>
        <div id="search" class="pretty">
          <form action="/search" method="get">
            <input type="submit" value="Search" class="search-button"/>
            <input type="text" name="q" value="{SearchQuery}"/>
          </form>
        </div>
      </div>

      <div class="main-body">
        {block:Posts}
          <div class="article">
            <div class="article-header">
              {block:Title}<h2 class="pretty"><a class="title-link" href="{Permalink}">{Title}</a></h2>{/block:Title}
              {block:Caption}<h2 class="pretty"><a class="title-link" href="{Permalink}">{Caption}</a></h2>{/block:Caption}
              <ul class="article-links">
                {block:Date}
                  <li class="date">
                    {Month} {DayOfMonthWithZero}, {Year}
                  </li>
                {/block:Date}
                <li class="comments">
                  <a href="{Permalink}#disqus_thread">0 Comments</a>
                </li>
              </ul>
            </div>
            {block:Text}
              <article class="text">
                {Body}
              </article>
            {/block:Text}
            {block:Photo}
              <article class="photo">
                {LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
                {block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}
              </article>
            {/block:Photo}
          </div>

          <!-- other stuff -->
          {block:Permalink}
              <div id="disqus_thread"></div>
              <script type="text/javascript" src="http://disqus.com/forums/wheeyls/embed.js"></script>
              <noscript><a href="http://wheeyls.disqus.com/?url=ref">View the discussion thread.</a></noscript>
          {/block:Permalink}
          {block:PostNotes}<div id="post-notes">{PostNotes}</div>{/block:PostNotes}
        {/block:Posts}
      </div>
    </div>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-33983940-1']);
      _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>

    <script type="text/javascript">
        (function() {
          var links = document.getElementsByTagName('a'), query = '?', scriptTag;
          for(var i = 0, ii = links.length; i < ii; i++) {
            if(links[i].href.indexOf('#disqus_thread') >= 0) {
              query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
            }
          }

          scriptTag = document.createElement("script");
          scriptTag.src = "http://disqus.com/forums/wheeyls/get_num_replies.js" + query;

          document.body.appendChild(scriptTag);
        })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<title>{Title}</title>
	<link rel="shortcut icon" href="{Favicon}" />
	<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
	<link rel="alternate" type="application/rss+xml" href="{RSS}" />

	<style type="text/css" media="screen">
	/* RESET */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
	}
	body { line-height: 1; }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
	:focus { outline: 0; }
	del { text-decoration: line-through; }
	table { border-collapse: collapse; border-spacing: 0; }
	/* end reset */

	body {
	font-family: 'Liberation Serif','Georgia';
	background-color: #FFF3E0;
	color: #3B353D;
	}

	.main {
	width: 80%;
	padding: 15px;
	padding-bottom: 300px;
	margin: auto;
	}

	.main-header {
	overflow: auto;
	padding: 5px;
	}

	.main-header a {
	color: #3B353D;
	text-decoration: none;
	}

	.pretty {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}
	#search {
	float: right;
	}

	h1 {
	float: left;
	font-size: 1.4em;
	}

	h2 {
	font-size: 2.8em;
	text-align: center;
	margin-bottom: 0;
	color: #3B353D;
	}


	pre {
	border: 1px solid #736877;
	background-color: #ffffff;
	padding: 20px;
	overflow-x: scroll;
	}

	.title-link {
	color: #3B353D;
	text-decoration: none;
	}

	.photo img {
	border: 5px solid #736877;
	}

	.text {
	-moz-column-gap: 4em;
	-moz-column-rule: 1px dashed #cccccc;
	-moz-column-width: 60ex;
	-webkit-column-gap: 4em;
	-webkit-column-rule: 1px dashed #cccccc;
	-webkit-column-width: 60ex;
	column-gap: 4em;
	column-rule: 1px dashed #cccccc;
	column-width: 60ex;
	text-align: justify;
	padding: 5px;
	}

	.photo {
	text-align: center;
	}

	.article {
	margin-top: 4em;
	border: 4px dashed #736877;
	border-radius: 12px;
	padding: 25px;
	/box-shadow: 1px 1px 2px #736877;/
	}

	#disqus_thread {
	border-top: 1px solid #ccc;
	margin: 75px 30px 0;
	}

	.article p {
	margin: 6px 0px 6px 0;
	padding: 2px 0;
	font-size: 1.1em;
	line-height: 1.1em;
	}

	.article-links {
	text-align: center;
	overflow: auto;
	padding-bottom: .8em;
	padding-top: .2em;
	}

	.article-links li {
	display: inline;
	padding: 0px 10px 10px 10px;
	}

	.section {
	padding: 5px 0;
	}

	@media (max-width: 500px) {
	h2 {
	font-size: 1.8em;
	}

	.main {
	width: 94%;
	padding: 2%;
	padding-top: 1em;
	}

	.article {
	padding: 2%;
	padding-top: .5em;
	margin-top: 1em;
	}

	img {
	width: 94%;
	max-width: 100%;
	}
	}

	@media (max-width: 400px) {
	#search {
	margin-top: .8em;
	text-align: center;
	float: none;
	clear: both;
	}

	h1 {
	font-size: 1.8em;
	clear: both;
	float: none;
	text-align: center;
	}
	}
	{CustomCSS}
	</style>
	</head>
	<body>
	<div class="main pretty">
	<div class="main-header">
	<h1 class="pretty"> <a href="/">{Title}</a> </h1>
	<div id="search" class="pretty">
	<form action="/search" method="get">
	<input type="submit" value="Search" class="search-button"/>
	<input type="text" name="q" value="{SearchQuery}"/>
	</form>
	</div>
	</div>

	<div class="main-body">
	{block:Posts}
	<div class="article">
	<div class="article-header">
	{block:Title}<h2 class="pretty"><a class="title-link" href="{Permalink}">{Title}</a></h2>{/block:Title}
	{block:Caption}<h2 class="pretty"><a class="title-link" href="{Permalink}">{Caption}</a></h2>{/block:Caption}
	<ul class="article-links">
	{block:Date}
	<li class="date">
	{Month} {DayOfMonthWithZero}, {Year}
	</li>
	{/block:Date}
	<li class="comments">
	<a href="{Permalink}#disqus_thread">0 Comments</a>
	</li>
	</ul>
	</div>
	{block:Text}
	<article class="text">
	{Body}
	</article>
	{/block:Text}
	{block:Photo}
	<article class="photo">
	{LinkOpenTag}<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
	{block:HighRes}<a href="{PhotoURL-HighRes}" class="high-res" target="_blank"></a>{/block:HighRes}
	</article>
	{/block:Photo}
	</div>

	<!-- other stuff -->
	{block:Permalink}
	<div id="disqus_thread"></div>
	<script type="text/javascript" src="http://disqus.com/forums/wheeyls/embed.js"></script>
	<noscript><a href="http://wheeyls.disqus.com/?url=ref">View the discussion thread.</a></noscript>
	{/block:Permalink}
	{block:PostNotes}<div id="post-notes">{PostNotes}</div>{/block:PostNotes}
	{/block:Posts}
	</div>
	</div>

	<script type="text/javascript">
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-33983940-1']);
	_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>

	<script type="text/javascript">
	(function() {
	var links = document.getElementsByTagName('a'), query = '?', scriptTag;
	for(var i = 0, ii = links.length; i < ii; i++) {
	if(links[i].href.indexOf('#disqus_thread') >= 0) {
	query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
	}
	}

	scriptTag = document.createElement("script");
	scriptTag.src = "http://disqus.com/forums/wheeyls/get_num_replies.js" + query;

	document.body.appendChild(scriptTag);
	})();
	</script>
	</body>
	</html>