Add template and settings for demosite

assets/scss/foundation.scss

@@ -7,24 +7,30 @@
   Licensed under MIT Open Source
 */
 
+
 //  Settings
 @import "global/settings"; // Foundation settings file.
+@import "global/demosite-settings"; // These settings are only used for the demosite. Feel free to remove.
 
 // Foundation mixins & browser resets
 @import '../components/foundation-sites/scss/foundation';
 
+
 // WP overrides
 @import "global/wp-admin"; // Fix issues with wp-admin bar positioning
 @import "global/wp-overrides"; // Override the default WordPress styling for some elements
 @import "global/accessibility";
 
+
 // Third-party libraries
 @import 'font-awesome';
 @import 'motion-ui';
 
+
 // Foundation global styles
 @include foundation-global-styles;
 
+
 // Individual foundation components
 @include foundation-grid;
 // @include foundation-flex-grid;
@@ -90,3 +96,4 @@
 // Templates
 @import "templates/front";
 @import "templates/kitchen-sink";
+@import "templates/demosite"; // This template is used for the demosite. Feel free to remove.

assets/scss/global/_demosite-settings.scss

@@ -0,0 +1,10 @@
+$dark-grey: #2c3840;
+$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$offcanvas-background: $dark-grey;
+$titlebar-background: $dark-grey;
+$titlebar-color: $white;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$topbar-padding: 0;
+$topbar-background: $dark-grey;
+$topbar-submenu-background: $dark-grey;

assets/scss/templates/_demosite.scss

@@ -0,0 +1,73 @@
+// Mobile menu
+.off-canvas {
+  > ul.menu {
+    height: 100vh;
+    padding: 1rem;
+
+    a {
+      color: $white;
+      font-weight: 600;
+      font-size: rem-calc(18);
+      opacity: .75;
+    }
+
+    .is-accordion-submenu-parent > a::after {
+      display: block;
+      width: 0;
+      height: 0;
+      border: inset 6px;
+      content: '';
+      border-bottom-width: 0;
+      border-top-style: solid;
+      border-color: $white transparent transparent;
+      position: absolute;
+      top: 50%;
+      margin-top: -3px;
+      right: 1rem;
+      }
+  }
+
+  .menu .active > a { background-color: lighten($dark-grey, 10%); }
+
+}
+
+.title-bar-title {
+  a {
+    font-size: 1rem;
+    color: #B9B9B9;
+  }
+}
+
+// Tablet and desktop menu
+.top-bar {
+
+  .top-bar-title a {
+    font-size: 1rem;
+    color: #B9B9B9;
+    padding-left: 1rem;
+    line-height: 1.8;
+  }
+
+  .menu a {
+    color: #e6e6e6;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-weight: bold;
+    font-size: 0.8rem;
+    line-height: 1;
+
+    &:hover:not(.button) {
+      background-color: #42525D;
+    }
+  }
+
+  .menu .active > a { background-color: lighten($dark-grey, 10%); }
+
+  .menu>li:not(.menu-text)>a { padding: 1rem; }
+  .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; }
+
+  .dropdown.menu .submenu { border: 0; }
+  .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; }
+  .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; }
+  .dropdown.menu:first-child > li.is-dropdown-submenu-parent > a::after { display: none; }
+}