🎨 Add theme support

- Move root (var) style properties to `/assets/css/themes.scss`
- Improve mobile navigation
- Create section component for the collapsable sections.
- Create logo component, so color can be changed.

- Add settings page
- Add option to select theme color
- Add option to select theme background
- Add option to enable/disable multi-colored frames.

- Add settings to VueX Store
- Persist VueX store in LocalStorage.

components/section.vue

@@ -0,0 +1,47 @@
+<template>
+    <fieldset :class="{ 'no-colored-frames': noFrameColors }">
+        <legend @click.prevent="collapse">{{ label }} ↕</legend>
+        <div class="collapsible" :class="{ hidden: collapsed }">
+            <slot />
+        </div>
+    </fieldset>
+</template>
+
+<style>
+    fieldset.no-colored-frames {
+        border-color: #afafaf !important;
+    }
+
+    fieldset.no-colored-frames legend {
+        color: var(--ac-color);
+    }
+</style>
+
+<script>
+    export default {
+
+        computed: {
+            noFrameColors () {
+                return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
+            }
+        },
+
+        props: {
+            "label": {
+                type: String,
+                default: "Section"
+            },
+            "collapsed": {
+                type: Boolean
+            }
+        },
+
+        methods: {
+            collapse({ target }) {
+                const parent = target.parentNode;
+                parent.querySelector(".collapsible").classList.toggle('hidden');
+            },
+        }
+
+    }
+</script>