Add dark theme

web/rollup.config.js

@@ -16,6 +16,7 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
 const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');
 
+
 const preprocessOptions = {
 	transformers: {
 		scss: {
@@ -30,7 +31,7 @@ const preprocessOptions = {
 			]
 		}
 	},
-};
+}
 
 export default {
 	client: {
@@ -91,7 +92,8 @@ export default {
 			}),
 			svelte({
 				generate: 'ssr',
-				dev
+				dev,
+				preprocess: autoPreprocess(preprocessOptions)
 			}),
 			resolve({
 				dedupe,

web/src/routes/_layout.svelte

@@ -4,8 +4,8 @@
 	export let segment;
 </script>
 
-<style global lang="sass">
-	@import "./style/main.sass";
+<style global lang="scss">
+	@import "style/main.scss";
 </style>
 
 <Nav {segment}/>

web/src/routes/index.svelte

@@ -4,13 +4,6 @@
 
 <h1>Great success!11!</h1>
 
-<!-- <figure>
-	<img alt='Borat' src='great-success.png'>
-	<figcaption>HIGH FIVE!</figcaption>
-</figure>
-
-<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p> -->
-
  <section class="section">
     <div class="container">
       <h1 class="title">

web/src/style/main.sass

@@ -1 +0,0 @@
-@import "bulma/bulma.sass";

web/src/style/main.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "bulma/bulma.sass";
+@import "overrides";

web/src/style/overrides.scss

@@ -0,0 +1,299 @@
+@if $bulmaswatch-import-font {
+    @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);
+}
+
+hr {
+  height: $border-width;
+}
+
+h6 {
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.hero {
+  background-color: $grey-dark;
+}
+
+a {
+  transition: all 200ms ease;
+}
+
+.button {
+  transition: all 200ms ease;
+  border-width: $border-width;
+  color: $white;
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
+  }
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      &.is-hovered,
+      &:hover {
+        background-color: lighten($color, 7.5%);
+      }
+
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 2px rgba($color, 0.5);
+      }
+    }
+  }
+}
+
+.label {
+  color: $grey-lighter;
+}
+
+.button,
+.control.has-icons-left .icon,
+.control.has-icons-right .icon,
+.input,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.select,
+.select select,
+.textarea {
+  height: 2.5em;
+}
+
+.input,
+.textarea {
+  transition: all 200ms ease;
+  box-shadow: none;
+  border-width: $border-width;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.select {
+  &:after,
+  select {
+    border-width: $border-width;
+  }
+}
+
+.control {
+  &.has-addons {
+    .button,
+    .input,
+    .select {
+      margin-right: -$border-width;
+    }
+  }
+}
+
+.notification {
+  background-color: $grey-dark;
+}
+
+.card {
+  $card-border-color: lighten($grey-darker, 5);
+  box-shadow: none;
+  border: $border-width solid $card-border-color;
+  background-color: $grey-darker;
+  border-radius: $radius;
+
+  .card-image {
+    img {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+
+  .card-header {
+    box-shadow: none;
+    background-color: rgba($black-bis, 0.2);
+    border-radius: $radius $radius 0 0;
+  }
+
+  .card-footer {
+    background-color: rgba($black-bis, 0.2);
+  }
+
+  .card-footer,
+  .card-footer-item {
+    border-width: $border-width;
+    border-color: $card-border-color;
+  }
+}
+
+.notification {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      a:not(.button) {
+        color: $color-invert;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.tag {
+  border-radius: $radius;
+}
+
+.menu-list {
+  a {
+    transition: all 300ms ease;
+  }
+}
+
+.modal-card-body {
+  background-color: $grey-darker;
+}
+
+.modal-card-foot,
+.modal-card-head {
+  border-color: $grey-dark;
+}
+
+.message-header {
+  font-weight: $weight-bold;
+  background-color: $grey-dark;
+  color: $white;
+}
+
+.message-body {
+  border-width: $border-width;
+  border-color: $grey-dark;
+}
+
+.navbar {
+  border-radius: $radius;
+
+  &.is-transparent {
+    background: none;
+  }
+
+  &.is-primary {
+    .navbar-dropdown {
+      a.navbar-item.is-active {
+        background-color: $link;
+      }
+    }
+  }
+
+  @include touch {
+    .navbar-menu {
+      background-color: $navbar-background-color;
+      border-radius: 0 0 $radius $radius;
+    }
+  }
+}
+
+.hero .navbar,
+body > .navbar {
+  border-radius: 0;
+}
+
+.pagination-link,
+.pagination-next,
+.pagination-previous {
+  border-width: $border-width;
+}
+
+.panel-block,
+.panel-heading,
+.panel-tabs {
+  border-width: $border-width;
+
+  &:first-child {
+    border-top-width: $border-width;
+  }
+}
+
+.panel-heading {
+  font-weight: $weight-bold;
+}
+
+.panel-tabs {
+  a {
+    border-width: $border-width;
+    margin-bottom: -$border-width;
+
+    &.is-active {
+      border-bottom-color: $link-active;
+    }
+  }
+}
+
+.panel-block {
+  &:hover {
+    color: $link-hover;
+
+    .panel-icon {
+      color: $link-hover;
+    }
+  }
+
+  &.is-active {
+    .panel-icon {
+      color: $link-active;
+    }
+  }
+}
+
+.tabs {
+  a {
+    border-bottom-width: $border-width;
+    margin-bottom: -$border-width;
+  }
+
+  ul {
+    border-bottom-width: $border-width;
+  }
+
+  &.is-boxed {
+    a {
+      border-width: $border-width;
+    }
+
+    li.is-active a {
+      background-color: darken($grey-darker, 4);
+    }
+  }
+
+  &.is-toggle {
+    li a {
+      border-width: $border-width;
+      margin-bottom: 0;
+    }
+
+    li + li {
+      margin-left: -$border-width;
+    }
+  }
+}
+
+.hero {
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .navbar {
+        .navbar-dropdown {
+          .navbar-item:hover {
+            background-color: $navbar-dropdown-item-hover-background-color;
+          }
+        }
+      }
+    }
+  }
+}

web/src/style/variables.scss

@@ -0,0 +1,105 @@
+////////////////////////////////////////////////
+// DARKLY
+////////////////////////////////////////////////
+$grey-lighter: #dbdee0;
+$grey-light:   #8c9b9d;
+$grey:         darken($grey-light, 18);
+$grey-dark:    darken($grey, 18);
+$grey-darker:  darken($grey, 23);
+
+$orange: #e67e22;
+$yellow: #f1b70e;
+$green: #2ecc71;
+$turquoise: #1abc9c;
+$blue: #3498db;
+$purple: #8e44ad;
+$red: #e74c3c;
+$white-ter: #ecf0f1;
+$primary: #375a7f !default;
+$yellow-invert: #fff;
+
+$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
+
+$radius-small: 3px;
+$radius: .4em;
+$radius-large: 8px;
+$size-6: 15px;
+$size-7: .85em;
+$title-weight: 500;
+$subtitle-weight: 400;
+$subtitle-color: $grey-dark;
+
+$border-width: 2px;
+$border: $grey;
+
+$body-background-color: darken($grey-darker, 4);
+$body-size: 15px;
+
+$background: $grey-darker;
+$footer-background-color: $background;
+$button-background-color: $background;
+$button-border-color: lighten($button-background-color, 15);
+
+$title-color: #fff;
+$subtitle-color: $grey-light;
+$subtitle-strong-color: $grey-light;
+
+$text: #fff;
+$text-light: lighten($text, 10);
+$text-strong: darken($text, 5);
+
+$box-color: $text;
+$box-background-color: $grey-dark;
+$box-shadow: none;
+
+$link: $turquoise;
+$link-hover: lighten($link, 5);
+$link-focus: darken($link, 5);
+$link-active: darken($link, 5);
+$link-focus-border: $grey-light;
+
+$button-color: $primary;
+$button-hover-color: darken($text, 5); // text-dark
+$button-focus: darken($text, 5); // text-dark
+$button-active-color: darken($text, 5); // text-dark
+$button-disabled-background-color: $grey-light;
+
+$input-hover-color: $grey-light;
+$input-disabled-background-color: $grey-light;
+$input-disabled-border: $grey-lighter;
+
+$table-color: $text;
+$table-head: $grey-lighter;
+$table-background-color: $grey-dark;
+$table-cell-border: 1px solid $grey;
+
+$table-row-hover-background-color: $grey-darker;
+$table-striped-row-even-background-color: $grey-darker;
+$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
+
+$pagination-color: $link;
+$pagination-border-color: $border;
+
+$navbar-height: 4rem;
+
+$navbar-background-color: $primary;
+$navbar-item-color: $text;
+$navbar-item-hover-color: $link;
+$navbar-item-hover-background-color: transparent;
+$navbar-item-active-color: $link;
+$navbar-dropdown-arrow: #fff;
+$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
+$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
+$navbar-dropdown-background-color: $primary;
+$navbar-dropdown-item-hover-color: $grey-lighter;
+$navbar-dropdown-item-hover-background-color: transparent;
+$navbar-dropdown-item-active-background-color: transparent;
+$navbar-dropdown-item-active-color: $link;
+
+$dropdown-content-background-color: $background;
+$dropdown-item-color: $text;
+
+$progress-value-background-color: $grey-lighter;
+
+$bulmaswatch-import-font: true !default;