add styling of the application (#3)

VincentKempers · May 30, 2018 · 4a6d412 · 4a6d412
1 parent 2faa721
commit 4a6d412
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/style/chosen.scss b/src/style/chosen.scss
@@ -16,9 +16,25 @@
     font-size: 2em;
   }
 
-  div {
+  .selections {
+    margin-left: 1em;
     .circle {
-      width: 2em;
+      background: #D8D8D8;
+      height: 4.5rem;
+      width: 4.5rem;
+      margin-bottom: 1rem;
+      margin-left: 1.2rem;
+      border-radius: 50%;
+      border: 3px solid skyblue;
+    }
+  }
+
+  .user--picked {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    em {
+      padding-left: .3em;
     }
   }
 

diff --git a/views/chosen.ejs b/views/chosen.ejs
@@ -23,13 +23,13 @@
 
     <h1>U heeft gekozen voor de thema's</h1>
     <div class="selections">
-      <div class="selection-1">
+      <div class="user--picked">
         <div class="circle"></div>
-        <p>Experimentele fase in zijn leven.</p>
+        <em>Experimentele fase in zijn leven.</em>
       </div>
-      <div class="selection-2">
+      <div class="user--picked">
         <div class="circle"></div>
-        <p>Vrienden van Gogh</p>
+        <em>Vrienden van Gogh</em>
       </div>
     </div>
     <button type="button" name="start">Start</button>