From 9c66a7570a815f98e52c2d2bfb4810aae99bbe92 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Thu, 19 Dec 2019 22:09:23 +0000
Subject: [PATCH] Reorganize Styles (#45)

---
 .../tasks/reusable/priorityLabel.vue          |   2 +-
 src/main.js                                   |   2 +-
 src/styles/components/_all.scss               |  13 +
 src/styles/{ => components}/attachments.scss  |   0
 src/styles/components/base/_all.scss          |   5 +
 src/styles/components/base/card.scss          |  22 ++
 .../{ => components/base}/fancycheckbox.scss  |   0
 .../base/multiselect.scss}                    |  17 +-
 .../base/scrollbars.scss}                     |   0
 .../base/tooltip.scss}                        |   0
 src/styles/{ => components}/fullpage.scss     |   0
 src/styles/{ => components}/gantt.scss        |   0
 src/styles/{ => components}/labels.scss       |   6 +-
 src/styles/{ => components}/list.scss         |   0
 src/styles/{ => components}/reminders.scss    |   0
 src/styles/components/switch-view.scss        |  39 +++
 src/styles/{ => components}/task.scss         |   0
 .../{ => components}/taskRelations.scss       |   0
 src/styles/{ => components}/tasks.scss        |   4 +-
 src/styles/{ => components}/teams.scss        |   0
 src/styles/theme.scss                         | 331 ------------------
 src/styles/theme/_all.scss                    |  11 +
 src/styles/theme/content.scss                 |  23 ++
 src/styles/theme/form.scss                    | 154 ++++++++
 src/styles/theme/link-share.scss              |  15 +
 src/styles/theme/loading.scss                 |  32 ++
 .../{general.scss => theme/navigation.scss}   | 228 +++---------
 src/styles/theme/notification.scss            |  32 ++
 src/styles/theme/offline.scss                 |  24 ++
 src/styles/theme/theme.scss                   |  29 ++
 src/styles/theme/update-notification.scss     |  40 +++
 .../{_variables.scss => theme/variables.scss} |   0
 src/styles/utilities/_all.scss                |   2 +
 .../animations.scss}                          |   0
 src/styles/{ => utilities}/transitions.scss   |   0
 src/styles/vikunja.scss                       |   3 +
 src/vikunja.scss                              |  21 --
 37 files changed, 526 insertions(+), 529 deletions(-)
 create mode 100644 src/styles/components/_all.scss
 rename src/styles/{ => components}/attachments.scss (100%)
 create mode 100644 src/styles/components/base/_all.scss
 create mode 100644 src/styles/components/base/card.scss
 rename src/styles/{ => components/base}/fancycheckbox.scss (100%)
 rename src/styles/{_multiselect.scss => components/base/multiselect.scss} (96%)
 rename src/styles/{_scrollbars.scss => components/base/scrollbars.scss} (100%)
 rename src/styles/{_tooltip.scss => components/base/tooltip.scss} (100%)
 rename src/styles/{ => components}/fullpage.scss (100%)
 rename src/styles/{ => components}/gantt.scss (100%)
 rename src/styles/{ => components}/labels.scss (81%)
 rename src/styles/{ => components}/list.scss (100%)
 rename src/styles/{ => components}/reminders.scss (100%)
 create mode 100644 src/styles/components/switch-view.scss
 rename src/styles/{ => components}/task.scss (100%)
 rename src/styles/{ => components}/taskRelations.scss (100%)
 rename src/styles/{ => components}/tasks.scss (97%)
 rename src/styles/{ => components}/teams.scss (100%)
 delete mode 100644 src/styles/theme.scss
 create mode 100644 src/styles/theme/_all.scss
 create mode 100644 src/styles/theme/content.scss
 create mode 100644 src/styles/theme/form.scss
 create mode 100644 src/styles/theme/link-share.scss
 create mode 100644 src/styles/theme/loading.scss
 rename src/styles/{general.scss => theme/navigation.scss} (61%)
 create mode 100644 src/styles/theme/notification.scss
 create mode 100644 src/styles/theme/offline.scss
 create mode 100644 src/styles/theme/theme.scss
 create mode 100644 src/styles/theme/update-notification.scss
 rename src/styles/{_variables.scss => theme/variables.scss} (100%)
 create mode 100644 src/styles/utilities/_all.scss
 rename src/styles/{_animations.scss => utilities/animations.scss} (100%)
 rename src/styles/{ => utilities}/transitions.scss (100%)
 create mode 100644 src/styles/vikunja.scss
 delete mode 100644 src/vikunja.scss

