Commit c3105cf0 authored by Carson Greene's avatar Carson Greene

More fine-tuning for PageSpeed

Remove unnecessary CSS calculations and HTML divs
parent b2f486ca
......@@ -8,7 +8,7 @@ body {
min-width: 410px;
height: 100%;
}
/* Header bar content */
h1 {
font-weight: lighter;
color: #444444;
......@@ -27,47 +27,34 @@ header {
height: 70px;
}
#appicon {
float: left;
height: 100%;
height: 70px;
padding-right: 20px;
}
#header-text {
height: 100%;
.shadow {
overflow: visible;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
height:10px;
}
#top-shadow {
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0,0,0,0));
height:10px;
}
#bottom-shadow {
overflow: visible;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
height:10px;
}
#header-image-container {
height: 200px;
width: 100%;
overflow: hidden;
position: relative;
left: 0;
top: 0;
align-content: center;
}
#header-image {
......@@ -78,43 +65,32 @@ header {
}
#staff-container {
height: 100%;
width: calc(100% - 300px);
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
#staff {
postition: absolute;
height: 100%;
top: 0px;
right: 0px;
height: 200px;
}
#download-badges {
height: 100%;
.download-badge {
position: absolute;
right: 10px;
height: 80px;
}
#gplay-badge {
position: absolute;
top: 15px;
right: 10px;
height: calc(50% - 20px);
}
#app-store-badge {
position: absolute;
bottom: 15px;
right: 10px;
height: calc(50% - 20px);
}
#mainbody {
color: #555555;
height: auto;
padding: 0px;
max-width: 750px;
margin: auto;
background-color: white;
......@@ -135,7 +111,7 @@ header {
#reviews-header {
border-style: dotted none;
border-color: #aaaaaa;
border-width: 2px 0px;
border-width: 2px;
text-align: center;
width: 100%;
display: inline-block;
......@@ -145,7 +121,6 @@ header {
.row {
margin-bottom: 20px;
overflow: auto;
width: 100%;
}
.review {
......@@ -153,16 +128,15 @@ header {
text-align: center;
display: inline-block;
padding: 0 10px;
float: left;
}
.review.left {
border-right: 1px solid #dddddd;
float: left;
}
.review.right {
border-left: 1px solid #dddddd;
float: right;
}
.review-header {
......@@ -173,29 +147,24 @@ footer {
background-color: #dddddd;
color: #888888;
padding: 15px;
overflow: hidden;
display: inline-block;
width: calc(100% - 30px);
}
#copyright {
margin-left: auto;
margin-right: auto;
padding: 10px;
margin: auto;
padding-bottom: 20px;
text-align: center;
}
.column {
width: 25%;
display: inline-block;
padding-bottom: 10px;
float: left;
}
ul {
list-style: none;
margin: 0;
padding: 5px 15px;
}
......
......@@ -97,13 +97,12 @@
</g>
</svg>
</a>
<span id="header-text">
<h1>Scales</h1>
<h2>Jumpstart your practice routine</h2>
<h1>Scales</h1>
<h2>Jumpstart your practice routine</h2>
</span>
</header>
<div id="header-image-container">
<div id="top-shadow"></div>
<div id="top-shadow" class="shadow" height=10px></div>
<img id=header-image src=img/header-image.jpg>
<div id=staff-container>
<svg viewBox="0 0 2150 250" id="staff">
......@@ -299,12 +298,11 @@
</g>
</svg>
</div>
<div id=download-badges>
<a href=https://s.greene.tech/ascales>
<img id=gplay-badge src=img/google-play-badge.png>
</a>
<a href=https://s.greene.tech/iscales>
<svg id="app-store-badge" viewBox="0 0 135 40">
<a href=https://s.greene.tech/ascales>
<img id="gplay-badge" class=download-badge src=img/google-play-badge.png>
</a>
<a href=https://s.greene.tech/iscales>
<svg id="app-store-badge" class=download-badge viewBox="0 0 135 40">
<g>
<path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
......@@ -428,35 +426,30 @@
</g>
</g>
</g>
</svg>
</a>
</div>
<div id="bottom-shadow"></div>
</svg>
</a>
<div id="bottom-shadow" class="shadow" height=10px></div>
</div>
<div id="mainbody">
<div class=text>
<h3>What is Scales?</h3>
<p>The Scales app is a great way to practice your scales. Many music teachers suggest
practicing random, and one of the best ways to do that is by shuffling
notecards.</p>
<p>However, that can be hard. Notecards must be all written out by hand,
and they're easily lost or damaged. The Scales app takes all of this out
of the equation.</p>
<p>Scales is a very simple app: it presents scales in a random order, remembering
what scales you've played, and all while allowing you to adjust what scales
are shown by type and number of sharps or flats. You can even disable
scales individually.</p>
<h3>What is Scales?</h3>
<p>The Scales app is a great way to practice your scales. Many music teachers suggest
practicing random, and one of the best ways to do that is by shuffling
notecards.</p>
<p>However, that can be hard. Notecards must be all written out by hand,
and they're easily lost or damaged. The Scales app takes all of this out
of the equation.</p>
<p>Scales is a very simple app: it presents scales in a random order, remembering
what scales you've played, and all while allowing you to adjust what scales
are shown by type and number of sharps or flats. You can even disable
scales individually.</p>
<div class=screenshot-div>
<img class=screenshot src=img/android.png>
<i class=caption>On Android...</i>
</div>
<div class=screenshot-div>
<img class=screenshot src=img/ios.png>
<i class=caption>...or iOS</i>
</div>
<span id=screenshots>
<div class=screenshot-div>
<img class=screenshot src=img/android.png>
<i class=caption>On Android...</i>
</div>
<div class=screenshot-div>
<img class=screenshot src=img/ios.png>
<i class=caption>...or iOS</i>
</div>
</span>
<span id=reviews-header>
<h3>Reviews</h3>
</span>
......
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