Add typography and colors

2018-11-16 19:25:09 +02:00
parent fb068db168
commit 5a64b05b1c
5 changed files with 22 additions and 15 deletions
@@ -1,7 +1,13 @@
+$dark-blue: #002d3a;
 $white: #fff;
-$off-white: #f4f7fc;
-$light-blue: #e4ecfa;
-$blue: #2f6c76;
-$dark-blue: #193b41;
+$black: #000;
+$grey1: #d4d0c7;
+$grey2: #efece4;
+$orange1: #d57a2d;
+$orange2: #dd934e;
+$blue: #57b2df;
+$green1: #beddeb;
+$green2: #c0dcd9;
+$sand: #fdf9d7;

-$font-helvetica: helvetica, arial, sans-serif;
+$font: 'Montserrat', sans-serif;
@@ -2,6 +2,7 @@

 .card {
  background-color: $white;
+  color: $dark-blue;
  width: 20rem;
  white-space: wrap;
  text-align: left;
@@ -1,5 +1,5 @@
@import "../../assets/scss/globals";
-$border-width: 4px;
+$border-width: 2px;

 .navigation {
  width: 100%;
@@ -9,14 +9,14 @@ $border-width: 4px;
  margin-bottom: 3rem;

  &__item {
-    background-color: $off-white;
    padding: 0.8rem 2rem;
-    transition: background-color 0.2s;
-    border-bottom: $border-width solid $blue;
+    transition: border-bottom 0.2s;
+    border-bottom: $border-width solid $dark-blue;
    cursor: pointer;
+    color: $white;

    &:hover {
-      background-color: $light-blue;
+      border-bottom: $border-width solid $white;
    }
  }
 }
@@ -2,6 +2,7 @@
 <html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8"/>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
@@ -4,10 +4,10 @@
 html,
 body {
  font-size: 16px;
-  background-color: $off-white;
+  background-color: $dark-blue;
  height: 100%;
-  font-family: $font-helvetica;
-  color: $blue;
+  font-family: $font;
+  color: $white;
  text-align: center;
  overflow: auto;
 }
@@ -28,12 +28,11 @@ h1 {
 }

 p {
-  color: $dark-blue;
+  color: $white;
  font-size: 1.5rem;
 }

 a,
 a:hover {
  text-decoration: none;
-  color: $blue;
 }