1
0
Fork 0

Improvements to mobile view

remotes/origin/HEAD
Dustin 2015-12-20 18:53:47 -06:00
parent 735c4029a4
commit 11dec7ac2d
1 changed files with 14 additions and 4 deletions

View File

@ -5,6 +5,7 @@
<head> <head>
<title>Dustin C. Hatch</title> <title>Dustin C. Hatch</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" type="image/png" <link rel="shortcut icon" type="image/png"
href="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/favicon.png" /> href="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/favicon.png" />
<link type="text/css" rel="stylesheet" <link type="text/css" rel="stylesheet"
@ -22,11 +23,13 @@
} }
#logo { #logo {
text-align: center; text-align: center;
position: relative;
z-index: 8;
} }
#logo img { #logo img {
display: none;
height: 100%; height: 100%;
width: 100%; width: 100%;
max-height: 100px;
} }
blockquote#songquote { blockquote#songquote {
border: none !important; border: none !important;
@ -72,13 +75,20 @@
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
#logo img { #logo img {
display: inline;
max-height: 200px; max-height: 200px;
} }
#songquote::before { #songquote::before {
font-size: 400pt; font-size: 400pt;
top: -100pt; top: -100pt;
} }
#songquote .quote {
font-size: 32pt;
}
#songquote .citation {
font-size: 16pt;
}
}
@media only screen and (min-width: 1024px) {
#songquote .quote { #songquote .quote {
font-size: 48pt; font-size: 48pt;
} }
@ -111,10 +121,10 @@
<body> <body>
<section id="main" class="row"> <section id="main" class="row">
<div id="logo" class="large-4 columns"><img alt="D" <div id="logo" class="medium-4 columns"><img alt="D"
src="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/D.svg" /> src="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/D.svg" />
</div> </div>
<blockquote id="songquote" class="large-8 columns"> <blockquote id="songquote" class="medium-8 columns">
<p class="quote">{{ quote.quote }}</p> <p class="quote">{{ quote.quote }}</p>
<p class="citation" title="{{ quote.album }} ({{ quote.year }})"> <p class="citation" title="{{ quote.album }} ({{ quote.year }})">
<span class="title">{{ quote.title }}</span> <span class="title">{{ quote.title }}</span>