Coding style decided

public/styles/components/_page.scss

@@ -0,0 +1,12 @@
+/*
+ *  Page
+ *    Styles for the base Page elements.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/05
+ */
+.c-page {
+  background: white;
+}

public/styles/elements/_a.scss

@@ -0,0 +1,19 @@
+/*
+ *  A
+ *    Base A/Anchor Seettings
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+a {
+  text-decoration: none;
+  color: $s-color--link;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: $s-color--link-hover;
+}

public/styles/elements/_headings.scss

@@ -0,0 +1,13 @@
+/*
+ *  Headings
+ *    Styles for headings 1 through 6
+ *
+ * Dependencies:
+ *    styles/settings/typography.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/5
+ */
+h1,h2,h3,h4,h5,h6 {
+  font-family: $s-font--stack-headings;
+}

public/styles/elements/all.scss

@@ -0,0 +1,10 @@
+/*
+ *  All
+ *    Styles and changes for the ALL HTML Elements
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+* {
+  box-sizing: border-box;
+}

public/styles/elements/body.scss

@@ -0,0 +1,15 @@
+/*
+ *  Body
+ *    Styles and changes for the body HTML element.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  
+  font-family: $s-font--stack-default;
+  font-size: $s-font--size--base;
+}

public/styles/elements/html.scss

@@ -0,0 +1,9 @@
+/*
+ *  HTML
+ *    Styles and changes for the HTML, HTML element.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+html {
+}

public/styles/index.scss

@@ -0,0 +1,58 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+@charset "UTF-8";
+
+//Settings
+@import './settings/colors.scss';
+@import './settings/responsive.scss';
+@import './settings/typography.scss';
+
+//Tools
+@import './tools/flex.scss';
+@import './tools/list.scss';
+@import './tools/prefix.scss';
+@import './tools/_transform.scss';
+@import './tools/_responsive.scss';
+
+//Resets
+
+//Elements
+@import './elements/all.scss';
+@import './elements/body.scss';
+@import './elements/html.scss';
+
+@import './elements/_a.scss';
+@import './elements/_headings.scss';
+
+//Objects
+@import './objects/_app.scss';
+@import './objects/_navbar.scss';
+
+//Components
+@import './components/_page.scss';
+
+//Vendor
+@import './vendor/_fonts.scss';
+
+//Trumps

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;
+    }
+  }
+}

public/styles/settings/colors.scss

@@ -0,0 +1,30 @@
+/*
+ *  Color Settings
+ *    Provides common color settings for use throughout the styles.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+
+//Pastel Colors
+$s-color--pastel-pink: #FCE9F1;
+$s-color--pastel-green: #E9FCF4;
+$s-color--pastel-orange: #FEECE8;
+$s-color--pastel-blue: #E8FAFE;
+$s-color--pastel-purple: #ECE8FE;
+
+//Swatch Colors
+$s-color--swatch-red: #FFB3BA;
+$s-color--swatch-orange: #FFDFBA;
+$s-color--swatch-yellow: #FFFFBA;
+$s-color--swatch-green: #BAFFC9;
+$s-color--swatch-blue: #BAE1FF;
+
+//Hyperlink Colors
+$s-color--link: #FC78DE;
+$s-color--link-hover: lighten($s-color--link, 10%);
+
+//Navbar Colors
+$s-color--navbar: rgba(0, 0, 0, 0.7);
+$s-color--navbar__text: white;
+$s-color--navbar__text-hover: #CCC;

public/styles/settings/responsive.scss

@@ -0,0 +1,43 @@
+/*
+ *  Responsive Settings
+ *    Provides settings for responsive tools
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.1 - 2018/01/31
+ */
+
+//Pixel size definitions
+$s-screen-xsmall: 500px;
+$s-screen-small: 750px;
+$s-screen-medium: 1000px;
+$s-screen-large: 1250px;
+$s-screen-xlarge: 1500px;
+
+//Size definitions
+$s-xsmall: 'xsmall';
+$s-small: 'small';
+$s-medium: 'medium';
+$s-large: 'large';
+$s-xlarge: 'xlarge';
+
+//Groups
+$s-xsmall-up: 'xsmall-up';
+$s-small-up: 'small-up';
+$s-medium-up: 'medium-up';
+$s-large-up: 'large-up';
+
+//Breakpoints
+$s-breakpoints: (
+  $s-xsmall     '(max-width: #{$s-screen-small - 1})',
+  $s-small      '(min-width: #{$s-screen-small}) and (max-width: #{$s-screen-medium - 1})',
+  $s-medium     '(min-width: #{$s-screen-medium}) and (max-width: #{$s-screen-large - 1})',
+  $s-large      '(min-width: #{$s-screen-large}) and (max-width: #{$s-screen-xlarge - 1})',
+  $s-xlarge     '(min-width: #{$s-screen-xlarge})',
+
+  $s-xsmall-up  '(min-width: #{$s-screen-xsmall})',
+  $s-small-up   '(min-width: #{$s-screen-small})',
+  $s-medium-up  '(min-width: #{$s-screen-medium})',
+  $s-large-up   '(min-width: #{$s-screen-large})'
+);

public/styles/settings/typography.scss

