From 45bc7c147b55896050ed4ca625999bfde0dcd407 Mon Sep 17 00:00:00 2001
From: physphile <netsvetaev.mgn@gmail.com>
Date: Sat, 4 Feb 2023 01:28:57 +0300
Subject: [PATCH 1/2] add desktop nav

---
 .eslintrc                                     |   3 +-
 src/App.vue                                   |  85 ++++++------
 src/components/ButtonIcon.vue                 |  38 ++++++
 src/components/DropdownMenu.vue               |   9 +-
 src/components/NavbarTop.vue                  |  58 --------
 src/components/NavbarTopBack.vue              |  50 -------
 src/components/NavbarTopPlain.vue             |  38 ------
 src/components/OptionsButton.vue              |  48 -------
 src/components/ToolbarBack.vue                |  61 +++++++++
 ...barTopCalendar.vue => ToolbarCalendar.vue} | 128 ++++++++++--------
 src/components/ToolbarPlain.vue               |  48 +++++++
 src/components/index.js                       |   3 +
 src/mixins/captureNavigation.js               |  23 ++++
 src/mixins/index.js                           |   2 +-
 .../{windowWidthMixin.js => windowWidth.js}   |   5 +
 src/style.css                                 |   6 +
 16 files changed, 300 insertions(+), 305 deletions(-)
 create mode 100644 src/components/ButtonIcon.vue
 delete mode 100644 src/components/NavbarTop.vue
 delete mode 100644 src/components/NavbarTopBack.vue
 delete mode 100644 src/components/NavbarTopPlain.vue
 delete mode 100644 src/components/OptionsButton.vue
 create mode 100644 src/components/ToolbarBack.vue
 rename src/components/{NavbarTopCalendar.vue => ToolbarCalendar.vue} (58%)
 create mode 100644 src/components/ToolbarPlain.vue
 create mode 100644 src/components/index.js
 create mode 100644 src/mixins/captureNavigation.js
 rename src/mixins/{windowWidthMixin.js => windowWidth.js} (73%)

diff --git a/.eslintrc b/.eslintrc
index 8f89698..abaeae4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,6 +27,7 @@
             }
         ],
         "object-shorthand": "warn",
-        "vue/html-self-closing": "warn"
+        "vue/html-self-closing": "warn",
+        "no-console": "warn"
     }
 }
diff --git a/src/App.vue b/src/App.vue
index d2b613f..70509f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,58 +1,55 @@
 <template>
-    <NavbarTop />
+    <div class="toolbarContainer">
+        <KeepAlive>
+            <Component
+                :is="activeVariant"
+                :options="options"
+                @navigate="navigate"
+            />
+        </KeepAlive>
+    </div>
 </template>
 
 <script>
