add ui

client/style.scss

@@ -0,0 +1,153 @@
+$color-primary: white;
+$color-primary-background: black;
+$color-subtle: #908caa;
+$color-muted: #6e6a86;
+$color-highlight: #f6c177;
+$color-iris: #c4a7e7;
+$color-error: #eb6f92;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  color: $color-primary;
+  background-color: $color-primary-background;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: $color-muted;
+}
+
+a:visited {
+  color: $color-muted;
+}
+
+header {
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 7em;
+  background-color: $color-primary-background;
+  box-shadow: 0 0 10em rgba($color-subtle, .5);
+  border-bottom: 1px solid rgba($color-subtle, .3);
+}
+
+@keyframes notification-anim {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.notification {
+  animation: notification-anim 1s forwards;
+  display: block;
+  margin: 2em 0;
+  width: min(90%, 50em);
+  color: $color-primary;
+  border: 2px dashed $color-primary;
+  overflow: hidden;
+  padding: 1em 1em;
+  border-radius: .5em;
+  box-sizing: border-box;
+  background-color: $color-primary-background;
+  margin: 0 auto;
+  margin-bottom: 4em;
+  z-index: 2;
+}
+
+.notification-error {
+  color: $color-error;
+  border-color: $color-error;
+}
+
+.question {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+
+  form {
+    width: min(90%, 50em);
+
+    input {
+      z-index: 2;
+    }
+
+    .input {
+      transition: .5s ease box-shadow, .5s ease border-color;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 1em 2em;
+      color: $color-primary;
+      background-color: transparent;
+      border: 1px solid $color-iris;
+      border-radius: 2em;
+      outline: none;
+      box-shadow: 0 0 5em rgba($color-subtle, .1);
+      z-index: 1;
+    }
+
+    .input:focus {
+      box-shadow: 0 0 5em $color-subtle;
+      border-color: rgba($color-iris, .5);
+    }
+
+    .submit {
+      transition: .5s ease color, .5s ease background-color, .5s ease box-shadow;
+      display: block;
+      width: fit-content;
+      margin: 2em auto;
+      margin-top: 5em;
+      padding: .5em 1em;
+      border-radius: 2em;
+      box-sizing: border-box;
+      color: $color-primary-background;
+      background-color: $color-primary;
+      border: 2px solid $color-primary;
+      outline: none;
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    .submit:hover {
+      color: $color-primary;
+      background-color: $color-primary-background;
+    }
+
+    .submit:focus {
+      color: $color-primary;
+      background-color: $color-primary-background;
+      box-shadow: 0 0 2em $color-primary;
+    }
+  }
+}
+
+.info {
+  width: min(90%, 50em);
+  margin: 5em auto;
+  z-index: 2;
+
+  ul {
+    padding: 1em;
+
+    li {
+      margin: 1em 0;
+    }
+  }
+}
+
+footer {
+  margin-top: 5em;
+  display: flex;
+  width: min(100%, 50em);
+  margin: 0 auto;
+  justify-content: center;
+  padding: 1em 2em;
+  box-sizing: border-box;
+  border-top: 1px solid $color-muted;
+  opacity: .6;
+
+  p {
+    margin: 1em 0;
+  }
+}