init

frontend/src/assets/animations.css

@@ -0,0 +1,19 @@
+.v-enter-from, .v-leave-to
+{
+animation: fadeIn 0.5s;  
+
+}
+
+.v-enter-to, .v-leave-from {
+animation: fadeOut 0.5s;  
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}

frontend/src/assets/base.css

@@ -0,0 +1,32 @@
+body {
+    background-color: rgba(28, 23, 25, 0);
+    margin:0;
+    padding: 0;
+}
+
+* .{
+min-height: 0px;
+}
+
+.backdrop--light {
+    background-color: rgba(70, 57, 63, 1);
+}
+
+.backdrop--medium {
+    background-color: rgba(56, 46, 50, 1);
+}
+
+.backdrop--medium--light {
+    background-color: rgba(42, 34, 38, 1);
+}
+
+.backdrop--medium--dark {
+    background-color: rgba(56, 46, 50, 1)
+}
+.backdrop--dark {
+    background-color: rgba(28, 23, 25, 1) 
+}
+
+.router-link-active {
+    color: #ec4899;
+}

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

frontend/src/assets/main.css

@@ -0,0 +1,36 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  font-weight: normal;
+  background-color: rgba(28, 23, 25, 1);
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  color: rgba(221, 159, 8, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}