diff --git a/src/components/tasks/reusable/priorityLabel.vue b/src/components/tasks/reusable/priorityLabel.vue
index 8696fe038..d9a8d63e0 100644
--- a/src/components/tasks/reusable/priorityLabel.vue
+++ b/src/components/tasks/reusable/priorityLabel.vue
@@ -32,7 +32,7 @@
 </script>
 
 <style lang="scss">
-	@import '../../../styles/variables';
+	@import '../../../styles/theme/variables';
 
 	span.high-priority{
 		color: $red;
diff --git a/src/main.js b/src/main.js
index 6d7f2c5e7..7aca0fa14 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,7 @@ import TaskOverview from './components/tasks/ShowTasks'
 Vue.component('TaskOverview', TaskOverview)
 
 // Add CSS
-import './vikunja.scss'
+import './styles/vikunja.scss'
 
 Vue.config.productionTip = false
 
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
new file mode 100644
index 000000000..007f6fb65
--- /dev/null
+++ b/src/styles/components/_all.scss
@@ -0,0 +1,13 @@
+@import 'base/all';
+
+@import 'attachments';
+@import 'fullpage';
+@import 'gantt';
+@import 'labels';
+@import 'list';
+@import 'reminders';
+@import 'switch-view';
+@import 'task';
+@import 'taskRelations';
+@import 'tasks';
+@import 'teams';
diff --git a/src/styles/attachments.scss b/src/styles/components/attachments.scss
similarity index 100%
rename from src/styles/attachments.scss
rename to src/styles/components/attachments.scss
diff --git a/src/styles/components/base/_all.scss b/src/styles/components/base/_all.scss
new file mode 100644
index 000000000..6f087b6e6
--- /dev/null
+++ b/src/styles/components/base/_all.scss
@@ -0,0 +1,5 @@
+@import 'card';
+@import 'fancycheckbox';
+@import 'multiselect';
+@import 'scrollbars';
+@import 'tooltip';
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
new file mode 100644
index 000000000..33b41bc1e
--- /dev/null
+++ b/src/styles/components/base/card.scss
@@ -0,0 +1,22 @@
+.card {
+  background-color: rgba($grey-lighter, 0.075);
+  border-radius: $radius;
+  margin-bottom: 1rem;
+
+  .card-image {
+    img {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+
+  .card-header {
+    box-shadow: none;
+    border-bottom: 1px solid $grey-lighter;
+    border-radius: $radius $radius 0 0;
+  }
+}
+
+.box,.card{
+  border: $thickness solid $border;
+  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+}
diff --git a/src/styles/fancycheckbox.scss b/src/styles/components/base/fancycheckbox.scss
similarity index 100%
rename from src/styles/fancycheckbox.scss
rename to src/styles/components/base/fancycheckbox.scss
diff --git a/src/styles/_multiselect.scss b/src/styles/components/base/multiselect.scss
similarity index 96%
rename from src/styles/_multiselect.scss
rename to src/styles/components/base/multiselect.scss
index 894589939..2f9480e5c 100644
--- a/src/styles/_multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -440,4 +440,19 @@ fieldset[disabled] .multiselect {
   to {
     transform: rotate(2turn);
   }
-}
\ No newline at end of file
+}
+
+.multiselect__tags {
+  .remove-assignee {
+    vertical-align: bottom;
+    color: $red;
+    margin-left: -1.8em;
+    background: $white;
+    padding: 0 4px;
+    display: inline-block;
+    border-radius: 100%;
+    font-size: .8em;
+    width: 18px;
+    height: 18px;
+  }
+}
diff --git a/src/styles/_scrollbars.scss b/src/styles/components/base/scrollbars.scss
similarity index 100%
rename from src/styles/_scrollbars.scss
rename to src/styles/components/base/scrollbars.scss
diff --git a/src/styles/_tooltip.scss b/src/styles/components/base/tooltip.scss
similarity index 100%
rename from src/styles/_tooltip.scss
rename to src/styles/components/base/tooltip.scss
diff --git a/src/styles/fullpage.scss b/src/styles/components/fullpage.scss
similarity index 100%
rename from src/styles/fullpage.scss
rename to src/styles/components/fullpage.scss
diff --git a/src/styles/gantt.scss b/src/styles/components/gantt.scss
similarity index 100%
rename from src/styles/gantt.scss
rename to src/styles/components/gantt.scss
diff --git a/src/styles/labels.scss b/src/styles/components/labels.scss
similarity index 81%
rename from src/styles/labels.scss
rename to src/styles/components/labels.scss
index e96109a91..e43f1e2a2 100644
--- a/src/styles/labels.scss
+++ b/src/styles/components/labels.scss
@@ -15,4 +15,8 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.tasks .task span.tag span {
+  width: auto;
+}
diff --git a/src/styles/list.scss b/src/styles/components/list.scss
similarity index 100%
rename from src/styles/list.scss
rename to src/styles/components/list.scss
diff --git a/src/styles/reminders.scss b/src/styles/components/reminders.scss
similarity index 100%
rename from src/styles/reminders.scss
rename to src/styles/components/reminders.scss
diff --git a/src/styles/components/switch-view.scss b/src/styles/components/switch-view.scss
new file mode 100644
index 000000000..7b4277a30
--- /dev/null
+++ b/src/styles/components/switch-view.scss
@@ -0,0 +1,39 @@
+.switch-view {
+  background: $white;
+  display: inline-block;
+  margin: 1em 0;
+  border-radius: $radius;
+  font-size: .8em;
+  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+
+  a {
+    padding: .5em;
+    display: inline-block;
+    margin: .4em;
+    border-radius: $radius;
+
+    -webkit-transition: all 100ms;
+    -moz-transition: all 100ms;
+    -ms-transition: all 100ms;
+    -o-transition: all 100ms;
+    transition: all 100ms;
+
+    &:not(:last-child) {
+      margin-right: 0;
+    }
+
+    &.is-active, &:hover {
+      color: $white;
+    }
+
+    &.is-active {
+      background: $primary;
+      font-weight: bold;
+      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+    }
+
+    &:hover {
+      background: lighten($primary, 5);
+    }
+  }
+}
diff --git a/src/styles/task.scss b/src/styles/components/task.scss
similarity index 100%
rename from src/styles/task.scss
rename to src/styles/components/task.scss
diff --git a/src/styles/taskRelations.scss b/src/styles/components/taskRelations.scss
similarity index 100%
rename from src/styles/taskRelations.scss
rename to src/styles/components/taskRelations.scss
diff --git a/src/styles/tasks.scss b/src/styles/components/tasks.scss
similarity index 97%
rename from src/styles/tasks.scss
rename to src/styles/components/tasks.scss
index 5c39d736a..515ddcb5b 100644
--- a/src/styles/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -29,7 +29,7 @@
     border-bottom: 1px solid darken(#fff, 10%);
 
     span:not(.tag) {
-      width: calc(100% - 30px);
+      width: calc(100% - 40px);
       display: inline-block;
       cursor: pointer;
 
@@ -92,7 +92,7 @@
 
     .settings{
       float: right;
-      width: 4%;
+      width: 24px;
       cursor: pointer;
     }
   }
diff --git a/src/styles/teams.scss b/src/styles/components/teams.scss
similarity index 100%
rename from src/styles/teams.scss
rename to src/styles/components/teams.scss
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
deleted file mode 100644
index 50fc22dcb..000000000
--- a/src/styles/theme.scss
+++ /dev/null
@@ -1,331 +0,0 @@
-@import url('/fonts/fonts.css');
-@import 'variables';
-@import '../../node_modules/bulma/bulma';
-
-@import 'animations';
-
-*, *:hover, *:active, *:focus{
-  outline: none;
-}
-
-.button {
-  transition: all $transition;
-  border: 0;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  font-weight: bold;
-  height: 2.648em;
-  box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
-
-  &.is-hovered,
-  &:hover {
-    box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
-  }
-
-  &.fullheight{
-    padding-right: 7px;
-    height: 100%;
-  }
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
-  }
-
-  &.icon-only{
-    padding-left: 16px;
-  }
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-
-    &.is-#{$name} {
-      box-shadow: 0.3em 0.3em 1em lighten($color, 30);
-
-      &.is-hovered,
-      &:hover {
-        box-shadow: 0.6em 0.6em 1em lighten($color, 30);
-      }
-
-      &.is-active,
-      &.is-focused,
-      &:active,
-      &:focus,
-      &:focus:not(:active) {
-        box-shadow: 0.1em 0.1em 0.7em lighten($color, 30) !important;
-      }
-
-      &.is-outlined {
-        border: 2px solid $color;
-      }
-    }
-  }
-
-  &.noshadow{
-    &,
-    &.is-hovered,
-    &:hover,
-    &.is-active,
-    &.is-focused,
-    &:active,
-    &:focus,
-    &:focus:not(:active) {
-      box-shadow: none;
-    }
-  }
-
-  &.is-small {
-    border-radius: $radius;
-  }
-}
-
-.input,
-.textarea {
-  transition: all $transition;
-  box-shadow: none;
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus {
-    box-shadow: none;
-  }
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      &.is-active,
-      &.is-focused,
-      &:active,
-      &:focus,
-      &:focus:not(:active) {
-        border-color: darken($color, 10);
-      }
-    }
-  }
-}
-
-.select:after {
-  margin-top: -0.575em;
-}
-
-.select select {
-  border-width: $thickness;
-
-  &:not([multiple]) {
-    height: calc(2.25em + #{$thickness});
-  }
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: none;
-  }
-}
-
-.field.has-addons {
-  .control .select select {
-    height: 2.25em;
-  }
-}
-
-.notification {
-  border: $thickness solid $border;
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-
-    &.is-#{$name} {
-      border-color: darken($color, 5);
-    }
-  }
-}
-
-.progress {
-  border-radius: $radius-large;
-}
-
-.card {
-  background-color: rgba($grey-lighter, 0.075);
-  border-radius: $radius;
-  margin-bottom: 1rem;
-
-  .card-image {
-    img {
-      border-radius: $radius $radius 0 0;
-    }
-  }
-
-  .card-header {
-    box-shadow: none;
-    border-bottom: 1px solid $grey-lighter;
-    border-radius: $radius $radius 0 0;
-  }
-}
-
-.box,.card{
-  border: $thickness solid $border;
-  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
-}
-
-.message {
-  .message-body {
-    border: $thickness solid;
-  }
-}
-
-.hero {
-  .navbar {
-    border: none;
-    box-shadow: none;
-  }
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      .navbar {
-        box-shadow: none;
-      }
-    }
-  }
-  @include touch {
-    .navbar-menu {
-      box-shadow: none;
-    }
-  }
-}
-
-.navbar {
-  z-index: 2;
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      border-color: darken($color, 5);
-    }
-  }
-  .navbar-dropdown {
-    box-shadow: $navbar-dropdown-boxed-shadow;
-    top: 101%;
-  }
-}
-
-.pagination-link,
-.pagination-next,
-.pagination-previous {
-  border-width: $thickness;
-}
-
-body {
-  background: url('../public/images/llama.svg') no-repeat bottom left fixed $light-background;
-  min-height: 100vh;
-}
-
-h1,h2,h3,h4,h5,h6{
-  font-family: $vikunja-font;
-  font-weight: 400 !important;
-}
-
-.bigbuttons{
-  margin-top: 0.5rem;
-}
-
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  z-index: 0;
-}
-
-.buttonright {
-  margin-right: 0.5rem;
-}
-
-.navbar.main-theme {
-  background: $light-background;
-  z-index: 5 !important;
-
-  @media screen and (max-width: $desktop) {
-    display: flex;
-    justify-content: space-between;
-
-    @media screen and (max-width: $tablet) {
-      .navbar-brand {
-        margin-left: 3em;
-      }
-    }
-
-    @media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
-      .user {
-        width: 7em;
-
-        .username {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.multiselect__tags {
-  .remove-assignee {
-    vertical-align: bottom;
-    color: $red;
-    margin-left: -1.8em;
-    background: $white;
-    padding: 0 4px;
-    display: inline-block;
-    border-radius: 100%;
-    font-size: .8em;
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.update-notification {
-  margin: 1em;
-  display: flex;
-  align-items: center;
-  background: $warning;
-  padding: 0 0 0 .5em;
-  border-radius: $radius;
-  font-size: .9em;
-  color: darken($dark, 5);
-  justify-content: space-between;
-
-  @media screen and (max-width: $desktop) {
-    & {
-      position: fixed;
-      bottom: 1em;
-      margin: 0;
-      width: 450px;
-      left: calc(50vw - 225px);
-    }
-  }
-
-  @media screen and (max-width: $tablet){
-    & {
-      position: fixed;
-      left: 1em;
-      right: 1em;
-      bottom: 1em;
-      width: auto;
-    }
-  }
-
-  p {
-    text-align: center;
-    width: 100%;
-  }
-
-  .button {
-    margin-left: .5em;
-  }
-}
diff --git a/src/styles/theme/_all.scss b/src/styles/theme/_all.scss
new file mode 100644
index 000000000..5b5e4cb1e
--- /dev/null
+++ b/src/styles/theme/_all.scss
@@ -0,0 +1,11 @@
+@import 'variables';
+@import 'theme';
+
+@import 'content';
+@import 'form';
+@import 'link-share';
+@import 'loading';
+@import 'navigation';
+@import 'notification';
+@import 'offline';
+@import 'update-notification';
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
new file mode 100644
index 000000000..755da24a6
--- /dev/null
+++ b/src/styles/theme/content.scss
@@ -0,0 +1,23 @@
+.app-container{
+  min-height: calc(100vh - 65px);
+  @media screen and (max-width: $tablet) {
+    padding-top: $navbar-height + 0.75rem;
+  }
+
+  .app-content{
+    padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
+    z-index: 2;
+    background: url('../../public/images/llama-upside-down.svg') no-repeat top right $light-background;
+    margin-left: 17vw;
+
+    @media screen and (max-width: $tablet) {
+      margin-left: 0;
+      padding-top: 1.5em;
+      min-height: calc(100vh - 4rem);
+    }
+
+    .card{
+      background: #fff;
+    }
+  }
+}
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
new file mode 100644
index 000000000..56019c047
--- /dev/null
+++ b/src/styles/theme/form.scss
@@ -0,0 +1,154 @@
+.button {
+  transition: all $transition;
+  border: 0;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  font-weight: bold;
+  height: 2.648em;
+  box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
+
+  &.is-hovered,
+  &:hover {
+    box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
+  }
+
+  &.fullheight{
+    padding-right: 7px;
+    height: 100%;
+  }
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
+  }
+
+  &.icon-only{
+    padding-left: 16px;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      box-shadow: 0.3em 0.3em 1em lighten($color, 30);
+
+      &.is-hovered,
+      &:hover {
+        box-shadow: 0.6em 0.6em 1em lighten($color, 30);
+      }
+
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus,
+      &:focus:not(:active) {
+        box-shadow: 0.1em 0.1em 0.7em lighten($color, 30) !important;
+      }
+
+      &.is-outlined {
+        border: 2px solid $color;
+      }
+    }
+  }
+
+  &.noshadow{
+    &,
+    &.is-hovered,
+    &:hover,
+    &.is-active,
+    &.is-focused,
+    &:active,
+    &:focus,
+    &:focus:not(:active) {
+      box-shadow: none;
+    }
+  }
+
+  &.is-small {
+    border-radius: $radius;
+  }
+}
+
+.input,
+.textarea {
+  transition: all $transition;
+  box-shadow: none;
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus,
+      &:focus:not(:active) {
+        border-color: darken($color, 10);
+      }
+    }
+  }
+}
+
+.select:after {
+  margin-top: -0.575em;
+}
+
+.select select {
+  border-width: $thickness;
+
+  &:not([multiple]) {
+    height: calc(2.25em + #{$thickness});
+  }
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: none;
+  }
+}
+
+.field.has-addons {
+  .control .select select {
+    height: 2.25em;
+  }
+}
+
+.bigbuttons{
+  margin-top: 0.5rem;
+}
+
+.buttonright {
+  margin-right: 0.5rem;
+}
+
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+  z-index: 0;
+}
+
+// Buttons icons
+.button .icon.is-small {
+  margin-right: 0.05rem !important;
+}
+
+// menu buttons
+.button-bottom {
+  margin-bottom: 1rem;
+}
+
+.button-right{
+  float: right;
+}
+
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
new file mode 100644
index 000000000..02caca83c
--- /dev/null
+++ b/src/styles/theme/link-share.scss
@@ -0,0 +1,15 @@
+.link-share-view {
+  .logo {
+    max-width: 500px;
+    width: 90%;
+    margin: 2em 0 4em;
+  }
+
+  .logout {
+    text-align: right;
+  }
+
+  .column {
+    max-width: 100%;
+  }
+}
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
new file mode 100644
index 000000000..d9d81dece
--- /dev/null
+++ b/src/styles/theme/loading.scss
@@ -0,0 +1,32 @@
+.loader-container {
+  &.is-loading {
+    position: relative;
+    pointer-events: none;
+    opacity: 0.5;
+    &:after {
+      @include loader;
+      position: absolute;
+      top: calc(50% - 2.5em);
+      left: calc(50% - 2.5em);
+      width: 5em;
+      height: 5em;
+      border-width: 0.25em;
+    }
+  }
+}
+
+.spinner{
+  &.is-loading {
+    pointer-events: none;
+    &:after {
+      @include loader;
+      width: 2em;
+      height: 2em;
+      margin-left: calc(50% - 1em);
+      position: absolute;
+      margin-top: 1em;
+      z-index: 999;
+      border-width: 0.25em;
+    }
+  }
+}
diff --git a/src/styles/general.scss b/src/styles/theme/navigation.scss
similarity index 61%
rename from src/styles/general.scss
rename to src/styles/theme/navigation.scss
index 35c2b1d57..dfa7ccf04 100644
--- a/src/styles/general.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,23 +1,66 @@
+.navbar {
+  z-index: 2;
 
-/* Logo */
-.logo {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
 
-  padding-left: 2rem !important;
-
-  img {
-    max-height: 3rem !important;
-    margin-right: 1rem;
+    &.is-#{$name} {
+      border-color: darken($color, 5);
+    }
+  }
+  .navbar-dropdown {
+    box-shadow: $navbar-dropdown-boxed-shadow;
+    top: 101%;
   }
 }
 
-/* Buttons icons */
-.button .icon.is-small {
-  margin-right: 0.05rem !important;
+.navbar.main-theme {
+  background: $light-background;
+  z-index: 5 !important;
+
+  @media screen and (max-width: $desktop) {
+    display: flex;
+    justify-content: space-between;
+
+    @media screen and (max-width: $tablet) {
+      .navbar-brand {
+        margin-left: 3em;
+      }
+    }
+
+    @media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
+      .user {
+        width: 7em;
+
+        .username {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
-/* menu buttons */
-.button-bottom {
-  margin-bottom: 1rem;
+.hero {
+  .navbar {
+    border: none;
+    box-shadow: none;
+  }
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .navbar {
+        box-shadow: none;
+      }
+    }
+  }
+  @include touch {
+    .navbar-menu {
+      box-shadow: none;
+    }
+  }
 }
 
 .navbar-menu .navbar-item .icon{
@@ -28,12 +71,7 @@
   z-index: 4 !important;
 }
 
-.app-container{
-  min-height: calc(100vh - 65px);
-  @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height + 0.75rem;
-  }
-
+.app-container {
   .namespace-container{
     background: $vikunja-nav-background;
     z-index: 6;
@@ -176,23 +214,6 @@
       }
     }
   }
-
-  .app-content{
-    padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
-    z-index: 2;
-    background: url('../public/images/llama-upside-down.svg') no-repeat top right $light-background;
-    margin-left: 17vw;
-
-    @media screen and (max-width: $tablet) {
-      margin-left: 0;
-      padding-top: 1.5em;
-      min-height: calc(100vh - 4rem);
-    }
-
-    .card{
-      background: #fff;
-    }
-  }
 }
 
 .navbar .user{
@@ -291,141 +312,6 @@
   }
 }
 
-/* Logout-icon */
 .logout-icon {
   margin-right: 0.85em !important;
 }
-
-/* Loading spinner */
-.loader-container {
-  &.is-loading {
-    position: relative;
-    pointer-events: none;
-    opacity: 0.5;
-    &:after {
-      @include loader;
-      position: absolute;
-      top: calc(50% - 2.5em);
-      left: calc(50% - 2.5em);
-      width: 5em;
-      height: 5em;
-      border-width: 0.25em;
-    }
-  }
-}
-
-.spinner{
-  &.is-loading {
-    pointer-events: none;
-    &:after {
-      @include loader;
-      width: 2em;
-      height: 2em;
-      margin-left: calc(50% - 1em);
-      position: absolute;
-      margin-top: 1em;
-      z-index: 999;
-      border-width: 0.25em;
-    }
-  }
-}
-
-.notifications{
-  left: 0.5em !important;
-  bottom: 1em !important;
-
-  .notification-wrapper .notification{
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0.4em;
-  }
-}
-
-.button-right{
-  float: right;
-}
-
-.switch-view {
-  background: $white;
-  display: inline-block;
-  margin: 1em 0;
-  border-radius: $radius;
-  font-size: .8em;
-  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
-
-  a {
-    padding: .5em;
-    display: inline-block;
-    margin: .4em;
-    border-radius: $radius;
-
-    -webkit-transition: all 100ms;
-    -moz-transition: all 100ms;
-    -ms-transition: all 100ms;
-    -o-transition: all 100ms;
-    transition: all 100ms;
-
-    &:not(:last-child) {
-      margin-right: 0;
-    }
-
-    &.is-active, &:hover {
-      color: $white;
-    }
-
-    &.is-active {
-      background: $primary;
-      font-weight: bold;
-      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
-    }
-
-    &:hover {
-      background: lighten($primary, 5);
-    }
-  }
-}
-
-.link-share-view {
-  .logo {
-    max-width: 500px;
-    width: 90%;
-    margin: 2em 0 4em;
-  }
-
-  .logout {
-    text-align: right;
-  }
-
-  .column {
-    max-width: 100%;
-  }
-}
-
-.offline {
-  background: url('../public/images/llama-nightscape.png') no-repeat center;
-  -webkit-background-size: cover;
-  background-size: cover;
-  height: 100vh;
-
-  .offline-message {
-    text-align: center;
-    position: absolute;
-    width: 100vw;
-    bottom: 5vh;
-    color: $white;
-    padding: 0 1em;
-
-    h1 {
-      font-weight: bold;
-      font-size: 1.5em;
-      text-align: center;
-      color: $white;
-      font-weight: 700 !important;
-      font-size: 1.5em;
-    }
-  }
-}
diff --git a/src/styles/theme/notification.scss b/src/styles/theme/notification.scss
new file mode 100644
index 000000000..33b7a8430
--- /dev/null
+++ b/src/styles/theme/notification.scss
@@ -0,0 +1,32 @@
+.notification {
+  border: $thickness solid $border;
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      border-color: darken($color, 5);
+    }
+  }
+}
+
+.notifications{
+  left: 0.5em !important;
+  bottom: 1em !important;
+
+  .notification-wrapper .notification{
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0.4em;
+  }
+}
+
+.message {
+  .message-body {
+    border: $thickness solid;
+  }
+}
diff --git a/src/styles/theme/offline.scss b/src/styles/theme/offline.scss
new file mode 100644
index 000000000..1d514a91f
--- /dev/null
+++ b/src/styles/theme/offline.scss
@@ -0,0 +1,24 @@
+.offline {
+  background: url('../../public/images/llama-nightscape.png') no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  height: 100vh;
+
+  .offline-message {
+    text-align: center;
+    position: absolute;
+    width: 100vw;
+    bottom: 5vh;
+    color: $white;
+    padding: 0 1em;
+
+    h1 {
+      font-weight: bold;
+      font-size: 1.5em;
+      text-align: center;
+      color: $white;
+      font-weight: 700 !important;
+      font-size: 1.5em;
+    }
+  }
+}
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
new file mode 100644
index 000000000..35ed6cea7
--- /dev/null
+++ b/src/styles/theme/theme.scss
@@ -0,0 +1,29 @@
+@import url('/fonts/fonts.css');
+@import '../../../node_modules/bulma/bulma';
+
+*, *:hover, *:active, *:focus{
+  outline: none;
+}
+
+body {
+  background: url('../../public/images/llama.svg') no-repeat bottom left fixed $light-background;
+  min-height: 100vh;
+}
+
+h1,h2,h3,h4,h5,h6{
+  font-family: $vikunja-font;
+  font-weight: 400 !important;
+}
+.logo {
+
+  padding-left: 2rem !important;
+
+  img {
+    max-height: 3rem !important;
+    margin-right: 1rem;
+  }
+}
+
+.progress {
+  border-radius: $radius-large;
+}
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
new file mode 100644
index 000000000..873c8ac83
--- /dev/null
+++ b/src/styles/theme/update-notification.scss
@@ -0,0 +1,40 @@
+.update-notification {
+  margin: 1em;
+  display: flex;
+  align-items: center;
+  background: $warning;
+  padding: 0 0 0 .5em;
+  border-radius: $radius;
+  font-size: .9em;
+  color: darken($dark, 5);
+  justify-content: space-between;
+
+  @media screen and (max-width: $desktop) {
+    & {
+      position: fixed;
+      bottom: 1em;
+      margin: 0;
+      width: 450px;
+      left: calc(50vw - 225px);
+    }
+  }
+
+  @media screen and (max-width: $tablet){
+    & {
+      position: fixed;
+      left: 1em;
+      right: 1em;
+      bottom: 1em;
+      width: auto;
+    }
+  }
+
+  p {
+    text-align: center;
+    width: 100%;
+  }
+
+  .button {
+    margin-left: .5em;
+  }
+}
diff --git a/src/styles/_variables.scss b/src/styles/theme/variables.scss
similarity index 100%
rename from src/styles/_variables.scss
rename to src/styles/theme/variables.scss
diff --git a/src/styles/utilities/_all.scss b/src/styles/utilities/_all.scss
new file mode 100644
index 000000000..2d0c76dea
--- /dev/null
+++ b/src/styles/utilities/_all.scss
@@ -0,0 +1,2 @@
+@import 'animations';
+@import 'transitions';
diff --git a/src/styles/_animations.scss b/src/styles/utilities/animations.scss
similarity index 100%
rename from src/styles/_animations.scss
rename to src/styles/utilities/animations.scss
diff --git a/src/styles/transitions.scss b/src/styles/utilities/transitions.scss
similarity index 100%
rename from src/styles/transitions.scss
rename to src/styles/utilities/transitions.scss
diff --git a/src/styles/vikunja.scss b/src/styles/vikunja.scss
new file mode 100644
index 000000000..448985380
--- /dev/null
+++ b/src/styles/vikunja.scss
@@ -0,0 +1,3 @@
+@import 'theme/all';
+@import 'utilities/all';
+@import 'components/all';
diff --git a/src/vikunja.scss b/src/vikunja.scss
deleted file mode 100644
index 5da0e1a44..000000000
--- a/src/vikunja.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import 'styles/theme';
-@import 'styles/scrollbars';
-@import 'styles/general';
-@import 'styles/transitions';
-
-@import 'styles/tasks';
-@import 'styles/task';
-@import 'styles/teams';
-@import 'styles/fullpage';
-@import 'styles/labels';
-@import 'styles/list';
-
-@import 'styles/fancycheckbox';
-@import 'styles/tooltip';
-@import 'styles/gantt';
-
-@import 'styles/attachments';
-@import 'styles/taskRelations';
-@import 'styles/reminders';
-
-@import 'styles/multiselect';
\ No newline at end of file