Merge PR#32: Add basic CSS styles

components/Layout/Layout.scss

@@ -4,12 +4,34 @@
  * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
  */
 
+@import '../variables.scss';
+
 html, body {
-  font-family: 'Roboto', 'Helvetica', sans-serif;
   margin: 0;
   padding: 0;
+  background-color: $body-bg;
+  color: $text-color;
+  font-family: $font-family-base;
 }
 
 .Layout {
+  margin: 0 auto;
+}
+
+@media (min-width: $screen-sm-min) {
+  .Layout {
+    width: calc($screen-sm-min - 18px);
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .Layout {
+    width: calc($screen-md-min - 22px);
+  }
+}
 
+@media (min-width: $screen-lg-min) {
+  .Layout {
+    width: calc($screen-lg-min - 30px);
+  }
 }

components/Navigation/Navigation.scss

@@ -4,6 +4,37 @@
  * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
  */
 
+@import '../variables.scss';
+
 .Navigation {
+  display: flex;
+  flex-direction: row;
+  margin: 2em 0 5em 0;
+  list-style: none;
+  justify-content: flex-end;
+
+  li {
+    padding: 0 2em;
+
+    a {
+      padding: 0.5em 1em;
+      color: $brand-color;
+      text-decoration: none;
+      text-transform: uppercase;
+      cursor: pointer;
+
+      &:hover {
+        border-bottom: 3px solid $brand-color;
+        color: $text-color;
+      }
+
+      &:visited {
+        color: $brand-color;
 
+        &:hover {
+          color: $text-color;
+        }
+      }
+    }
+  }
 }

components/variables.scss

@@ -3,3 +3,25 @@
  * https://github.com/koistya/react-static-boilerplate
  * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
  */
+
+/*
+ * Scaffolding
+ * -------------------------------------------------------------------------- */
+
+$body-bg: #f7f7f7;
+$text-color: #333;
+$brand-color: #21ce99;
+
+/*
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+$font-family-base: 'Roboto', 'Helvetica', sans-serif;
+
+/*
+ * Media queries breakpoints
+ * -------------------------------------------------------------------------- */
+
+$screen-sm-min: 768px;
+$screen-md-min: 992px;
+$screen-lg-min: 1200px;