@@ -0,0 +1,16 @@
+/*
+ *  Typography Settings
+ *    Provides the type variables for use throughout the theme
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+
+$s-font--stack-default: 'Nanum Gothic', Arial, Helvetica, sans-serif;
+$s-font--stack-headings: 'Bitter', serif;
+$s-font--size--base: 16px;
+
+//Font Styles
+%s-font--style-button {
+  font-family: $s-font--stack-headings;
+}

public/styles/tools/_responsive.scss

@@ -0,0 +1,30 @@
+/*
+ *  Responsive Tools
+ *    Responsive tools
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/01/24
+ */
+
+@mixin t-media-query($media-query) {
+  $breakpoint-found: false;
+
+  @each $breakpoint in $s-breakpoints {
+    $name: nth($breakpoint, 1);
+    $declaration: nth($breakpoint, 2);
+
+    @if $media-query == $name and $declaration {
+      $breakpoint-found: true;
+
+      @media only screen and #{$declaration} {
+        @content;
+      }
+    }
+  }
+
+  @if $breakpoint-found == false {
+    @warn 'Breakpoint "#{$media-query}" does not exist';
+  }
+}

public/styles/tools/_transform.scss

@@ -0,0 +1,34 @@
+/*
+ *  Transform Mixins
+ *    Provides mixins for transforms
+ *
+ *  Dependencies:
+ *    styles/tools/prefix.scss - Used to prefix browser support
+ *
+ *  Version:
+ *    1.0.1 - 2018/01/24
+ */
+
+@mixin t-transform($transforms) {
+  @include t-prefix-property(transform, $transforms, moz o ms webkit spec);
+}
+
+@mixin t-translate($x, $y) {
+  @include t-transform(translate($x, $y));
+}
+
+@mixin t-translate-x($x) {
+  @include t-transform(translateX($x));
+}
+
+@mixin t-translate-y($y) {
+  @include t-transform(translateY($y));
+}
+
+@mixin t-scale($amt) {
+  @include t-transform(scale($amt));
+}
+
+@mixin t-rotate($amt) {
+  @include t-transform(rotate($amt));
+}

public/styles/tools/flex.scss

@@ -0,0 +1,159 @@
+/*
+ *  Flex
+ *    Used to simplify the flexbox and it's styles
+ *
+ *  Many of these mixins were taken from mastastealth/sass-flex-mixin:
+ *  https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+
+//Flex/Flexbox
+@mixin t-flexbox {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+%t-flexbox {
+  @include t-flexbox;
+}
+
+//Inline Flex/Inline Flexbox
+@mixin t-inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%t-inline-flex {
+  @include t-inline-flex;
+}
+
+//Align-items
+@mixin t-align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+
+//Align-self
+@mixin t-align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+//Align content
+@mixin t-align-content($value: stretch) {
+	// No Webkit Box Fallback.
+	-webkit-align-content: $value;
+	-moz-align-content: $value;
+	@if $value == flex-start {
+		-ms-flex-line-pack: start;
+	} @else if $value == flex-end {
+		-ms-flex-line-pack: end;
+	} @else {
+		-ms-flex-line-pack: $value;
+	}
+	align-content: $value;
+}
+
+//Justify Content
+@mixin t-justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+//Wrapping
+@mixin t-flex-wrap($value: nowrap) {
+  // No Webkit Box fallback.
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+//Flowing
+@mixin t-flex-flow($values: (row nowrap)) {
+  // No Webkit Box fallback.
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+//t-flex-direction
+@mixin t-flex-direction($value: row) {
+	@if $value == row-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: horizontal;
+	} @else if $value == column {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: vertical;
+	} @else if $value == column-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: vertical;
+	} @else {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: horizontal;
+	}
+	-webkit-flex-direction: $value;
+	-moz-flex-direction: $value;
+	-ms-flex-direction: $value;
+	flex-direction: $value;
+}
+
+//Flex Grow
+@mixin t-flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}

public/styles/tools/list.scss

@@ -0,0 +1,17 @@
+/*
+ *  List
+ *    Set of tools for lists
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/05
+ */
+%t-list-blank {
+  margin: 0;
+  padding: 0;
+}
+
+%t-list-litem-blank {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}

public/styles/tools/prefix.scss

@@ -0,0 +1,42 @@
+/*
+ *  Prefix Mixins
+ *    Mixins used to add browser prefix to values and/or properties
+ *
+ *  Version:
+ *    1.0.1 - 2018/02/01
+ */
+@mixin t-prefix-property($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    } @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    } @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    } @else if $prefix == o {
+      -o-#{$property}: $value;
+    } @else if $prefix == spec {
+      #{$property}: $value;
+    } @else  {
+      @warn 'Unrecognized prefix: #{$prefix}';
+    }
+  }
+}
+
+@mixin t-prefix-value($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      #{$property}: -webkit-#{$value};
+    } @else if $prefix == moz {
+      #{$property}: -moz-#{$value};
+    } @else if $prefix == ms {
+      #{$property}: -ms-#{$value};
+    } @else if $prefix == o {
+      #{$property}: -o-#{$value};
+    } @else if $prefix == spec {
+      #{$property}: #{$value};
+    } @else  {
+      @warn 'Unrecognized prefix: #{$prefix}';
+    }
+  }
+}

public/styles/vendor/_fonts.scss

@@ -0,0 +1,8 @@
+/*
+ *  Fonts
+ *    Imports the fonts used throughout the theme.
+ *
+ *  Version:
+ *    1.0.0 - 2018/01/23
+ */
+@import url('https://fonts.googleapis.com/css?family=Bitter|Nanum+Gothic');