🎨 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/logo.vue

@@ -0,0 +1,29 @@
+<template>
+    <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612.001 612.001" style="enable-background:new 0 0 612.001 612.001;" xml:space="preserve">
+            <defs id="defs11" />
+            <g id="g3826" transform="translate(-516.40798,-163.88978)">
+                <circle transform="scale(1,-1)" style="stroke-width:1.19531453" r="178.70923" cy="-501.55591" cx="822.40845" id="circle3814" />
+                <g id="g3820" transform="translate(516.40798,163.89028)">
+                    <g id="g3818">
+                        <path :fill="color" id="path3816" data-old_color="#121212" class="active-path" data-original="#121212" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" />
+                    </g>
+                </g>
+            </g>
+    </svg>
+</template>
+
+<style>
+    #path3816 {
+        fill: var(--ac-color);
+    }
+</style>
+
+<script>
+    export default {
+        props: {
+            'color': {
+                type: String
+            }
+        }
+    }
+</script>

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>

components/settings/swatch.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="color" :data-color="color">
+        <span :style="{backgroundColor: color}" class="preview">
+            <svg v-if="active" class="activeTick" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"/></svg>
+        </span>
+        {{ name || color }}
+    </div>
+</template>
+
+<style lang="scss">
+    .color {
+        display: inline-block;
+        vertical-align: middle;
+
+        padding: 8px 15px;
+        margin: 5px;
+        background-color: rgba(93, 93, 93, 0.2);
+        border-radius: 4px;
+
+        &.active {
+            background-color: rgba(93, 93, 93, 0.3);
+        }
+
+        .preview {
+            vertical-align: middle;
+            display: inline-block;
+            width: 36px;
+            height: 36px;
+            border-radius: 100%;
+            margin-right: 10px;
+
+            position: relative;
+            .activeTick {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                fill: white;
+            }
+        }
+    }
+
+    .color.vibrant {
+        .preview .activeTick {
+            fill: black;
+        }
+    }
+</style>
+
+<script>
+    export default {
+        props: {
+            'color': {
+                type: String,
+                required: true
+            },
+            'name': {
+                type: String
+            },
+
+            'active': {
+                type: Boolean,
+                default: false
+            }
+        }
+    }
+</script>