Improvements to mobile view
parent
735c4029a4
commit
11dec7ac2d
18
index.html
18
index.html
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue