From fec6b6caa594d0c72b7b8a6d2a261d56f648721c Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Sun, 19 Aug 2018 00:26:22 +0200
Subject: [PATCH] Converting application less to sass.

---
 app/assets/sass/_bootstrap-custom.scss        |  32 +++
 app/assets/sass/_mixins.scss                  |   3 +
 app/assets/sass/_variables.scss               | 212 ++++++++++++++++++
 app/assets/sass/application.scss              |  44 ++++
 app/assets/sass/base/_global.scss             |   5 +
 app/assets/sass/base/_typography.scss         |  14 ++
 app/assets/sass/components/_badge.scss        |  18 ++
 app/assets/sass/components/_blankslate.scss   |  36 +++
 app/assets/sass/components/_button.scss       |  76 +++++++
 .../sass/components/_callback-list.scss       |  78 +++++++
 app/assets/sass/components/_icon.scss         |   4 +
 app/assets/sass/components/_pagination.scss   |  33 +++
 app/assets/sass/components/_request-item.scss | 126 +++++++++++
 app/assets/sass/components/_section.scss      |  24 ++
 app/assets/sass/components/_spacer.scss       |   6 +
 app/assets/sass/components/_url.scss          |   8 +
 app/assets/sass/layout/_footer.scss           |  40 ++++
 app/assets/sass/layout/_masthead.scss         |  26 +++
 app/assets/sass/layout/_navigation.scss       | 157 +++++++++++++
 app/assets/sass/layout/_sections.scss         |  43 ++++
 app/assets/sass/mixins/_button.scss           |  64 ++++++
 app/assets/sass/mixins/_icon-vcenter.scss     |   5 +
 app/assets/sass/views/_about.scss             |  13 ++
 app/assets/sass/views/_landingpage.scss       |  43 ++++
 app/assets/sass/views/_login.scss             |  24 ++
 app/assets/sass/views/_register.scss          |   6 +
 26 files changed, 1140 insertions(+)
 create mode 100644 app/assets/sass/_bootstrap-custom.scss
 create mode 100644 app/assets/sass/_mixins.scss
 create mode 100644 app/assets/sass/_variables.scss
 create mode 100644 app/assets/sass/application.scss
 create mode 100644 app/assets/sass/base/_global.scss
 create mode 100644 app/assets/sass/base/_typography.scss
 create mode 100644 app/assets/sass/components/_badge.scss
 create mode 100644 app/assets/sass/components/_blankslate.scss
 create mode 100644 app/assets/sass/components/_button.scss
 create mode 100644 app/assets/sass/components/_callback-list.scss
 create mode 100644 app/assets/sass/components/_icon.scss
 create mode 100644 app/assets/sass/components/_pagination.scss
 create mode 100644 app/assets/sass/components/_request-item.scss
 create mode 100644 app/assets/sass/components/_section.scss
 create mode 100644 app/assets/sass/components/_spacer.scss
 create mode 100644 app/assets/sass/components/_url.scss
 create mode 100644 app/assets/sass/layout/_footer.scss
 create mode 100644 app/assets/sass/layout/_masthead.scss
 create mode 100644 app/assets/sass/layout/_navigation.scss
 create mode 100644 app/assets/sass/layout/_sections.scss
 create mode 100644 app/assets/sass/mixins/_button.scss
 create mode 100644 app/assets/sass/mixins/_icon-vcenter.scss
 create mode 100644 app/assets/sass/views/_about.scss
 create mode 100644 app/assets/sass/views/_landingpage.scss
 create mode 100644 app/assets/sass/views/_login.scss
 create mode 100644 app/assets/sass/views/_register.scss

