Coding style decided

public/styles/objects/_app.scss

@@ -0,0 +1,22 @@
+/*
+ *  App
+ *    App styles for the app container.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+.o-app {
+  min-height: 100vh;
+
+  //Civil Twilight
+  &--style-civil-twilight {
+    //http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100
+    background: #bea9d0;
+    background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
+  }
+}

public/styles/objects/_navbar.scss

@@ -0,0 +1,82 @@
+/*
+ *  Navbar
+ *    Navigation bar at the top of the screen.
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/typography.scss
+ *    styles/tools/flex.scss
+ *    styles/tool/list.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+.o-navbar {
+  @extend %t-flexbox;
+  @include t-align-items(stretch);
+  background: $s-color--navbar;
+  color: white;
+
+
+  &__section {
+    border: 1px solid blue;
+
+    .is-stuck {
+      position: fixed;
+      width: 100%;
+    }
+  }
+
+  //Logo
+  &__logo-container {
+    width: 100%;
+    padding: 0.5em;
+    text-align: center;
+  }
+
+  &__logo {
+    width: 12em;
+  }
+
+  //Links
+  &__link {
+    @extend %s-font--style-button;
+    @include t-align-items(center);
+    display: none;
+    padding: 1em;
+    color: $s-color--navbar__text;
+
+    &:hover {
+      color: $s-color--navbar__text-hover;
+    }
+  }
+
+
+  @include t-media-query($s-xsmall-up) {
+    &__logo-container {
+      text-align: left;
+    }
+
+    &__section {
+      padding: 1em;
+    }
+
+    &__logo {
+      width: 10em;
+    }
+
+    &__link {
+      @include t-flexbox();
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__section {
+      padding: 3em;
+    }
+
+    &__logo {
+      width: 12em;
+    }
+  }
+}