Commit 60d05cf1 authored by i❤computers's avatar i❤computers

* Style page for mobile view

* extend yellow background to bottom of page
parent 8d0f97cf
......@@ -13,15 +13,20 @@
body {
background-color: rgb(102, 98, 109);
display: flex;
}
div {
background-color: rgb(255, 233, 125);
height: 100%;
width: 75%;
max-width: 800px;
margin: 0 auto;
}
article {
font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125);
padding: 0.5em;
margin: 0 auto;
width: 55%;
}
p {
......@@ -38,11 +43,26 @@
span.highlighted {
background-position: -100%
}
@media screen and (max-width: 900px) {
div {
width: initial;
}
h1 {
font-size: 1.6em;
}
p {
font-size: 1.3em;
}
}
</style>
</head>
<body>
<audio id="excerpt" src="99Pi%20Excerpt.mp3"></audio>
<article>
<div>
<article>
<p>
<span class="cue-position-0">This </span>
<span class="cue-position-1">is </span>
......@@ -73,7 +93,8 @@
<span class="cue-position-15">to the </span>
<span class="cue-position-16">North American </span>
<span class="cue-position-17">Vexillological </span>
<span class="cue-position-19">(Vex-</span><span class="cue-position-20">illo-</span><span class="cue-position-21">logical. </span>
<span class="cue-position-19">(Vex-</span><span class="cue-position-20">illo-</span><span
class="cue-position-21">logical. </span>
<span class="cue-position-26">It&#39;s the </span>
<span class="cue-position-27">extra </span>
<span class="cue-position-28">&#39;lol&#39; </span>
......@@ -177,7 +198,8 @@
<span class="cue-position-113">Chicago&#39;s </span>
<span class="cue-position-114">history. </span>
</p>
</article>
</article>
</div>
<script src="bling.js"></script>
<script src="script.js"></script>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment