changed fonts, modified css

walter-0 · Sep 18, 2015 · 49bc203 · 49bc203
1 parent 83d30d5
commit 49bc203
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <head>
   <title>The Spotify Game - Meteor Version</title>
+<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
@@ -9,12 +10,12 @@
       <h1 class='title'>The Spotify Game</h1>
       <h2 class='subtitle'>Explore & Race Through Spotify Artists</h2>
       <p class='rules'>
-        How well do you know music? Click your way to a random target artist by selecting from the artists related to the random current selection.<br> Level 1: Navigate between artists of the same genre. <br> Level 2: Navigate between artists of similar genres. <br> Level 3: Navigate between completely random artists.
+        How well do you know music?<br><br> Click your way to a random target artist by selecting from the artists related to the random current selection.<br><br> Level 1: Navigate between artists of the same genre. <br> Level 2: Navigate between artists of similar genres. <br> Level 3: Navigate between completely random artists.
       </p>
       <h2>{{> currentplayer}}</h2>
       {{> addPlayerForm}}
       <h3><strong>Select your name before starting a game to save your scores</strong></h3>
-      <h2>Winnerboard</h2>
+      <h2 id='winnerboardText'>Winnerboard</h2>
       <div class='winnerboard'>
         {{ > winnerboard}}
       </div>

diff --git a/style.css b/style.css
@@ -7,6 +7,7 @@ body{
 .container{
   display: flex;
   height: 100%;
+  font-family: 'Press Start 2P', cursive;
 }
 
 .sidebar{
@@ -15,13 +16,13 @@ body{
   flex-wrap: nowrap;
   text-align: center;
   background-color: #213A16;
+  color: #C2D3BB;
   width: 30%;
   padding: 0 .5em;
 }
 
 .title{
-  padding-top: .5em;
-  font-size: 2.7em;
+  font-size: 3em;
   color: #C2D3BB;
 }
 
@@ -30,18 +31,20 @@ body{
 }
 
 .rules{
-  line-height: 1.5em;
+  line-height: 1.8em;
   text-align: justify;
-  font-size: 1.15em;
+  font-size: .8em;
   color: #9B6F77;
   padding: .2em;
   border: 3px solid black;
 }
 
+
 h3 strong:hover{
   text-decoration: underline;
 }
 
+
 .winnerboard{
   border: 1px solid black;
   text-align: center;
@@ -83,7 +86,7 @@ input{
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 1px solid black;
+  border: 2px solid black;
   border-radius: 15px;
   margin: auto .4em;
   width: 20em;
@@ -111,10 +114,11 @@ input{
 .currentArtist,
 .genre1,
 .genre2{
-  border: 1px solid black;
+  border: 2px solid black;
   border-radius: 15px;
-  margin-right: 4em;
-  margin-left: 4em;
+  width: 15em;
+  margin-right: 2em;
+  margin-left: 2em;
   padding: .5em;
 }
 
@@ -137,10 +141,11 @@ input{
 .artists li{
   list-style-type: none;
   display: block;
-  margin: 1em 3em;
-  border: 1px solid black;
+  margin: 1em 2em;
+  border: 2px solid black;
   border-radius: 15px;
   text-align: center;
+  font-size: 1.1em;
   padding: .4em;
 }