Git init

_assets/sass/base/_base.scss

@@ -0,0 +1,43 @@
+html {
+  color: $black;
+  margin: 0 0 40px;
+  font: 400 13px/1.4 'Open Sans', arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+button,
+.button {
+  &:hover {
+    opacity: .8;
+  }
+}
+
+label,
+button,
+input {
+  cursor: pointer;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+h1 {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+
+h4,
+h3 {
+  display: block;
+  width: 100%;
+  margin: 40px 0 10px;
+  font-size: 16px;
+  font-weight: 600;
+}

_assets/sass/base/_reset.scss

@@ -0,0 +1,88 @@
+* {
+  box-sizing: border-box;
+}
+
+main {
+  display: block;
+}
+
+html, body, div, span, applet, object, iframe, p, blockquote,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, button, pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: 0;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+svg {
+  fill: currentColor;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  border-style: none;
+  max-width: 100%;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+[hidden] {
+  display: none;
+}

_assets/sass/main.scss

@@ -0,0 +1,25 @@
+@charset "utf-8";
+
+@import
+  // Variables
+  "variables/colors",
+  "variables/layout",
+
+  // Mixins
+  "mixins/breakpoint",
+  "mixins/columns",
+  "mixins/rows",
+
+  // Base styles
+  "base/reset",
+  "base/base",
+
+  // Layouts
+
+  // Modules
+  "modules/wrapper",
+  "modules/buttons",
+  "modules/war",
+  "modules/hamburger",
+  "modules/header"
+;

_assets/sass/mixins/_breakpoint.scss

@@ -0,0 +1,27 @@
+/*
+ * Media query shorthand, to be used with variables from $site-breakpoints
+ * Defaults to min-width
+ * 
+ * Usage: @include mq(lg, min/max(optional) ) { ... }
+ */
+
+@function breakpoint-min($name, $breakpoints: $site-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin mq($name, $type: min) {
+  $min: breakpoint-min($name);
+
+  @if $min {
+    @if $type == max {
+        $min: $min - 1px;
+    }
+
+    @media ( #{$type}-width: $min ) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

_assets/sass/mixins/_columns.scss

@@ -0,0 +1,48 @@
+/*
+ * Generate grid cols
+ * 
+ */
+
+@mixin grid-col-padding ($gutter) {
+  padding-left: $gutter / 2;
+  padding-right: $gutter / 2;
+  /*
+   * Default columns align left width smallest width
+   */
+  flex: 0 0 auto;
+}
+
+@mixin grid-col-flex ($size) {
+  width: percentage($size / $column-count);
+  max-width: percentage($size / $column-count);
+  flex: 0 0 percentage($size / $column-count);
+}
+
+// generate paddings
+@each $breakpoint, $gutter in $column-gutter {
+  @include mq($breakpoint) {
+    #{$row-class} > * {
+      @include grid-col-padding($gutter);
+    }
+  }
+}
+
+// generate flex styles
+@each $breakpoint, $size in $site-breakpoints {
+  @include mq($breakpoint) {
+
+    $index: index($site-breakpoints, $breakpoint $size);
+
+    @for $i from 1 through $column-count {
+      // ignore first breakpoint class, e.g. .col instead of .col-sm
+      $className : if( $index > 1, 
+                       #{$column-class}-#{$breakpoint}-#{$i}, 
+                       #{$column-class}-#{$i} );
+
+      #{$className} {
+        @include grid-col-flex($i);
+      }
+    }
+
+  }
+}

_assets/sass/mixins/_rows.scss

@@ -0,0 +1,27 @@
+/*
+ * Generate grid rows
+ * 
+ * $row-class defines the row classname. E.G. .row
+ * $column-gutter sets the negative margins for each defined breakpoint.
+ * 
+ */
+
+@mixin row-gutters($gutter) {
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin row () {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $breakpoint, $gutter in $column-gutter {
+    @include mq($breakpoint) {
+      @include row-gutters($gutter);
+    }
+  }
+}
+
+#{$row-class} {
+  @include row();
+}

_assets/sass/modules/_buttons.scss

@@ -0,0 +1,17 @@
+.button {
+  padding: 6px 16px;
+  background: #349000;
+  color: #ffefbf;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-shadow: 0 1px 1px #000;
+  cursor: pointer;
+  border-radius: 40px;
+  border: 0;
+
+  &--danger {
+    background: #860602;
+    color: #fff;
+  }
+}

_assets/sass/modules/_hamburger.scss

@@ -0,0 +1,30 @@
+.hamburger {
+  position: fixed;
+  background: #fff;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+  overflow: auto;
+  border-right: 1px solid #E1E1E1;
+  transform: translateX(-100%);
+  transition: transform 250ms;
+
+  &.is-active {
+    transform: translateX(0%);
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  li {
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    margin-right: 8px;
+  }
+}

_assets/sass/modules/_header.scss

@@ -0,0 +1,37 @@
+header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #E1E1E1;
+
+  .hamburger-button {
+
+  }
+
+  .form {
+    display: flex;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      width: auto;
+      margin-right: 10px;
+    }
+
+    textarea {
+      resize: none;
+      overflow: hidden;
+      width: 112px;
+      height: 28px;
+      line-height: 1.4;
+      padding: 4px;
+      outline: none;
+    }
+
+    .button {
+      margin-left: 10px;
+    }
+  }
+}

_assets/sass/modules/_war.scss

@@ -0,0 +1,61 @@
+.war {
+  .row {
+    justify-content: center;
+  }
+
+  h4 {
+    margin-left: 8px;
+  }
+
+  .team {
+    display: flex;
+    align-items: center;
+    color: #666;
+    line-height: 1.2;
+    padding: 2px 8px;
+
+    &.is--hover {
+      outline: 2px solid gold;
+    }
+
+    &__details {
+      margin-left: 8px;
+    }
+
+    &__location {
+      display: block;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 11px;
+      color: #0079b3;
+      margin-bottom: 2px;
+    }
+  }
+
+  .best-team {
+    font-weight: 600;
+    color: black;
+  }
+
+  img {
+    max-width: 32px;
+    background: black;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin: 1px;
+    border: 1px solid grey;
+    display: none;
+  }
+
+  input[type="checkbox"] {
+    margin: 0 6px 0 0;
+    vertical-align: middle;
+  }
+
+  @include mq(xl) {
+    img {
+      display: inline-block;
+    }
+  }
+}

_assets/sass/modules/_wrapper.scss

@@ -0,0 +1,14 @@
+.wrapper {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: $wrapper-max-width;
+
+  @each $name, $size in $wrapper-gutter {
+    @include mq($name) {
+        padding-left: $size;
+        padding-right: $size;
+    }
+  }
+}

_assets/sass/variables/_colors.scss

@@ -0,0 +1,2 @@
+$black: #000;
+$white: #fff;

_assets/sass/variables/_layout.scss

@@ -0,0 +1,34 @@
+// Breakpoints
+
+$site-breakpoints: (
+  sm: 0px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1700px
+);
+
+
+// Columns and Rows
+
+$row-class: '.row';
+$column-class: '.col';
+$column-count : 12;
+
+$column-gutter : (
+  sm: 12px,
+  md: 16px,
+  lg: 32px,
+  xl: 32px,
+);
+
+
+// .wrapper container
+
+$wrapper-max-width: 100%;
+
+$wrapper-gutter : (
+  sm: 24px,
+  md: 32px,
+  lg: 48px,
+  xl: 48px
+);