Merge with store

frontend/src/library/animations.scss

@@ -0,0 +1,22 @@
+@import 'common-variables';
+
+$long-animation-time: 200ms;
+$short-animation-time: 100ms;
+
+@mixin gravitate {
+  cursor: pointer;
+  transition: box-shadow $long-animation-time, transform $long-animation-time;
+
+  &:hover {
+    box-shadow: $shadow;
+    transform: scale(1.1);
+  }
+}
+
+@mixin jump {
+  cursor: pointer;
+  transition: transform $long-animation-time;
+  &:hover {
+    transform: translateY(-2px);
+  }
+}

frontend/src/library/common-variables.scss

@@ -0,0 +1,15 @@
+$accent-color: #a2666f;
+$text-color: #5d576b;
+$light-color: #ffffff;
+
+$background-gradient: linear-gradient(90deg, #fff9e07f 0, #ffd6d67f 100%);
+$background-gradient-opaque: linear-gradient(90deg, #fffcf0 0, #ffebeb 100%);
+
+$shadow: 0 0 1.5px 1.5px rgba(0, 0, 0, 0.1), 0 0 3px 2px rgba(0, 0, 0, 0.05);
+$shadow-border: 0 0 0 0.75px rgba(0, 0, 0, 0.1);
+
+$normal-font: 'Open Sans Condensed', sans-serif;
+$title-font: 'Raleway', serif;
+
+$mobile-width: 520px;
+$min-height: 400px;

frontend/src/library/forms.scss

@@ -0,0 +1,84 @@
+@import 'text';
+@import 'animations';
+
+textarea {
+  @include normal-text();
+
+  &:disabled {
+    background-color: $light-color;
+  }
+
+  display: block;
+  width: 100%;
+  height: 150px;
+
+  @media (max-width: $mobile-width) {
+    height: 100px;
+  }
+
+  resize: none;
+
+  box-sizing: border-box;
+  border: none;
+}
+
+input[type='text'] {
+  @include sub-title-text();
+  width: 100%;
+  background: transparent;
+
+  display: block;
+  border: 0;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    box-shadow: 0 1px $text-color;
+  }
+}
+
+button {
+  -webkit-appearance: none;
+
+  margin: 8px auto 0 auto;
+  user-select: none;
+
+  background: transparent;
+  border: 0;
+
+  @include medium-text();
+  font-size: var(--large-font-size);
+  $height: 2px;
+  cursor: pointer;
+  border-bottom: solid $height #5d576b55;
+  position: relative;
+
+  &:disabled {
+    color: #5d576b55;
+    border-bottom: solid $height #5d576b33;
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
+    &:after {
+      width: 100%;
+    }
+  }
+  &:after {
+    content: '';
+    width: 0;
+    height: $height;
+    position: absolute;
+    left: 0;
+    bottom: calc(-1 * #{$height});
+    background-color: $text-color;
+    transition: width 300ms;
+  }
+}
+
+label {
+  display: none;
+}

frontend/src/library/main.scss

@@ -0,0 +1,68 @@
+@import 'common-variables';
+@import 'animations';
+@import 'text';
+@import 'spacing';
+@import 'forms';
+@import 'utils';
+
+:root {
+  --border-radius: 5px;
+
+  --large-padding: 30px;
+  --medium-padding: 15px;
+  --small-padding: 10px;
+
+  @media (max-width: $mobile-width) {
+    --border-radius: 3px;
+
+    --large-padding: 20px;
+    --medium-padding: 15px;
+    --small-padding: 7.5px;
+  }
+}
+
+@mixin card {
+  border-radius: var(--border-radius);
+  background-color: $light-color;
+}
+
+@mixin center-child {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin exit {
+  @include square(16px);
+  background: url('/assets/x-sign.svg') no-repeat center center;
+  background-size: 50% 50%;
+  box-sizing: content-box;
+  padding: 8px;
+
+  @include jump();
+}
+
+img {
+  user-select: none;
+}
+
+*::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+*::-webkit-scrollbar-track {
+  box-shadow: $shadow-border;
+  border-radius: var(--border-radius);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: $text-color;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+}
+
+* {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}

frontend/src/library/spacing.scss

@@ -0,0 +1,9 @@
+@mixin inner-spacing($spacing, $horizontal: false) {
+  & > *:not(:last-child) {
+    @if $horizontal {
+      margin-right: $spacing;
+    } @else {
+      margin-bottom: $spacing;
+    }
+  }
+}

frontend/src/library/text.scss

@@ -0,0 +1,57 @@
+@import 'common-variables';
+
+:root {
+  --larger-font-size: 22px;
+  --large-font-size: 18px;
+  --medium-font-size: 16px;
+  --small-font-size: 11px;
+
+  @media (max-width: $mobile-width) {
+    --larger-font-size: 20px;
+    --large-font-size: 16px;
+    --medium-font-size: 14px;
+    --small-font-size: 10px;
+  }
+}
+
+@mixin title-text {
+  font-family: $title-font;
+  color: $text-color;
+  font-size: var(--larger-font-size);
+  user-select: none;
+}
+
+@mixin sub-title-text {
+  font-family: $title-font;
+  color: $text-color;
+  font-size: var(--medium-font-size);
+  user-select: none;
+}
+
+@mixin normal-text {
+  font-family: $normal-font;
+  color: $text-color;
+  font-size: var(--larger-font-size);
+}
+
+@mixin medium-text {
+  font-family: $normal-font;
+  color: $text-color;
+  font-size: var(--medium-font-size);
+}
+
+@mixin small-text {
+  font-family: $normal-font;
+  color: $text-color;
+  font-size: var(--small-font-size);
+}
+
+h1,
+h2,
+h3 {
+  @include title-text();
+}
+
+p {
+  @include normal-text();
+}

frontend/src/library/utils.scss

@@ -0,0 +1,4 @@
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}