first commit

src/styles/global.scss

@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
+
+@font-face {
+  font-family: Fallback;
+  src: local(system-ui), local(-apple-system), local(BlinkMacSystemFont),
+    local(Segoe UI), local(Roboto), local(Ubuntu), local(Helvetica),
+    local(Arial), local(sans-serif);
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-size: 16px;
+  font-family: Rubik, Fallback;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img {
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+::selection {
+  background: rgba($color-text, 0.15);
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}

src/styles/reset.css

@@ -0,0 +1,82 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 100%;
+}
+ul {
+  list-style: none;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+iframe {
+  border: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+}
+td:not([align]),
+th:not([align]) {
+  text-align: left;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button {
+  padding: 0;
+  font-family: inherit;
+  border: none;
+}

src/styles/variables.scss

@@ -0,0 +1,17 @@
+$color-accent: hsl(241, 99%, 70%);
+$color-primary: $color-accent;
+$color-secondary: hsl(186, 84%, 74%);
+$color-text: hsl(211, 19%, 70%);
+$color-dark: hsl(216, 14%, 14%);
+$color-gray: lighten($color-dark, 5);
+$color-page-bg: darken($color-dark, 5);
+$color-configurator: $color-dark;
+
+$layout-header-height: 6rem;
+$layout-sider-width: 20rem;
+$layout-footer-height: 4rem;
+
+$screen-sm: 480px;
+$screen-md: 768px;
+$screen-lg: 976px;
+$screen-xl: 1440px;