Initial commit

2015-12-16 17:21:39 -06:00
commit 0592ce320b
3 changed files with 221 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
+<head>
+  <title>Dustin C. Hatch</title>
+  <meta charset="UTF-8" />
+  <link type="text/css" rel="stylesheet"
+    href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.min.css" />
+  <style type="text/css">
+  /* <![CDATA[ */
+  body, html {
+    background-color: #09192f;
+    color: #ffffff;
+    font-family: sans-serif;
+    height: initial;
+  }
+  #main {
+    margin: .5em;
+  }
+  #logo {
+    text-align: center;
+  }
+  #logo img {
+    display: none;
+    height: 100%;
+    width: 100%;
+  }
+  blockquote#songquote {
+    border: none !important;
+  }
+  blockquote, blockquote p {
+    color: #ffffff;
+  }
+  #songquote {
+    position: relative;
+  }
+  #songquote::before {
+    color: #1b2f48;
+    content: "♫";
+    font-size: 250pt;
+    line-height: 1;
+    position: absolute;
+    top: -75pt;
+    z-index: 5;
+  }
+  #songquote .quote {
+    font-size: 32pt;
+    line-height: 1.2;
+    position: relative;
+    text-align: center;
+    text-shadow: 4px 4px 6px #000000;
+    z-index: 10;
+  }
+  #songquote .citation::before {
+    content: "—";
+  }
+  #songquote .citation {
+    font-size: 18pt;
+    margin-top: 1em;
+    position: relative;
+    text-align: right;
+    z-index: 10;
+  }
+  #songquote .title {
+    font-style: italic;
+  }
+  #songquote .artist {
+    font-variant: small-caps;
+  }
+  @media only screen and (min-width: 640px) {
+  #logo img {
+    display: inline;
+    max-height: 200px;
+  }
+  #songquote::before {
+    font-size: 400pt;
+    top: -100pt;
+  }
+  #songquote .quote {
+    font-size: 48pt;
+  }
+  #songquote .citation {
+    font-size: 20pt;
+  }
+  }
+  @media only screen and (min-width: 1200px) {
+  #logo img {
+    max-height: 400px;
+  }
+  }
+  @media only screen and (min-width: 1440px) {
+  .row {
+    max-width: 1600px;
+  }
+  #main {
+    margin: 10% auto;
+  }
+  #songquote .quote {
+    font-size: 60pt;
+  }
+  #songquote .citation {
+    font-size: 32pt;
+  }
+  }
+  /* ]]> */
+  </style>
+</head>
+
+<body>
+<section id="main" class="row">
+<div id="logo" class="large-4 columns"><img alt="D"
+  src="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/D.svg" />
+</div>
+<blockquote id="songquote" class="large-8 columns">
+<p class="quote">{{ quote.quote }}</p>
+<p class="citation" title="{{ quote.album }} ({{ quote.year }})">
+  <span class="title">{{ quote.title }}</span>
+  by <span class="artist">{{ quote.artist }}</span>
+</p>
+</blockquote>
+</section>
+</body>
+
+</html>