Dustin C. Hatch
b64db4092a
Since I took down my S3 bucket and CloudFront distribution, the images on dustin.hatch.name do not display. They are small enough and the site has so little traffic that serving them from the main server is fine.
137 lines
2.6 KiB
HTML
137 lines
2.6 KiB
HTML
<!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" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="shortcut icon" type="image/png"
|
|
href="/static/favicon.png" />
|
|
<link type="text/css" rel="stylesheet"
|
|
href="/static/foundation-6.0.1.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;
|
|
position: relative;
|
|
z-index: 8;
|
|
}
|
|
#logo img {
|
|
height: 100%;
|
|
width: 100%;
|
|
max-height: 100px;
|
|
}
|
|
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 {
|
|
max-height: 200px;
|
|
}
|
|
#songquote::before {
|
|
font-size: 400pt;
|
|
top: -100pt;
|
|
}
|
|
#songquote .quote {
|
|
font-size: 32pt;
|
|
}
|
|
#songquote .citation {
|
|
font-size: 16pt;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1024px) {
|
|
#songquote .quote {
|
|
font-size: 48pt;
|
|
}
|
|
#songquote .citation {
|
|
font-size: 20pt;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
#logo img {
|
|
max-height: 400px;
|
|
}
|
|
#main {
|
|
margin: 10% auto;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1440px) {
|
|
.row {
|
|
max-width: 1600px;
|
|
}
|
|
#songquote .quote {
|
|
font-size: 60pt;
|
|
}
|
|
#songquote .citation {
|
|
font-size: 32pt;
|
|
}
|
|
}
|
|
/* ]]> */
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<section id="main" class="row">
|
|
<div id="logo" class="medium-4 columns"><img alt="D" src="/static/D.svg" />
|
|
</div>
|
|
<blockquote id="songquote" class="medium-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>
|