Feature/chosen (#4)

* add styling of the application * delete space * add other button style * add styling for button * add button styles to css * add font to test and finish page
VincentKempers · May 31, 2018 · 7373175 · 7373175
1 parent 4a6d412
commit 7373175
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/src/style/chosen.scss b/src/style/chosen.scss
@@ -3,17 +3,28 @@
   width: $widthMax;
   height: $heightMax;
 
-  a {
-    margin-left: 1em;
-    padding: 1em;
+  [href="/selection"] {
     svg {
-      margin-top: 2em;
+      padding: 1.6em;
+      background-color: black;
+      fill: black;
     }
   }
 
   h1 {
-    padding: 1em 0 2em 1.4em;
+    padding-left: .7em;
+    margin: 1em 0;
     font-size: 2em;
+    font-family: 'Capriola', sans-serif;
+  }
+
+  .line-emphasize {
+    width: 7.5rem;
+    border: 2px solid;
+    border-color: inherit;
+    border-radius: 2px;
+    margin-left: 1.6em;
+    margin-bottom: 3em;
   }
 
   .selections {
@@ -38,4 +49,24 @@
     }
   }
 
+  .confirm-btn {
+      display: flex;
+      justify-content: center;
+      padding: 1em 3em;
+      margin: 0 auto;
+      margin-top: 4em;
+      max-width: 4em;
+      background: #000;
+      border-radius: 1.5rem;
+      text-decoration: none;
+
+      span {
+          color: #fff;
+          display: inline-block;
+      }
+
+      &.chosen {
+          transform: translateY(0);
+      }
+  }
 }
diff --git a/views/chosen.ejs b/views/chosen.ejs
@@ -5,23 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="/dist/main.css">
+    <link href="https://fonts.googleapis.com/css?family=Capriola" rel="stylesheet">
     <title>van Gogh app</title>
   </head>
   <body>
   <section class="chosen">
     <a href="/selection">
 <svg width="21px" height="30px" viewBox="0 0 21 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Mobile" transform="translate(-26.000000, -25.000000)" fill="#FFFFFF" fill-rule="nonzero">
             <polygon id="Shape" transform="translate(36.188750, 40.000000) scale(-1, -1) translate(-36.188750, -40.000000) " points="26 51.475 38.595 40 26 28.525 29.8775 25 46.3775 40 29.8775 55"></polygon>
         </g>
     </g>
 </svg></a>
-
     <h1>U heeft gekozen voor de thema's</h1>
+    <div class="line-emphasize"></div>
     <div class="selections">
       <div class="user--picked">
         <div class="circle"></div>
@@ -32,7 +31,9 @@
         <em>Vrienden van Gogh</em>
       </div>
     </div>
-    <button type="button" name="start">Start</button>
+    <a class="confirm-btn" href="/selection-overview">
+      <span>Bevestig</span>
+    </a>
   </section>
   </body>
   </html>
diff --git a/views/selection.ejs b/views/selection.ejs
@@ -34,7 +34,6 @@
 			<li></li>
 			<li></li>
 		</ul>
-
 		<a class="confirm-btn" href="/selection-overview">
 			<span>Bevestig</span>
 		</a>