-import NavbarTop from './components/NavbarTop.vue';
-import { Breakpoints, navbarItems } from './constants';
-import { windowWidthMixin } from './mixins';
-
-//import swipe from "@/events/swipe";
+import { ToolbarBack, ToolbarCalendar, ToolbarPlain } from './components';
 
 export default {
-    components: { NavbarTop },
-    mixins: [windowWidthMixin],
-
-    data() {
-        return { show_appbar: false, navbarItems };
+    components: {
+        ToolbarBack,
+        ToolbarCalendar,
+        ToolbarPlain,
     },
-
+    data: () => ({
+        layoutName: 'plain',
+        text: 'Твой физфак!',
+    }),
     beforeMount() {
-        // вызов функции swipe с предварительными настройками
-        //swipe(document, { maxTime: 800, minTime: 200, maxDist: 150, minDist: 50 });
+        document.addEventListener('change-header-layout', e => {
+            this.layoutName = e.detail.layoutName;
+            this.options = e.detail;
+        });
     },
-
-    methods: {
-        isMobile() {
-            return this.windowWidth < Breakpoints.SM;
-        },
-
-        resizeHandler(event) {
-            console.log(event.target);
-            this.windowWidth = event.target.innerWidth;
-        },
-
-        async captureNavigation(from, to) {
-            if (from === to) return;
-            try {
-                fetch(`${process.env.VUE_APP_API_MARKETING}/action`, {
-                    method: 'POST',
-                    cache: 'no-cache',
-                    redirect: 'follow',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        user_id: localStorage.getItem('marketing-id'),
-                        action: 'route to',
-                        path_from: from,
-                        path_to: to,
-                    }),
-                });
-            } catch {
-                //Failed, skips
+    computed: {
+        activeVariant() {
+            switch (this.layoutName) {
+                case 'calendar':
+                    return ToolbarCalendar;
+                case 'back':
+                    return ToolbarBack;
             }
+            return ToolbarPlain;
         },
     },
 };
 </script>
-
-<style></style>
+<style scoped>
+.toolbarContainer {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
+    padding: 10px 4%;
+    height: 56px;
+}
+</style>
diff --git a/src/components/ButtonIcon.vue b/src/components/ButtonIcon.vue
new file mode 100644
index 0000000..343e17e
--- /dev/null
+++ b/src/components/ButtonIcon.vue
@@ -0,0 +1,38 @@
+<template>
+    <button class="material-symbols-sharp">
+        {{ icon }}
+    </button>
+</template>
+
+<script>
+export default {
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+button {
+    color: var(--bs-on-primary);
+    border-radius: 999px;
+    padding: 8px;
+}
+
+button:disabled {
+    opacity: 0.6;
+}
+
+button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+button:focus {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+button:active {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+</style>
diff --git a/src/components/DropdownMenu.vue b/src/components/DropdownMenu.vue
index f486bef..dce8125 100644
--- a/src/components/DropdownMenu.vue
+++ b/src/components/DropdownMenu.vue
@@ -1,11 +1,11 @@
 <template>
-    <OptionsButton
+    <ButtonIcon
         icon="more_vert"
         :disabled="disabled"
         @click="showOptions = !showOptions"
     />
     <div
-        v-if="showOptions"
+        v-show="showOptions"
         v-click-outside="closeMenu"
         class="dropdown-menu"
     >
@@ -22,13 +22,13 @@
 
 <script>
 import vClickOutside from 'click-outside-vue3';
-import OptionsButton from './OptionsButton';
+import ButtonIcon from './ButtonIcon';
 
 export default {
     directives: {
         clickOutside: vClickOutside.directive,
     },
-    components: { OptionsButton },
+    components: { ButtonIcon },
     props: {
         menu: { type: Array, default: () => [] },
         disabled: Boolean,
@@ -38,7 +38,6 @@ export default {
     }),
     methods: {
         openMenu() {
-            console.log(this.menu);
             this.showOptions = !this.showOptions;
         },
         closeMenu() {
diff --git a/src/components/NavbarTop.vue b/src/components/NavbarTop.vue
deleted file mode 100644
index 5b1b991..0000000
--- a/src/components/NavbarTop.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <NavbarTopPlain
-        v-if="layoutName == 'plain'"
-        class="noselect topnavbar"
-        :options="options"
-    />
-    <NavbarTopBack
-        v-else-if="layoutName == 'back'"
-        class="noselect topnavbar"
-        :options="options"
-    />
-    <KeepAlive>
-        <NavbarTopCalendar
-            v-if="layoutName == 'calendar'"
-            class="noselect topnavbar"
-            :options="options"
-        />
-    </KeepAlive>
-</template>
-
-<script>
-import NavbarTopBack from './NavbarTopBack.vue';
-import NavbarTopPlain from './NavbarTopPlain.vue';
-import NavbarTopCalendar from './NavbarTopCalendar.vue';
-
-export default {
-    components: {
-        NavbarTopBack,
-        NavbarTopPlain,
-        NavbarTopCalendar,
-    },
-    data: () => ({
-        layoutName: 'plain',
-        options: {},
-    }),
-    beforeMount() {
-        document.addEventListener('change-header-layout', e => {
-            this.layoutName = e.detail.layoutName;
-            this.options = e.detail;
-        });
-    },
-};
-</script>
-
-<style scoped>
-.topnavbar {
-    z-index: 100;
-}
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-  supported by Chrome, Edge, Opera and Firefox */
-}
-</style>
diff --git a/src/components/NavbarTopBack.vue b/src/components/NavbarTopBack.vue
deleted file mode 100644
index d6baea7..0000000
--- a/src/components/NavbarTopBack.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <header>
-        <OptionsButton
-            icon="arrow_back"
-            @click="back"
-        />
-        <div>{{ options.text }}</div>
-        <DropdownMenu
-            v-if="options.menu && options.menu.length > 0"
-            :menu="options.menu"
-        />
-    </header>
-</template>
-
-<script>
-import OptionsButton from './OptionsButton';
-import DropdownMenu from './DropdownMenu';
-export default {
-    components: { DropdownMenu, OptionsButton },
-    props: {
-        options: { type: Object, default: () => ({ text: 'Твой физфак!' }) },
-    },
-    data: () => ({}),
-    methods: {
-        back() {
-            window.history.back();
-        },
-    },
-};
-</script>
-
-<style scoped>
-header {
-    height: 56px;
-    background-color: var(--bs-primary);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    gap: 10px;
-    padding: 10px 4%;
-    box-shadow: 0px 2px 2px lightgray;
-}
-
-span,
-div {
-    color: #ffffff;
-    margin-right: 16px;
-}
-</style>
diff --git a/src/components/NavbarTopPlain.vue b/src/components/NavbarTopPlain.vue
deleted file mode 100644
index be20cac..0000000
--- a/src/components/NavbarTopPlain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <header>
-        <div>{{ options.text }}</div>
-        <DropdownMenu
-            v-if="options.menu && options.menu.length > 0"
-            :menu="options.menu"
-        />
-    </header>
-</template>
-
-<script>
-import DropdownMenu from './DropdownMenu';
-export default {
-    components: { DropdownMenu },
-    props: {
-        options: { type: Object, default: () => ({ text: 'Твой физфак!' }) },
-    },
-    data: () => ({}),
-};
-</script>
-
-<style scoped>
-header {
-    height: 56px;
-    background-color: var(--bs-primary);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    gap: 10px;
-    padding: 10px 4%;
-    box-shadow: 0px 2px 2px lightgray;
-}
-
-div {
-    color: #ffffff;
-}
-</style>
diff --git a/src/components/OptionsButton.vue b/src/components/OptionsButton.vue
deleted file mode 100644
index cfaf744..0000000
--- a/src/components/OptionsButton.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <button
-        class="material-symbols-sharp"
-        :disabled="disabled"
-        @click="createRipple"
-    >
-        {{ icon }}
-    </button>
-</template>
-
-<script>
-import createRipple from '@/events/ripple';
-export default {
-    props: {
-        icon: {
-            type: String,
-            default: '',
-        },
-        disabled: Boolean,
-    },
-    methods: {
-        createRipple: event => createRipple(event),
-    },
-};
-</script>
-
-<style scoped>
-button {
-    align-content: center;
-    background: none;
-    border: none;
-    box-shadow: none;
-    height: 100%;
-    justify-content: center;
-    cursor: pointer;
-    color: var(--bs-on-primary);
-    border-radius: 50%;
-}
-
-button:disabled {
-    color: var(--bs-on-primary);
-    opacity: 0.6;
-}
-
-button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-</style>
diff --git a/src/components/ToolbarBack.vue b/src/components/ToolbarBack.vue
new file mode 100644
index 0000000..7076c08
--- /dev/null
+++ b/src/components/ToolbarBack.vue
@@ -0,0 +1,61 @@
+<template>
+    <ButtonIcon
+        icon="arrow_back"
+        @click="back"
+    />
+    <div>{{ options.text }}</div>
+    <div
+        style="display: flex; gap: 12px; flex: 1"
+        v-if="windowWidth >= 576"
+    >
+        <button
+            style="color: white"
+            @click="() => navigate('/timetable')"
+        >
+            Расписание
+        </button>
+        <button
+            style="color: white"
+            @click="() => navigate('/apps')"
+        >
+            Сервисы
+        </button>
+    </div>
+    <DropdownMenu
+        v-if="options.menu && options.menu.length > 0"
+        :menu="options.menu"
+    />
+</template>
+
+<script>
+import ButtonIcon from './ButtonIcon';
+import DropdownMenu from './DropdownMenu';
+import * as singleSpa from 'single-spa';
+import { windowWidthMixin } from '../mixins';
+export default {
+    components: { DropdownMenu, ButtonIcon },
+    mixins: [windowWidthMixin],
+    props: {
+        options: { type: Object, default: () => ({ text: 'Твой физфак!' }) },
+    },
+    methods: {
+        back() {
+            window.history.back();
+        },
+        getButtons() {
+            return JSON.parse(localStorage.getItem('navbar-buttons'));
+        },
+        navigate(path) {
+            singleSpa.navigateToUrl(path);
+        },
+    },
+};
+</script>
+
+<style scoped>
+span,
+div {
+    color: #ffffff;
+    margin-right: 16px;
+}
+</style>
diff --git a/src/components/NavbarTopCalendar.vue b/src/components/ToolbarCalendar.vue
similarity index 58%
rename from src/components/NavbarTopCalendar.vue
rename to src/components/ToolbarCalendar.vue
index 49ffb4a..35a8182 100644
--- a/src/components/NavbarTopCalendar.vue
+++ b/src/components/ToolbarCalendar.vue
@@ -1,57 +1,70 @@
 <template>
-    <header>
+    <div
+        v-click-outside="closeAll"
+        class="date"
+    >
+        <button
+            v-if="!options.disabled"
+            class="date options"
+            :class="showCalendar ? 'opened' : ''"
+            @click="showCalendar = !showCalendar"
+        >
+            <div class="toggler-text">
+                <span class="dateInfo">{{ formatDate(date) }}</span>
+                <span
+                    v-if="options.groupInfo && options.groupInfo.number"
+                    class="groupInfo"
+                >
+                    {{ options.groupInfo.number }} группа
+                </span>
+            </div>
+            <span class="material-symbols-sharp expander"> expand_more </span>
+        </button>
         <div
-            v-click-outside="closeAll"
+            v-if="options.disabled"
             class="date"
+        >
+            {{ options.text }}
+        </div>
+        <div
+            style="display: flex; gap: 12px; flex: 1"
+            v-if="windowWidth >= 576"
         >
             <button
-                v-if="!options.disabled"
-                class="date options"
-                :class="showCalendar ? 'opened' : ''"
-                @click="showCalendar = !showCalendar"
+                style="color: white"
+                @click="() => navigate('/timetable')"
             >
-                <div class="toggler-text">
-                    <span class="dateInfo">{{ formatDate(date) }}</span>
-                    <span
-                        v-if="options.groupInfo && options.groupInfo.number"
-                        class="groupInfo"
-                    >
-                        {{ options.groupInfo.number }} группа
-                    </span>
-                </div>
-                <span class="material-symbols-sharp expander">
-                    expand_more
-                </span>
+                Расписание
             </button>
-            <div
-                v-if="options.disabled"
-                class="date"
-            >
-                {{ options.text }}
-            </div>
-            <div
-                v-if="showCalendar"
-                class="date-nav"
+            <button
+                style="color: white"
+                @click="() => navigate('/apps')"
             >
-                <KeepAlive>
-                    <DatePicker
-                        v-model="date"
-                        class="calendar"
-                        is-required
-                    />
-                </KeepAlive>
-            </div>
+                Сервисы
+            </button>
         </div>
-        <OptionsButton
-            icon="today"
-            :disabled="options.disabled"
-            @click="date = new Date()"
-        />
-        <DropdownMenu
-            :menu="options.menu"
-            :disabled="options.disabled"
-        />
-    </header>
+        <div
+            v-if="showCalendar"
+            class="date-nav"
+        >
+            <KeepAlive>
+                <DatePicker
+                    v-model="date"
+                    class="calendar"
+                    is-required
+                />
+            </KeepAlive>
+        </div>
+    </div>
+    <ButtonIcon
+        icon="today"
+        :disabled="options.disabled"
+        @click="date = new Date()"
+    />
+    <DropdownMenu
+        :menu="options.menu"
+        :disabled="options.disabled"
+    />
 </template>
 
 <script>
@@ -59,15 +72,18 @@ import 'v-calendar/dist/style.css';
 import vClickOutside from 'click-outside-vue3';
 import { DatePicker } from 'v-calendar';
 import DropdownMenu from './DropdownMenu';
-import OptionsButton from './OptionsButton';
+import ButtonIcon from './ButtonIcon';
+import * as singleSpa from 'single-spa';
+import { windowWidthMixin } from '../mixins';
 
 export default {
     name: 'NavbarTop',
     components: {
         DatePicker,
         DropdownMenu,
-        OptionsButton,
+        ButtonIcon,
     },
+    mixins: [windowWidthMixin],
     directives: {
         clickOutside: vClickOutside.directive,
     },
@@ -119,23 +135,14 @@ export default {
                 new CustomEvent('change-date', { detail: { date: this.date } }),
             );
         },
+        navigate(path) {
+            singleSpa.navigateToUrl(path);
+        },
     },
 };
 </script>
 
 <style scoped>
-header {
-    height: 56px;
-    background-color: var(--bs-primary);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    gap: 10px;
-    padding: 10px 4%;
-    box-shadow: 0px 2px 2px lightgray;
-}
-
 .calendar {
     border: none;
 }
@@ -158,10 +165,11 @@ header {
     color: var(--bs-on-primary);
     background: none;
     border: none;
-    margin-right: auto;
     display: flex;
+    flex: 1;
     flex-direction: row;
     align-items: center;
+    justify-content: flex-start;
 }
 
 .toggler-text {
diff --git a/src/components/ToolbarPlain.vue b/src/components/ToolbarPlain.vue
new file mode 100644
index 0000000..955c6b7
--- /dev/null
+++ b/src/components/ToolbarPlain.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>{{ options.text }}</div>
+    <DropdownMenu
+        v-if="options.menu && options.menu.length > 0"
+        :menu="options.menu"
+    />
+    <div
+        style="display: flex; gap: 12px; flex: 1"
+        v-if="windowWidth >= 576"
+    >
+        <button
+            style="color: white"
+            @click="() => navigate('/timetable')"
+        >
+            Расписание
+        </button>
+        <button
+            style="color: white"
+            @click="() => navigate('/apps')"
+        >
+            Сервисы
+        </button>
+    </div>
+</template>
+
+<script>
+import DropdownMenu from './DropdownMenu';
+import * as singleSpa from 'single-spa';
+import { windowWidthMixin } from '../mixins';
+export default {
+    components: { DropdownMenu },
+    mixins: [windowWidthMixin],
+    props: {
+        options: { type: Object, default: () => ({ text: 'Твой физфак!' }) },
+    },
+    methods: {
+        navigate(path) {
+            singleSpa.navigateToUrl(path);
+        },
+    },
+};
+</script>
+
+<style scoped>
+div {
+    color: #ffffff;
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..eb66612
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+export { default as ToolbarBack } from './ToolbarBack';
+export { default as ToolbarCalendar } from './ToolbarCalendar';
+export { default as ToolbarPlain } from './ToolbarPlain';
diff --git a/src/mixins/captureNavigation.js b/src/mixins/captureNavigation.js
new file mode 100644
index 0000000..371db64
--- /dev/null
+++ b/src/mixins/captureNavigation.js
@@ -0,0 +1,23 @@
+export const captureNavigationMixin = {
+    methods: {
+        async captureNavigation(from, to) {
+            if (from === to) return;
+            try {
+                fetch(`${process.env.VUE_APP_API_MARKETING}/action`, {
+                    method: 'POST',
+                    cache: 'no-cache',
+                    redirect: 'follow',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        user_id: localStorage.getItem('marketing-id'),
+                        action: 'route to',
+                        path_from: from,
+                        path_to: to,
+                    }),
+                });
+            } catch {
+                //Failed, skips
+            }
+        },
+    },
+};
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 9bfa035..1f5ead2 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -1 +1 @@
-export { windowWidthMixin } from './windowWidthMixin';
+export { windowWidthMixin } from './windowWidth';
diff --git a/src/mixins/windowWidthMixin.js b/src/mixins/windowWidth.js
similarity index 73%
rename from src/mixins/windowWidthMixin.js
rename to src/mixins/windowWidth.js
index 7cbe594..9a7607f 100644
--- a/src/mixins/windowWidthMixin.js
+++ b/src/mixins/windowWidth.js
@@ -11,4 +11,9 @@ export const windowWidthMixin = {
     unmounted() {
         window.removeEventListener('resize', this.resizeHandler);
     },
+    methods: {
+        resizeHandler(event) {
+            this.windowWidth = event.target.innerWidth;
+        },
+    },
 };
diff --git a/src/style.css b/src/style.css
index eea23a4..df88cab 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,7 +1,13 @@
 button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all .3s;
     background: none;
     border: none;
     outline: none;
+    padding: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {

From 82afd42593e9071cff4a952c50ff93614b3ee4dc Mon Sep 17 00:00:00 2001
From: physphile <netsvetaev.mgn@gmail.com>
Date: Sat, 4 Feb 2023 20:25:22 +0300
Subject: [PATCH 2/2] minor improvements

---
 src/App.vue                   | 1 +
 src/components/ButtonIcon.vue | 5 +----
 src/main.js                   | 1 -
 src/variables.css             | 0
 4 files changed, 2 insertions(+), 5 deletions(-)
 delete mode 100644 src/variables.css

diff --git a/src/App.vue b/src/App.vue
index 70509f0..380f78a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,5 +51,6 @@ export default {
     gap: 10px;
     padding: 10px 4%;
     height: 56px;
+    background: var(--bs-primary);
 }
 </style>
diff --git a/src/components/ButtonIcon.vue b/src/components/ButtonIcon.vue
index 343e17e..b42aa52 100644
--- a/src/components/ButtonIcon.vue
+++ b/src/components/ButtonIcon.vue
@@ -29,10 +29,7 @@ button:disabled {
 button:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }
-button:focus {
-    background-color: rgba(255, 255, 255, 0.2);
-}
 button:active {
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.2);
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 525198f..a8eb4b2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,6 @@ import { createApp, h } from 'vue';
 
 import App from './App.vue';
 
-import './variables.css';
 import './style.css';
 
 const vueLifecycles = singleSpaVue({
diff --git a/src/variables.css b/src/variables.css
deleted file mode 100644
index e69de29..0000000