diff --git a/app/assets/sass/_bootstrap-custom.scss b/app/assets/sass/_bootstrap-custom.scss
new file mode 100644
index 0000000..0d09224
--- /dev/null
+++ b/app/assets/sass/_bootstrap-custom.scss
@@ -0,0 +1,32 @@
+
+// ---------------------------
+//  Custom bootstrap variables.
+// ---------------------------
+
+$body-bg:  					#f5f5f8;
+
+$font-size-base:            15px;
+$nav-link-hover-bg:         none;
+
+// ---------------------------
+//  Source imports
+// ---------------------------
+
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+@import "bootstrap/normalize";
+@import "bootstrap/close";
+@import "bootstrap/alerts";
+@import "bootstrap/print";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/scaffolding";
+@import "bootstrap/grid";
+@import "bootstrap/utilities";
+@import "bootstrap/navs";
+@import "bootstrap/dropdowns";
+@import "bootstrap/modals";
+@import "bootstrap/component-animations";
diff --git a/app/assets/sass/_mixins.scss b/app/assets/sass/_mixins.scss
new file mode 100644
index 0000000..1d56b71
--- /dev/null
+++ b/app/assets/sass/_mixins.scss
@@ -0,0 +1,3 @@
+
+@import "mixins/button";
+@import "mixins/icon-vcenter";
diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
new file mode 100644
index 0000000..9053952
--- /dev/null
+++ b/app/assets/sass/_variables.scss
@@ -0,0 +1,212 @@
+
+// ----------------------------------
+//   Paths
+// ----------------------------------
+$base-path:		'..';
+$image-path:	#{$base-path}/img;
+
+// ----------------------------------
+//   Colors
+// ----------------------------------
+$gray-lightest: #f9f9f9;
+$gray-light:    #dcdcdc;
+$gray-dark:     #444;
+$gray-darker:   #202020;
+$black:         #000;
+$white:         #fff;
+
+// Text
+$text-color:				#333;
+$text-secondary-color:		#666;
+$text-light-color:			#f1f1f1;
+
+// Layout
+$foreground-color:   		$white;
+$hover-color:               $gray-lightest;
+$border-color: 				$gray-light;
+
+// Brand
+$brand-color:       		#03a9f4;
+$brand-info:        		hsl(210, 70%, 50%);
+$google-color:				#db4437;
+$github-color:				#4183c4;
+$gitlab-color:              #548;
+$linkedin-color:            #0077B5;
+
+// ----------------------------------
+//   Font
+// ----------------------------------
+
+
+$font-size-navigation:	  20px;
+$text-size-large:         20px;
+$font-size-small:         14px;
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:        $font-family-sans-serif;
+
+// ----------------------------------
+//   Layout
+// ----------------------------------
+$header-text-shadow:					1px 3px 4px rgba(0, 0, 0, 0.45);
+
+// navigation
+$navbar-breakpoint-min:                 $screen-md-min;
+
+$navbar-height:                         60px;
+$navbar-link-vertical-spacing:          8px;
+$navbar-link-underline-height:          2px;
+$navbar-link-spacing:                   20px;
+
+$navbar-background:                     rgba(29, 126, 209, 0.5);
+$navbar-link-text-shadow: 				0px 2px 1px rgba(0, 0, 0, 0.3);
+$navbar-link-color:             		white;
+$navbar-link-hover-color:       		lighten($navbar-link-color, 10%);
+$navbar-link-hover-underline:   		$navbar-link-color;
+
+$navbar-link-active-color:      		$navbar-link-color;
+$navbar-link-active-underline:  		$navbar-link-color;
+
+$navbar-brand-color:            		$brand-color;
+$navbar-brand-hover-color:      		darken($brand-color, 15%);
+
+// User menu
+$usermenu-button-bg:                    $navbar-background;
+$usermenu-button-hover-bg:              darken($usermenu-button-bg, 8%);
+
+// Footer
+$footer-height:             80px;
+$footer-border-color:       $border-color;
+$footer-text-color:			$text-secondary-color;
+$footer-link-color:			$footer-text-color;
+$footer-link-hover-color:	darken($footer-link-color, 10%);
+
+// ----------------------------------
+//   Buttons
+// ----------------------------------
+$button-bg-color:		    #f1f1f1;
+$button-hover-color:		darken($button-bg-color, 10%);
+$button-border:				darken($button-bg-color, 10%);
+$button-shadow:				0 2px 2px 0 rgba(0, 0, 0, 0.12),
+                            0 1px 5px 0 rgba(0, 0, 0, 0.1);
+
+// Variations
+
+$button-primary-color:         white;
+$button-primary-bg:            #5fbc49;
+
+$button-brand-color:           white;
+$button-brand-bg:              $brand-color;
+
+// State
+$button-info-color:            white;
+$button-info-bg:               $brand-info;
+$button-success-color:         white;
+$button-success-bg:            $brand-success;
+$button-warning-color:         white;
+$button-warning-bg:            $brand-warning;
+$button-danger-color:          white;
+$button-danger-bg:             $brand-danger;
+
+// Company.
+
+$button-google-color:          white;
+$button-google-bg:             $google-color;
+$button-google-border:         darken($button-google-bg, 5%);
+
+$button-github-color:          white;
+$button-github-bg:             $github-color;
+$button-github-border:         darken($button-github-bg, 5%);
+
+$button-gitlab-color:          white;
+$button-gitlab-bg:             $gitlab-color;
+
+$button-linkedin-color:        white;
+$button-linkedin-bg:           $linkedin-color;
+
+// ----------------------------------
+//   Shadows
+// ----------------------------------
+
+$block-shadow:                  0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+$block-shadow-2:                0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12);
+$block-shadow-3:                0 3px 3px 0 rgba(0, 0, 0, 0.16);
+
+// ----------------------------------
+//   Dropdown
+// ----------------------------------
+
+$dropdown-shadow:           0 2px 4px rgba(0,0,0,0.1);
+
+// ----------------------------------
+//   Blankslate
+// ----------------------------------
+
+$blankslate-bg:         $gray-lightest;
+$blankslate-color:      $text-secondary-color;
+$blankslate-border:     $border-color;
+$blankslate-spacing:    25px 10px;
+$blankslate-spacing-sm: 15px 5px;
+
+// ----------------------------------
+//   Spacer
+// ----------------------------------
+
+$spacer-color: $gray-light;
+$spacer-margin: 1em 0;
+
+// ----------------------------------
+//   Pagination
+// ----------------------------------
+
+$pagination-color:          $text-color;
+$pagination-border:         $border-color;
+$pagination-hover:          $hover-color;
+
+$pagination-active-color:   $white;
+$pagination-active-bg:      $brand-color;
+$pagination-active-border:  darken($brand-color, 5%);
+
+// ----------------------------------
+//   Section
+// ----------------------------------
+
+$section-bg:        $foreground-color;
+$section-border:    rgb(200, 200, 200);
+$section-padding:   20px;
+
+// ----------------------------------
+//   Callback list
+// ----------------------------------
+
+$callback-list-hover-color:         $gray-lightest;
+$callback-list-info-color:          $text-secondary-color;
+
+$callback-list-border-size:         1px;
+$callback-list-border-color:        $gray-light;
+$callback-list-border-radius:       3px;
+
+$callback-list-name-text-size:      24px;
+$callback-list-name-color:          $text-color;
+$callback-list-name-hover-color:    $link-color;
+
+$callback-list-arrow-color:         $callback-list-border-color;
+
+// ----------------------------------
+//   Request list
+// ----------------------------------
+
+$request-item-color:                $text-color;
+$request-item-secondary-color:      $text-secondary-color;
+$request-item-background:           transparent;
+$request-item-border-color:         $gray-light;
+
+$request-item-active-color:         $request-item-color;
+$request-item-active-background:    $gray-lightest;
+$request-item-active-border-color:  $request-item-border-color;
+$request-item-hover-background:     $request-item-active-background;
+
+$request-detail-background:         lighten($brand-color, 45%);
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
new file mode 100644
index 0000000..4bb2f13
--- /dev/null
+++ b/app/assets/sass/application.scss
@@ -0,0 +1,44 @@
+
+// ---------------------------
+//  Bootstrap & Fonts
+// ---------------------------
+
+@import "bootstrap-custom";
+@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
+
+// ---------------------------
+//  Site
+// ---------------------------
+
+// variables & mixins.
+@import "variables";
+@import "mixins";
+
+// Base
+@import "base/global";
+@import "base/typography";
+
+// Layout
+@import "layout/sections";
+@import "layout/navigation";
+@import "layout/masthead";
+@import "layout/footer";
+
+// Components
+@import "components/url";
+@import "components/icon";
+@import "components/button";
+@import "components/badge";
+@import "components/section";
+@import "components/spacer";
+@import "components/pagination";
+@import "components/blankslate";
+@import "components/request-item";
+@import "components/callback-list";
+
+// Views
+@import "views/landingpage";
+@import "views/about";
+@import "views/login";
+@import "views/register";
diff --git a/app/assets/sass/base/_global.scss b/app/assets/sass/base/_global.scss
new file mode 100644
index 0000000..a507247
--- /dev/null
+++ b/app/assets/sass/base/_global.scss
@@ -0,0 +1,5 @@
+
+html {
+    position: relative;
+    min-height: 100%;
+}
diff --git a/app/assets/sass/base/_typography.scss b/app/assets/sass/base/_typography.scss
new file mode 100644
index 0000000..93ac4c4
--- /dev/null
+++ b/app/assets/sass/base/_typography.scss
@@ -0,0 +1,14 @@
+
+// Section header (part of .section)
+
+.hdr-center {
+    display: inline-block;
+    padding: 20px 80px;
+    margin: 30px auto;
+    border-bottom: 2px solid $border-color;
+}
+
+.text-github { color: $github-color; }
+.text-gitlab { color: $gitlab-color; }
+.text-google { color: $google-color; }
+.text-linkedin { color: $linkedin-color; }
diff --git a/app/assets/sass/components/_badge.scss b/app/assets/sass/components/_badge.scss
new file mode 100644
index 0000000..46107e7
--- /dev/null
+++ b/app/assets/sass/components/_badge.scss
@@ -0,0 +1,18 @@
+
+.badge {
+    display: inline-block;
+    padding: .2em .4em;
+    line-height: 1;
+    text-align: center;
+    border-radius: 2px;
+    vertical-align: baseline;
+
+    &:empty {
+        display: none;
+    }
+
+    &-primary {
+        color: white;
+        background-color: $brand-color;
+    }
+}
diff --git a/app/assets/sass/components/_blankslate.scss b/app/assets/sass/components/_blankslate.scss
new file mode 100644
index 0000000..8220f6f
--- /dev/null
+++ b/app/assets/sass/components/_blankslate.scss
@@ -0,0 +1,36 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.blankslate {
+    border-radius: 4px;
+    @include box-shadow(inset 0 0 4px rgba(0,0,0, .1));
+    border: solid 1px $blankslate-border;
+
+    color: $blankslate-color;
+    background-color: $blankslate-bg;
+    padding: $blankslate-spacing;
+
+    h3, p {
+        text-align: center;
+    }
+
+    :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// ----------------------------------
+//  Variants
+// ----------------------------------
+
+
+//    Sizes
+// ----------------------------------
+.blankslate-sm {
+    padding: $blankslate-spacing-sm;
+}
diff --git a/app/assets/sass/components/_button.scss b/app/assets/sass/components/_button.scss
new file mode 100644
index 0000000..8c00811
--- /dev/null
+++ b/app/assets/sass/components/_button.scss
@@ -0,0 +1,76 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.button {
+    display: inline-block;
+    padding: 0.5rem 2rem;
+    cursor: pointer;
+    vertical-align: middle;
+    // Resets for <button> elements.
+    border: 1px solid transparent;
+    transition: all .2s ease-in-out;
+
+    &:active,
+    &:hover {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+}
+
+// ----------------------------------
+//  Variants
+// ----------------------------------
+
+
+//    Round button
+// ----------------------------------
+
+.button-round {
+    padding: 0;
+    @include button-circle(40px);
+}
+
+//    Colors
+// ----------------------------------
+
+.button-default { @include button-variant($text-color, $button-bg-color); }
+.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
+.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
+.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }
+
+.button-info { @include button-variant($button-info-color, $button-info-bg); }
+.button-success { @include button-variant($button-success-color, $button-success-bg); }
+.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
+.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }
+
+.button-github { @include button-variant($button-github-color, $button-github-bg); }
+.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
+.button-google { @include button-variant($button-google-color, $button-google-bg); }
+.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }
+
+//    Outline
+// ----------------------------------
+
+.button-outline-primary { @include button-outline-variant($text-color, $button-bg-color); }
+
+//    Sizes
+// ----------------------------------
+
+.button-large { font-size: $text-size-large; }
+.button-small { font-size: 0.6em; }
+
+//    Block button
+// ----------------------------------
+
+.button-block {
+    display: block;
+    width: 100%;
+}
diff --git a/app/assets/sass/components/_callback-list.scss b/app/assets/sass/components/_callback-list.scss
new file mode 100644
index 0000000..c2a4b5b
--- /dev/null
+++ b/app/assets/sass/components/_callback-list.scss
@@ -0,0 +1,78 @@
+
+
+.callback-list-item {
+    @extend .clearfix;
+    position: relative;
+    padding: .6em 1em;
+
+    &:hover {
+        background: $gray-lightest;
+    }
+
+    // Borders.
+    // --------
+
+    border: solid $callback-list-border-color $callback-list-border-size;
+
+    // Remove top border for all except first child.
+    &:not(:first-child) {
+        border-top: 0;
+    }
+
+    // top border radius for first child.
+    &:first-child {
+        border-top-left-radius: $callback-list-border-radius;
+        border-top-right-radius: $callback-list-border-radius;
+    }
+
+    // bottom border radius for first child.
+    &:last-child {
+        border-bottom-left-radius: $callback-list-border-radius;
+        border-bottom-right-radius: $callback-list-border-radius;
+    }
+
+    // Sections.
+    // ---------
+
+    &-header {
+        margin-bottom: .4em;
+    }
+
+    &-info {
+        font-size: $font-size-small;
+        color: $callback-list-info-color;
+
+        > span {
+            display: inline-block;
+            margin-right: 1.6em;
+        }
+
+        .icon {
+            @include icon-vcenter();
+            font-size: 20px;
+            padding: .2em;
+        }
+    }
+
+    &-name {
+        margin-right: 1em;
+        font-size: $callback-list-name-text-size;
+        color: $callback-list-name-color;
+
+        &:hover {
+            color: $callback-list-name-hover-color;
+            text-decoration: none;
+        }
+    }
+
+    &-arrow {
+        color: $callback-list-arrow-color;
+        position: absolute;
+        right: .8em;
+        top: 50%;
+        > .icon {
+            font-size: 35px;
+            transform: translateY(-50%);
+        }
+    }
+}
diff --git a/app/assets/sass/components/_icon.scss b/app/assets/sass/components/_icon.scss
new file mode 100644
index 0000000..62b1582
--- /dev/null
+++ b/app/assets/sass/components/_icon.scss
@@ -0,0 +1,4 @@
+
+.icon {
+    display: inline-block;
+}
diff --git a/app/assets/sass/components/_pagination.scss b/app/assets/sass/components/_pagination.scss
new file mode 100644
index 0000000..13c63bc
--- /dev/null
+++ b/app/assets/sass/components/_pagination.scss
@@ -0,0 +1,33 @@
+
+.pagination {
+    @extend .nav;
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    > li {
+        display: inline-block;
+
+        .middle, a {
+            padding: .4em .8em;
+            margin: 0 .4em;
+        }
+
+        a {
+            @extend .button;
+            display: block;
+            border: solid 1px $pagination-border;
+            color: $pagination-color;
+
+            &:hover {
+                color: $pagination-color;
+                background-color: $pagination-hover;
+            }
+        }
+
+        &.active a {
+            color: $pagination-active-color;
+            background: $pagination-active-bg;
+            border-color: $pagination-active-border;
+        }
+    }
+}
diff --git a/app/assets/sass/components/_request-item.scss b/app/assets/sass/components/_request-item.scss
new file mode 100644
index 0000000..4649e75
--- /dev/null
+++ b/app/assets/sass/components/_request-item.scss
@@ -0,0 +1,126 @@
+
+.request-list {
+
+
+    &-item {
+
+        // Header Section
+        // --------------
+        &-header {
+            display: block;
+            padding: .5em 1em;
+
+            color: $request-item-active-color;
+            background-color: $request-item-active-background;
+            border: 1px solid $request-item-active-border-color;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: $request-item-active-color;
+                text-decoration: none;
+            }
+
+            &.collapsed {
+                background-color: $request-item-background;
+
+                &:hover {
+                    background-color: $request-item-hover-background;
+                }
+
+                &:hover,
+                &:active,
+                &:focus {
+                    color: $request-item-color;
+                }
+            }
+
+            &-row {
+                display: block;
+                & + & {
+                    margin-top: .4em;
+                }
+            }
+
+            &-method,
+            &-uri,
+            &-type,
+            &-timestamp,
+            &-size,
+            &-ip {
+                display: inline-block;
+                .icon {
+                    margin: 0 .2em;
+                }
+            }
+
+            &-type,
+            &-timestamp,
+            &-size,
+            &-ip {
+                color: $request-item-secondary-color;
+                font-size: $font-size-small;
+            }
+
+            &-method {
+                font-weight: bold;
+            }
+
+            &-type,
+            &-size {
+                width: 30%;
+            }
+
+            &-ip,
+            &-timestamp {
+                float: right;
+            }
+        }
+
+        // Detail section
+        // --------------
+        &-detail {
+
+            background-color: $request-detail-background;
+            border: 1px solid $request-item-border-color;
+            padding: 1em;
+
+            &-headers {
+                @extend .table, .table-bordered;
+                background: white;
+
+                &-key {
+                    width: 30%;
+                }
+            }
+
+            &-body {
+                margin-bottom: 1em;
+            }
+
+            &-button {
+                @extend .button, .button-brand;
+                display: block;
+                margin-bottom: 1em;
+            }
+        }
+
+        // Border overrides
+        // ----------------
+
+        // Remove bottom border from header for all but last request-item.
+        &:not(:last-child) &-header {
+            border-bottom: 0;
+        }
+
+        // Remove top border from detail element for last request-item.
+        &:last-child &-detail {
+            border-top: 0;
+        }
+
+        // Remove bottom border from detail element for all but last request-item.
+        &:not(:last-child) &-detail {
+            border-bottom: 0;
+        }
+    }
+}
diff --git a/app/assets/sass/components/_section.scss b/app/assets/sass/components/_section.scss
new file mode 100644
index 0000000..02ff403
--- /dev/null
+++ b/app/assets/sass/components/_section.scss
@@ -0,0 +1,24 @@
+
+// ---------------------------
+//  Section
+// ---------------------------
+
+.section {
+    position: relative;
+    background-color: $section-bg;
+    padding: $section-padding;
+    margin-bottom: 60px;
+    border-radius: 2px;
+    @include box-shadow($block-shadow-3);
+
+    &-header {
+        text-align: center;
+        margin-bottom: 15px;
+
+        > h1 {
+            display: inline-block;
+            border-bottom: 2px solid $border-color;
+            padding: 20px 80px;
+        }
+    }
+}
diff --git a/app/assets/sass/components/_spacer.scss b/app/assets/sass/components/_spacer.scss
new file mode 100644
index 0000000..f626ea0
--- /dev/null
+++ b/app/assets/sass/components/_spacer.scss
@@ -0,0 +1,6 @@
+
+.spacer {
+    display: block;
+    border-bottom: 1px solid $gray-light;
+    margin: $spacer-margin;
+}
diff --git a/app/assets/sass/components/_url.scss b/app/assets/sass/components/_url.scss
new file mode 100644
index 0000000..9006d2c
--- /dev/null
+++ b/app/assets/sass/components/_url.scss
@@ -0,0 +1,8 @@
+
+.url {
+
+    &-query,
+    &-fragment {
+        color: #9c9c9c;
+    }
+}
diff --git a/app/assets/sass/layout/_footer.scss b/app/assets/sass/layout/_footer.scss
new file mode 100644
index 0000000..6d6d440
--- /dev/null
+++ b/app/assets/sass/layout/_footer.scss
@@ -0,0 +1,40 @@
+
+.footer {
+    @extend .container;
+    display: flex;
+    align-items: center;
+    min-height: $footer-height;
+
+    a {
+        color: $footer-link-color;
+        font-weight: 700;
+        &:hover,
+        &:active {
+            color: $footer-link-hover-color;
+        }
+    }
+
+    &-left,
+    &-right {
+        @include make-xs-column(5);
+    }
+
+    &-middle {
+        @include make-xs-column(2);
+    }
+
+    &-right {
+        text-align: right;
+    }
+
+    // Top button
+    &-button-top {
+        @extend .center-block;
+        @extend .button;
+        @extend .button-round;
+        @include button-variant($footer-link-color, white, white);
+
+        font-size: 1.5em;
+        box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
+    }
+}
diff --git a/app/assets/sass/layout/_masthead.scss b/app/assets/sass/layout/_masthead.scss
new file mode 100644
index 0000000..27e7fb2
--- /dev/null
+++ b/app/assets/sass/layout/_masthead.scss
@@ -0,0 +1,26 @@
+
+.masthead {
+    @extend .container;
+    display: block;
+    text-align: center;
+    padding-top: 2em;
+    padding-bottom: 4em;
+
+    h1, p {
+        color: $text-light-color;
+        text-shadow: $header-text-shadow;
+    }
+
+    h1 {
+        font-size: 48px;
+    }
+
+    p {
+        font-size: 22px;
+    }
+
+    .masthead-get-started-button {
+        margin-top: 2em;
+        @include button-outline-variant(black, white);
+    }
+}
diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss
new file mode 100644
index 0000000..09cb434
--- /dev/null
+++ b/app/assets/sass/layout/_navigation.scss
@@ -0,0 +1,157 @@
+
+// ----------------------------------
+//   Navigation
+// ----------------------------------
+
+.navigation {
+
+    // General styling (for all viewport widths)
+    @extend .clearfix;
+    @extend .container;
+
+    min-height:     $navbar-height;
+
+    color:          $navbar-link-color;
+    text-shadow:	$navbar-link-text-shadow;
+    font-size:      $font-size-navigation;
+
+    // Links inside navigation.
+    a {
+        color: $navbar-link-color;
+        &:hover,
+        &:active {
+            color: $navbar-link-hover-color;
+            text-decoration: none;
+        }
+    }
+
+    // Menu button
+    // -------------------
+    .menu-button {
+        @extend .button;
+        @include button-variant(white, #242424);
+        margin-top: 8px;
+        font-size: 24px;
+
+        // Hide for larger view-ports.
+        @media (min-width: $navbar-breakpoint-min) {
+            display: none !important;
+        }
+    }
+
+    // Menu
+    // -------------------
+    &-menu ul {
+        @extend .nav;
+
+        > li {
+
+            // Inline list for larger viewports.
+            @media (min-width: $navbar-breakpoint-min) {
+
+                display: inline-block;
+
+                a {
+                    display: block;
+                    @include navbar-vertical-align($line-height-computed + ($navbar-link-vertical-spacing * 2));
+                    padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing;
+                    line-height: $line-height-computed;
+
+                    margin-left: ($navbar-link-spacing / 2);
+                    margin-right: ($navbar-link-spacing / 2);
+
+                    &:hover {
+                        color: $navbar-link-hover-color;
+                        box-shadow: 0 (-$navbar-link-underline-height)
+                                    0 ($navbar-link-hover-underline) inset;
+                    }
+                }
+
+                &.active a {
+                    color: $navbar-link-active-color;
+                    box-shadow: 0 (-$navbar-link-underline-height)
+                                0 ($navbar-link-active-underline) inset;
+                }
+            }
+        }
+
+        // Only for small viewports.
+        @media (max-width: $navbar-breakpoint-min) {
+
+            margin: 1em 0;
+
+            > li {
+                a {
+                    display: block;
+                    padding: .5em 1em;
+
+                    background: $navbar-background;
+                    &:hover {
+                        background: darken($navbar-background, 10%);
+                    }
+                }
+
+                &:not(:last-child) {
+                    margin-bottom: 1px;
+                }
+            }
+        }
+    }
+
+    // Always show menu for larger viewport.
+    @media (min-width: $navbar-breakpoint-min) {
+        &-menu.collapse {
+            display: block;
+        }
+    }
+
+    // User Menu
+    // -------------------
+    &-user-menu {
+        @extend .nav, .pull-right;
+        margin-top: 10px;
+
+        &-login {
+            padding-top: .3em;
+            padding-bottom: .3em;
+        }
+
+        &-dropdown {
+            position: relative;
+
+            &-button {
+                display: inline-block;
+                padding: .3em .8em;
+                background: $usermenu-button-bg;
+                border-radius: $border-radius-base;
+
+                &:hover {
+                    background: $usermenu-button-hover-bg;
+                }
+            }
+
+            &-list {
+                @extend .dropdown-menu;
+                @extend .dropdown-menu-right;
+
+                vertical-align: middle;
+                > li > a {
+                    display: flex;
+                    align-items: center;
+                }
+
+                .icon {
+                    font-size: 1.5em;
+                    margin-right: .4em;
+                }
+
+                text-shadow: none;
+                @include box-shadow($dropdown-shadow);
+            }
+
+            &.open &-list {
+                display: inline-block;
+            }
+        }
+    }
+}
diff --git a/app/assets/sass/layout/_sections.scss b/app/assets/sass/layout/_sections.scss
new file mode 100644
index 0000000..b53a4cf
--- /dev/null
+++ b/app/assets/sass/layout/_sections.scss
@@ -0,0 +1,43 @@
+
+
+// ----------------------------------
+//  Head section
+// ----------------------------------
+
+
+.head-section {
+    background-color: $brand-color;
+    background-image: url(#{$image-path}/header-pattern.jpg);
+    margin-bottom: 60px;
+
+    .top-section {
+        background-color: $navbar-background;
+    }
+}
+
+
+// ----------------------------------
+//  Content section
+// ----------------------------------
+
+
+.content-section {
+    @extend .container;
+    margin-bottom: $footer-height;
+}
+
+
+// ----------------------------------
+//  Footer section
+// ----------------------------------
+
+
+.footer-section {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: $footer-text-color;
+    border-top: 1px solid #bcbcbc;
+    background-color: $footer-border-color;
+    background-image: url(#{$image-path}/footer-pattern.jpg);
+}
diff --git a/app/assets/sass/mixins/_button.scss b/app/assets/sass/mixins/_button.scss
new file mode 100644
index 0000000..cc79dea
--- /dev/null
+++ b/app/assets/sass/mixins/_button.scss
@@ -0,0 +1,64 @@
+
+@mixin button-color($color, $background-color, $hover-color: darken($background-color, 10%)) {
+
+    &:not(.button-ghost) {
+
+        color: $color;
+        background-color: $background-color;
+
+        &:hover {
+            color: $color;
+            background-color: $hover-color;
+        }
+    }
+
+    /* .button-ghost& {
+        border: 2px solid $background-color;
+        color: $background-color;
+    } */
+}
+
+@mixin button-variant($color, $background, $hover: darken($background, 10%)) {
+
+    color: $color;
+    background-color: $background;
+
+    &:hover,
+    &:active {
+        color: $color;
+        background-color: $hover;
+    }
+}
+
+@mixin button-outline-variant($color, $background) {
+
+    box-shadow: inset 0 0 0 2px $background;
+    color: $background;
+
+    &:hover,
+    &:active {
+        color: $color;
+        background-color: $background;
+    }
+}
+
+@mixin button-circle($width) {
+    display: block;
+    text-align:     center;
+    width:          $width;
+    height:         $width;
+    line-height:    $width;
+    border-radius:  50%;
+}
+
+// Rectangular button.
+@mixin rect-button($color, $hover-color: darken($color, 20%)) {
+    border-radius: 0;
+    border: 2px solid $color;
+    color: $color;
+    &:hover {
+        color: $hover-color;
+        border-color: $hover-color;
+    }
+}
+
diff --git a/app/assets/sass/mixins/_icon-vcenter.scss b/app/assets/sass/mixins/_icon-vcenter.scss
new file mode 100644
index 0000000..fc30808
--- /dev/null
+++ b/app/assets/sass/mixins/_icon-vcenter.scss
@@ -0,0 +1,5 @@
+
+@mixin icon-vcenter() {
+    margin-top: -0.2em;
+    vertical-align: middle;
+}
diff --git a/app/assets/sass/views/_about.scss b/app/assets/sass/views/_about.scss
new file mode 100644
index 0000000..62579ca
--- /dev/null
+++ b/app/assets/sass/views/_about.scss
@@ -0,0 +1,13 @@
+
+.about {
+    @extend .row;
+
+    &-main {
+        @include make-sm-column(8);
+    }
+
+    &-reference {
+        @include make-sm-column(4);
+    }
+}
+
diff --git a/app/assets/sass/views/_landingpage.scss b/app/assets/sass/views/_landingpage.scss
new file mode 100644
index 0000000..277d5bb
--- /dev/null
+++ b/app/assets/sass/views/_landingpage.scss
@@ -0,0 +1,43 @@
+
+// ----------------------------------
+//   Feature section
+// ----------------------------------
+
+.feature-section {
+    @extend .section;
+
+    > div + div {
+        margin-top: 2em;
+    }
+
+    .steps {
+        @extend .row;
+
+        .steps-img {
+            @extend .center-block;
+            width: 270px;
+            height: 220px;
+        }
+
+        .steps-step1 .steps-img {
+            background-image: url(#{$image-path}/step1.png);
+        }
+        .steps-step2 .steps-img {
+            background-image: url(#{$image-path}/step2.png);
+        }
+        .steps-step3 .steps-img  {
+            background-image: url(#{$image-path}/step3.png);
+        }
+
+        .steps-step1,
+        .steps-step2,
+        .steps-step3 {
+            @include make-md-column(4);
+            @extend .text-center;
+        }
+    }
+
+    .call-to-action {
+        @extend .text-center;
+    }
+}
diff --git a/app/assets/sass/views/_login.scss b/app/assets/sass/views/_login.scss
new file mode 100644
index 0000000..4a978d9
--- /dev/null
+++ b/app/assets/sass/views/_login.scss
@@ -0,0 +1,24 @@
+
+.login-container {
+    @extend .center-block;
+    width: 400px;
+
+    h3 {
+        width: 100%;
+        text-align: center;
+    }
+
+    .oauth > a {
+
+        font-size: $font-size-large;
+        width: 100%;
+        margin-bottom: 4px;
+        text-align: center;
+
+        .icon {
+            @include icon-vcenter();
+            font-size: 24px;
+            margin-right: .2em;
+        }
+    }
+}
diff --git a/app/assets/sass/views/_register.scss b/app/assets/sass/views/_register.scss
new file mode 100644
index 0000000..28fcfc5
--- /dev/null
+++ b/app/assets/sass/views/_register.scss
@@ -0,0 +1,6 @@
+
+.register {
+    @extend .section;
+    @include center-block();
+    width: 60%;
+}