Skip to content

Instantly share code, notes, and snippets.

@dandenney

dandenney/index.html

Created July 13, 2012 04:51
Show Gist options
  • Save dandenney/3102789 to your computer and use it in GitHub Desktop.
Save dandenney/3102789 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by dandenney</title>
<!--
Copyright (c) 2012 Dan Denney, http://codepen.io/dandenney
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<style>
/* normalize.css 2011-10-24T11:29 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}body,button,input,select,textarea{font-family:sans-serif}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:0;padding:0}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;max-width:100%;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'IcoMoon';src:url("http://dandenney.com/fonts/IcoMoon.eot");src:url("../fonts/IcoMoon.eot?#iefix") format("embedded-opentype"),url("http://dandenney.com/fonts/IcoMoon.svg#IcoMoon") format("svg"),url("../fonts/IcoMoon.woff") format("woff"),url("../fonts/IcoMoon.ttf") format("truetype");font-weight:normal;font-style:normal}[data-icon]:before{font-family:'IcoMoon';content:attr(data-icon);speak:none}html{background:#f9f9f9}body{background:#fff;color:#231f20;font-family:"museo-slab-1","museo-slab-2",serif;font-size:1em;font-weight:400}h1,h2,h3,h4,h5,h6{color:#3b2415;font-family:"prenton-condensed-1","prenton-condensed-2",sans-serif;font-weight:700}h1{font-size:3rem;margin:.25em 0}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.75em}a{color:#1b5f73;font-weight:700;text-decoration:none}a[href^="http://"]:not([href*="dandenney.com"]):after{content:"\0021";font-family:'IcoMoon';font-size:.5em;font-style:normal;margin-left:.15em;position:relative;top:-0.5em;speak:none}ul,ol{margin-left:1.25em}ol ul{margin-top:1rem}li{margin-bottom:.5em}footer{margin-top:2em}strike{color:#74676a}header{background:#f9f9f9;border-bottom:1px solid #f5f5f5;color:#989898;overflow:hidden;padding:1em}header a{float:left}header img{float:left;max-width:15%}header .logo{background:none}header .logo h3{color:#3b2415;text-shadow:inset 2px 2px 0 #fafafa;float:left;font-size:1.5em;margin:.25em 0 0 .5em}header .logo span{color:#921820;display:block;font-size:.75em}header nav{float:left;margin-top:1.5em}header .nav-item{display:inline}header nav a{background:none;color:#989898;display:inline-block;padding-left:.5em;position:relative}header nav a span{display:none}header [data-icon]:before{color:#1b5f73;font-size:2em;margin-right:.15em}footer{-webkit-box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);background:#f9f9f9;padding:1em}footer nav{float:right}footer [data-icon]:before{margin-right:.25em}.post-standard{font-size:1rem;line-height:1.4;margin:2rem auto;max-width:688px;width:87.5%}.post-standard h1{margin-bottom:0}.post-standard h1+p{margin-top:.4em}.post-standard h2{margin-bottom:0}.post-standard h2+p{margin-top:.25rem}.post-standard pre{background:#1b5f73;padding:0 1em}.post-standard code{color:#f9f9f9;font-family:'Courier New', Courier, monospace;font-size:.75em}.post-standard blockquote{background:#f9f9f9;font-family:Georgia, serif;font-style:italic;margin:1em 0;padding:1em}.post-standard cite{color:#989898;display:block;margin-top:.3em}.post-standard small{color:#989898}.wrapper{margin:0 auto;max-width:90%}.columns-three{margin:0 auto;max-width:90%;overflow:hidden}.columns-three .column{float:left;margin-left:5%;width:30%}.columns-three .column:first-child{margin-left:0}.home{background:#231f20}.intro{color:#f9f9f9;margin:1em auto;max-width:90%}.intro h1{color:#f9f9f9;font-size:5em;line-height:.9;margin:.2em 0;text-align:center;text-shadow:0.02em 0.02em 0.05em rgba(0,0,0,0.9)}.intro [data-icon]:before{color:#921820;text-shadow:0.02em 0.02em 0.05em #000}.intro div{font-size:.435em}.intro h2{color:#f9f9f9;margin-bottom:.25em;text-shadow:0.05em 0.05em 0.05em rgba(0,0,0,0.9)}.intro h3{color:#f9f9f9;font-family:"museo-slab-1","museo-slab-2",serif;line-height:1.5;margin-top:.25em;text-shadow:0.1em 0.1em 0.1em rgba(0,0,0,0.9)}.intro a{color:#2a92b1;text-shadow:1px 1px 1px #000}@media only screen and (min-width : 768px){header .logo img{max-width:10%}header nav{float:right}header nav a:hover span{bottom:-1.25em;display:block;left:0;position:absolute}.post-standard{font-size:1.25rem}.center-content{text-align:center}}@media only screen and (min-width : 1100px){.posts-main .wrapper{overflow:hidden}.posts-main .wrapper>section{float:left;margin-right:4em}}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible" content="IE=edge,chrome=1' />
<meta charset='utf-8' />
<meta content='width=device-width,initial-scale=1' name='viewport' />
<title>"HTML, but with an A and less code"</title>
<script src='http://use.typekit.com/cxh3ytl.js' type='text/javascript'></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link href='/stylesheets/screen.css' rel='stylesheet' />
</head>
<body>
<header>
<a class='logo' href='/'>
<img alt='Dan Denney character' src='http://dandenney.com/images/dan-denney-character.png' />
<h3>
Dan Denney
<span>
Super Social Front-End Dev
</span>
</h3>
</a>
<nav>
<ul>
<li class='nav-item'>
<a aria-hidden='true' data-icon='&#x0026' href='/posts'><span>Posts</span></a>
</li>
</ul>
</nav>
</header>
<article class='post-standard'>
<p>
<strong>This is just me sharing as I learn something, definitely not a tutorial.</strong>
</p>
<h2>HTML, but with an A and less code</h2>
<p>
What do you do when you're joining a team that actually has "Mr. Haml" on it? Well, you spend some time learning Haml. (To be clear, <a href="http://twitter.com/nickawalsh">Nick Walsh</a> didn't create Haml, he just has been dubbed that by the front-end team at <a href="http://envylabs.com">Envy Labs</a> because he <a href="http://www.netmagazine.com/tutorials/craft-cleaner-more-concise-html-haml">wrote about it for .Net</a> and <a href="http://futureofwebdesign.com/new-york-2011/speakers/">spoke on it at FOWD NYC 2011</a>. In Nick's words, Haml is a way to craft cleaner, more concise HTML.
</p>
<h2>Haml and Me</h2>
<p>
Originally created by <a href="http://hamptoncatlin.com">Hampton Catlin</a>, Haml is an HTML preprocessor that is primarily used in Rails apps. Normally, you would just use a .haml extension on a file in a Rails app and it just works. However, if you want to play with it elsewhere you can have it work immediately with <a href="http://incident57.com/codekit/">Codekit</a>.
</p>
<p>
Not to toot my own horn too much, but I am really pleased that I have just redone my site without a CMS. The main reason being that this post is actually being written in Haml in order to learn it. Because I didn't bind myself to templates, I can craft up this entire page in Haml and not have to worry about the rest of the site. (I'm not sure about how I will keep the nav updated dynamically but I'll broach that as we go.)
</p>
<h2>Building this post</h2>
<p>
So, first things first I need a document structure. Now I could read a bit about how to set one up in the docs but I thought I'd just follow what Nick and Drew put together for <a href="https://github.com/mvcss/MVCSS">MVCSS</a>. That was super easy to follow to get the basic page structure rolling. Then, I tried sharing the code in here and that gets a little <a href="http://www.urbandictionary.com/define.php?term=cray+cray">cray, cray</a>. Luckily, I found <a href="http://stackoverflow.com/questions/1993993/haml-with-pre-how-to-remove-unwanted-intend#_=_">this</a> on the wonderful Stack Overflow.
</p>
<p>
So this below is what it takes to build up a basic page ready for content, pulling in my sitewide CSS and <a href="http://typekit.com">Typekit</a>.
</p>
<pre><code>!!! 5&#x000A;%html{:lang =&gt; &quot;en&quot;}&#x000A; %head&#x000A; %meta(http-equiv='X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1')&#x000A; %meta(charset='utf-8')&#x000A; %meta(name='viewport' content='width=device-width,initial-scale=1')&#x000A; %title &quot;HTML, but with an A and less code&quot;&#x000A; %link(href=&quot;/stylesheets/screen.css&quot; rel=&quot;stylesheet&quot;)&#x000A; %body</code></pre>
<p>
On save, Codekit does it's magic compiling and this is what gets created:
</p>
<pre><code>&lt;!DOCTYPE html&gt;&#x000A;&lt;html lang='en'&gt;&#x000A; &lt;head&gt;&#x000A; &lt;meta http-equiv='X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1'&gt;&#x000A; &lt;meta charset='utf-8'&gt;&#x000A; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;&#x000A; &lt;title&gt;&quot;HTML, but with an A and less code&quot;&lt;/title&gt;&#x000A; &lt;link href='/stylesheets/screen.css' rel='stylesheet'&gt;&#x000A; &lt;/head&gt;&#x000A; &lt;body&gt;&lt;/body&gt;&#x000A;&lt;/html&gt;</code></pre>
<p>
It took a little bit to get there and to figure out the rules on indenting, but it is mighty clean code and I get the feeling that the &lt; and &gt; keys are going to be getting a little bit of a break as I work more in Haml.
</p>
<h2>The Content</h2>
<p>
As I was looking for solutions, I found this article about why you <a href="http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/">shouldn't be using Haml for content</a>. While I'm doing the exact opposite as I learn the ins-and-outs of it, there are some cool things about Haml in that article. Basically, you can decide how you want to write your content. Use haml for your structure and pop in raw HTML as needed, use markdown, textile, etc. That is pretty cool.
</p>
<p>
So far, this part has been easy but links are a little tricky. Getting in some of the special HTML5 items like icons called by data values with entities and aria-hidden are giving me some challenges. I'll follow up with the rest of the page shortly because I don't want to share where I have regular HTML mixed in.
</p>
<small>
June 24, 2012
</small>
<h2>Continuing on</h2>
<p>
The header is pretty straight forward as well, except for this nagging bit where the & is compiled (albeit correctly) to &amp;.
</p>
<pre><code>%header&#x000A; %a.logo(href=&quot;/&quot;)&#x000A; %img(src=&quot;/images/dan-denney-character.png&quot; alt=&quot;Dan Denney character&quot;)&#x000A; %h3 &#x000A; Dan Denney&#x000A; %span &#x000A; Super Social Front-End Dev&#x000A; %nav&#x000A; %ul&#x000A; %li.nav-item&#x000A; %a.icon-pencil(href=&quot;/posts&quot; data-icon=&quot;&amp;#x0026&quot; aria-hidden=&quot;true&quot;)&#x000A; %span Posts</code></pre>
</article>
<footer>
<nav>
<ul>
<li class='nav-item'>
<a aria-hidden='true' data-icon='&#x0026' href='/posts'><span>Posts</span></a>
</li>
</ul>
</nav>
<small>
&copy; Dan Denney - I'm on the Twitters as
<a href='http://twitter.com/dandenney'>@dandenney</a>
</small>
</footer>
</body>
</html>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/dandenney/pen/4/2">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.haml
!!! 5
%html{:lang => "en"}
%head
%meta(http-equiv='X-UA-Compatible" content="IE=edge,chrome=1')
%meta(charset='utf-8')
%meta(name='viewport' content='width=device-width,initial-scale=1')
%title "HTML, but with an A and less code"
%script{:src => "http://use.typekit.com/cxh3ytl.js", :type => "text/javascript"}
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
%link(href="/stylesheets/screen.css" rel="stylesheet")
%body
%header
%a.logo(href="/")
%img(src="http://dandenney.com/images/dan-denney-character.png" alt="Dan Denney character")
%h3
Dan Denney
%span
Super Social Front-End Dev
%nav
%ul
%li.nav-item
<a aria-hidden='true' data-icon='&#x0026' href='/posts'><span>Posts</span></a>
%article.post-standard
%p
%strong This is just me sharing as I learn something, definitely not a tutorial.
%h2 HTML, but with an A and less code
%p
What do you do when you're joining a team that actually has "Mr. Haml" on it? Well, you spend some time learning Haml. (To be clear, <a href="http://twitter.com/nickawalsh">Nick Walsh</a> didn't create Haml, he just has been dubbed that by the front-end team at <a href="http://envylabs.com">Envy Labs</a> because he <a href="http://www.netmagazine.com/tutorials/craft-cleaner-more-concise-html-haml">wrote about it for .Net</a> and <a href="http://futureofwebdesign.com/new-york-2011/speakers/">spoke on it at FOWD NYC 2011</a>. In Nick's words, Haml is a way to craft cleaner, more concise HTML.
%h2 Haml and Me
%p
Originally created by <a href="http://hamptoncatlin.com">Hampton Catlin</a>, Haml is an HTML preprocessor that is primarily used in Rails apps. Normally, you would just use a .haml extension on a file in a Rails app and it just works. However, if you want to play with it elsewhere you can have it work immediately with <a href="http://incident57.com/codekit/">Codekit</a>.
%p
Not to toot my own horn too much, but I am really pleased that I have just redone my site without a CMS. The main reason being that this post is actually being written in Haml in order to learn it. Because I didn't bind myself to templates, I can craft up this entire page in Haml and not have to worry about the rest of the site. (I'm not sure about how I will keep the nav updated dynamically but I'll broach that as we go.)
%h2 Building this post
%p
So, first things first I need a document structure. Now I could read a bit about how to set one up in the docs but I thought I'd just follow what Nick and Drew put together for <a href="https://github.com/mvcss/MVCSS">MVCSS</a>. That was super easy to follow to get the basic page structure rolling. Then, I tried sharing the code in here and that gets a little <a href="http://www.urbandictionary.com/define.php?term=cray+cray">cray, cray</a>. Luckily, I found <a href="http://stackoverflow.com/questions/1993993/haml-with-pre-how-to-remove-unwanted-intend#_=_">this</a> on the wonderful Stack Overflow.
%p
So this below is what it takes to build up a basic page ready for content, pulling in my sitewide CSS and <a href="http://typekit.com">Typekit</a>.
%pre
%code
= preserve do
:escaped
!!! 5
%html{:lang => "en"}
%head
%meta(http-equiv='X-UA-Compatible" content="IE=edge,chrome=1')
%meta(charset='utf-8')
%meta(name='viewport' content='width=device-width,initial-scale=1')
%title "HTML, but with an A and less code"
%link(href="/stylesheets/screen.css" rel="stylesheet")
%body
%p
On save, Codekit does it's magic compiling and this is what gets created:
%pre
%code
= preserve do
:escaped
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible" content="IE=edge,chrome=1'>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>"HTML, but with an A and less code"</title>
<link href='/stylesheets/screen.css' rel='stylesheet'>
</head>
<body></body>
</html>
%p
It took a little bit to get there and to figure out the rules on indenting, but it is mighty clean code and I get the feeling that the &lt; and &gt; keys are going to be getting a little bit of a break as I work more in Haml.
%h2 The Content
%p
As I was looking for solutions, I found this article about why you <a href="http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/">shouldn't be using Haml for content</a>. While I'm doing the exact opposite as I learn the ins-and-outs of it, there are some cool things about Haml in that article. Basically, you can decide how you want to write your content. Use haml for your structure and pop in raw HTML as needed, use markdown, textile, etc. That is pretty cool.
%p
So far, this part has been easy but links are a little tricky. Getting in some of the special HTML5 items like icons called by data values with entities and aria-hidden are giving me some challenges. I'll follow up with the rest of the page shortly because I don't want to share where I have regular HTML mixed in.
%small
June 24, 2012
%h2 Continuing on
%p
The header is pretty straight forward as well, except for this nagging bit where the & is compiled (albeit correctly) to &amp;.
%pre
%code
= preserve do
:escaped
%header
%a.logo(href="/")
%img(src="/images/dan-denney-character.png" alt="Dan Denney character")
%h3
Dan Denney
%span
Super Social Front-End Dev
%nav
%ul
%li.nav-item
%a.icon-pencil(href="/posts" data-icon="&#x0026" aria-hidden="true")
%span Posts
%footer
%nav
%ul
%li.nav-item
<a aria-hidden='true' data-icon='&#x0026' href='/posts'><span>Posts</span></a>
%small
&copy; Dan Denney - I'm on the Twitters as
%a(href='http://twitter.com/dandenney') @dandenney
Raw
style.css
/* normalize.css 2011-10-24T11:29 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}body,button,input,select,textarea{font-family:sans-serif}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:0;padding:0}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;max-width:100%;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'IcoMoon';src:url("http://dandenney.com/fonts/IcoMoon.eot");src:url("../fonts/IcoMoon.eot?#iefix") format("embedded-opentype"),url("http://dandenney.com/fonts/IcoMoon.svg#IcoMoon") format("svg"),url("../fonts/IcoMoon.woff") format("woff"),url("../fonts/IcoMoon.ttf") format("truetype");font-weight:normal;font-style:normal}[data-icon]:before{font-family:'IcoMoon';content:attr(data-icon);speak:none}html{background:#f9f9f9}body{background:#fff;color:#231f20;font-family:"museo-slab-1","museo-slab-2",serif;font-size:1em;font-weight:400}h1,h2,h3,h4,h5,h6{color:#3b2415;font-family:"prenton-condensed-1","prenton-condensed-2",sans-serif;font-weight:700}h1{font-size:3rem;margin:.25em 0}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.75em}a{color:#1b5f73;font-weight:700;text-decoration:none}a[href^="http://"]:not([href*="dandenney.com"]):after{content:"\0021";font-family:'IcoMoon';font-size:.5em;font-style:normal;margin-left:.15em;position:relative;top:-0.5em;speak:none}ul,ol{margin-left:1.25em}ol ul{margin-top:1rem}li{margin-bottom:.5em}footer{margin-top:2em}strike{color:#74676a}header{background:#f9f9f9;border-bottom:1px solid #f5f5f5;color:#989898;overflow:hidden;padding:1em}header a{float:left}header img{float:left;max-width:15%}header .logo{background:none}header .logo h3{color:#3b2415;text-shadow:inset 2px 2px 0 #fafafa;float:left;font-size:1.5em;margin:.25em 0 0 .5em}header .logo span{color:#921820;display:block;font-size:.75em}header nav{float:left;margin-top:1.5em}header .nav-item{display:inline}header nav a{background:none;color:#989898;display:inline-block;padding-left:.5em;position:relative}header nav a span{display:none}header [data-icon]:before{color:#1b5f73;font-size:2em;margin-right:.15em}footer{-webkit-box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);box-shadow:inset 0 0.15em 0.15em rgba(0,0,0,0.2);background:#f9f9f9;padding:1em}footer nav{float:right}footer [data-icon]:before{margin-right:.25em}.post-standard{font-size:1rem;line-height:1.4;margin:2rem auto;max-width:688px;width:87.5%}.post-standard h1{margin-bottom:0}.post-standard h1+p{margin-top:.4em}.post-standard h2{margin-bottom:0}.post-standard h2+p{margin-top:.25rem}.post-standard pre{background:#1b5f73;padding:0 1em}.post-standard code{color:#f9f9f9;font-family:'Courier New', Courier, monospace;font-size:.75em}.post-standard blockquote{background:#f9f9f9;font-family:Georgia, serif;font-style:italic;margin:1em 0;padding:1em}.post-standard cite{color:#989898;display:block;margin-top:.3em}.post-standard small{color:#989898}.wrapper{margin:0 auto;max-width:90%}.columns-three{margin:0 auto;max-width:90%;overflow:hidden}.columns-three .column{float:left;margin-left:5%;width:30%}.columns-three .column:first-child{margin-left:0}.home{background:#231f20}.intro{color:#f9f9f9;margin:1em auto;max-width:90%}.intro h1{color:#f9f9f9;font-size:5em;line-height:.9;margin:.2em 0;text-align:center;text-shadow:0.02em 0.02em 0.05em rgba(0,0,0,0.9)}.intro [data-icon]:before{color:#921820;text-shadow:0.02em 0.02em 0.05em #000}.intro div{font-size:.435em}.intro h2{color:#f9f9f9;margin-bottom:.25em;text-shadow:0.05em 0.05em 0.05em rgba(0,0,0,0.9)}.intro h3{color:#f9f9f9;font-family:"museo-slab-1","museo-slab-2",serif;line-height:1.5;margin-top:.25em;text-shadow:0.1em 0.1em 0.1em rgba(0,0,0,0.9)}.intro a{color:#2a92b1;text-shadow:1px 1px 1px #000}@media only screen and (min-width : 768px){header .logo img{max-width:10%}header nav{float:right}header nav a:hover span{bottom:-1.25em;display:block;left:0;position:absolute}.post-standard{font-size:1.25rem}.center-content{text-align:center}}@media only screen and (min-width : 1100px){.posts-main .wrapper{overflow:hidden}.posts-main .wrapper>section{float:left;margin-right:4em}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment