Move legacy (S)CSS files to legacy folder

app/assets/stylesheets/legacy/_mediaqueries.scss

@@ -0,0 +1,33 @@
+$breakpoints-max: (
+  small: 600px,
+  medium: 960px,
+  large: 1280px
+);
+
+$breakpoints-min: (
+  small: 601px,
+  medium: 961px,
+  large: 1281px
+);
+
+@mixin media-max($screen-size) {
+  @if map-has-key($breakpoints-max, $screen-size) {
+    @media (max-width: map-get($breakpoints-max, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}
+
+@mixin media-min($screen-size) {
+  @if map-has-key($breakpoints-min, $screen-size) {
+    @media (min-width: map-get($breakpoints-min, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}

app/assets/stylesheets/legacy/_variables.scss

@@ -0,0 +1,13 @@
+$content-width: 800px;
+$content-max-width: 100%;
+
+$text-color-body: #222;
+$text-color-discreet: #888;
+
+$background-color-notice: #efffc4;
+$background-color-alert: #fff4c2;
+
+$color-blue: #0d4f99;
+$color-purple: #8955a0;
+$color-red-bright: #c00;
+$color-red-dark: #990c0e;

app/assets/stylesheets/legacy/layout.scss

@@ -0,0 +1,149 @@
+@import "variables";
+@import "mediaqueries";
+
+#wrapper {
+  width: 100%;
+  text-align: center;
+
+  > header {
+    margin: 0 auto;
+    padding: 4rem 0;
+    text-align: center;
+    background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
+                url('/img/bg-1.jpg');
+    background-size: cover;
+
+    @include media-max(small) {
+      padding: 3rem 0;
+    }
+
+    h1 {
+      color: #fff;
+
+      span.project-name {
+        display: none;
+      }
+
+      span.icon {
+        svg {
+          display: inline-block;
+          height: 1.875rem;
+          vertical-align: top;
+          width: auto;
+        }
+
+        margin-right: 0.5rem;
+      }
+    }
+
+    p.current-user {
+      color: rgba(255,255,255,0.6);
+
+      @include media-max(small) {
+        font-size: 0.85rem;
+      }
+    }
+
+    a {
+      color: rgba(255,255,255,0.6);
+      transition: color 0.1s linear;
+
+      &:hover, &:active {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.flash-msg {
+  width: 100%;
+  text-align: center;
+  padding: 2rem 0;
+
+  &.notice {
+    background: $background-color-notice;
+  }
+
+  &.alert {
+    background: $background-color-alert;
+  }
+}
+
+main {
+  width: $content-width;
+  max-width: $content-max-width;
+  margin: 4rem auto 6rem auto;
+  text-align: left;
+
+  @include media-max(medium) {
+    max-width: 90%;
+  }
+
+  @include media-max(small) {
+    margin: 3rem auto;
+  }
+
+  p {
+    line-height: 1.5rem;
+    margin-bottom: 1rem;
+
+    &.notice {
+      text-align: center;
+    }
+  }
+
+  ul {
+    margin-bottom: 1.5rem;
+
+    li {
+      line-height: 1.5rem;
+    }
+  }
+
+  section {
+    margin-bottom: 3rem;
+
+    h2 {
+      display: none;
+    }
+  }
+
+  table {
+    width: 100%;
+
+    th, td {
+      &.hide-small {
+        @include media-max(small) {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      color: $text-color-discreet;
+      font-weight: normal;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      padding-bottom: 0.825rem;
+    }
+
+    td {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+}
+
+.grid {
+  display: grid;
+
+  &.services {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-row-gap: 1rem;
+    grid-column-gap: 2rem;
+
+    @include media-max(small) {
+      grid-template-columns: 1fr;
+    }
+  }
+}

app/assets/stylesheets/legacy/main_nav.scss

@@ -0,0 +1,54 @@
+@import "variables";
+@import "mediaqueries";
+
+#main-nav {
+  width: 100%;
+  text-align: center;
+  background-color: #efefef;
+
+  .wrapper {
+    width: $content-width;
+    max-width: $content-max-width;
+    margin: 0 auto;
+  }
+
+  ul {
+    @include media-max(large) {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    }
+
+    li {
+      @include media-min(large) {
+        display: inline;
+      }
+
+      @include media-max(large) {
+        display: block;
+      }
+
+      a {
+        display: inline-block;
+        padding: 1.5rem 2rem;
+        text-decoration: none;
+        color: $text-color-discreet;
+
+        @include media-max(large) {
+          display: block;
+          text-align: center;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        @include media-max(small) {
+          font-size: 0.85rem;
+        }
+
+        &.active {
+          color: $text-color-body;
+          border-bottom: 2px solid #4ea2df;
+        }
+      }
+    }
+  }
+}