components uses css modules; other refactoring

src/components/Menu/styles.module.css

@@ -0,0 +1,48 @@
+.menu {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    font-size: var(--font-size-second);
+    list-style: none;
+}
+
+/* MENU LAYOUT */
+
+.desktop {
+    flex-direction: row;
+}
+
+.mobile {
+    flex-direction: column;
+}
+
+/* MENU ITEM */
+
+.menu li {
+    position: relative;
+    border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
+}
+
+/* MENU ITEM MOBILE */
+
+.mobile li {
+    font-size: var(--font-size-default);
+
+    padding: var(--size-xs) var(--size-s);
+}
+
+.mobile li.selected {
+    background-color: var(--color-back-opposite);
+    color: var(--color-text-opposite)
+}
+
+/* MENU ITEM DESKTOP */
+
+.desktop li {
+    padding: var(--size-xs) var(--size-s);
+}
+
+.desktop li.selected {
+    border-top-color: var(--color-back-opposite);
+}