1 files changed, 206 insertions, 4 deletions
diff --git a/src/styles.css b/src/styles.css
index b62f493..66fedf7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,11 +2,16 @@
 @import "./reset.css";
 
 :root {
-  --bg-color: white;
+  --max-width: 40rem;
+  --bg-color: #18191a;
+  --fg-color: #ffeede;
   --focus-color: forestgreen;
-  --card-bg: white;
+  --card-bg: #303030;
+  --card-padding: 0.5em;
   --success: forestgreen;
   --failure: indianred;
+  --faded-color: #696969;
+  --navbar-height: 2.6em;
 }
 
 html,
@@ -16,11 +21,22 @@ body {
 }
 body {
   font: 21px sans-serif !important;
+  color: var(--fg-color);
   background-color: var(--bg-color);
 }
 
+button, textarea, input {
+  color: inherit;
+  background: inherit;
+  background-color: inherit;
+  font: inherit;
+  padding: 0;
+  border: none;
+}
+
 input:focus,
-button:focus {
+button:focus,
+textarea:focus {
   outline: 0;
 }
 
@@ -38,7 +54,7 @@ input[type=file]::file-selector-button {
 #content {
   /* Used for the login and register pages */
   height: 100%;
-  max-width: 20em;
+  max-width: var(--max-width);
   box-sizing: border-box;
   border: 0.5em solid var(--bg-color);
 
@@ -74,6 +90,7 @@ input[type=file]::file-selector-button {
   width: 100%;
   max-height: 100%;
   overflow-y: auto;
+  flex-wrap: nowrap !important;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
@@ -96,6 +113,191 @@ input[type=file]::file-selector-button {
   width: fit-content;
 }
 
+/* General flex */
+
+.flex-row, .flex-col {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flexible, .flexible-children > * {
+  flex: 1;
+}
+
+.flex-center-align-items {
+  align-items: center;
+}
+
+.flex-justify-start {
+  justify-content: flex-start;
+}
+
+.flex-justify-end {
+  justify-content: flex-end;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-center-align-children > * {
+  display: flex;
+  align-items: center;
+}
+
+.justify-children-center > * {
+  display: flex;
+  justify-content: center;
+}
+
+/* General font sizes */
+
+.font-size-dot9 {
+  font-size: 0.9em;
+}
+
+.font-size-dot8 {
+  font-size: 0.8em;
+}
+
+.font-size-dot7 {
+  font-size: 0.7em;
+}
+
+.img-height-font-size {
+  height: 1em;
+}
+
+/* General colors */
+
+.fg-color-faded {
+  color: var(--faded-color);
+}
+
+/* General text */
+
+.text-centered {
+  text-align: center;
+}
+
+.text-vertical-middle {
+  vertical-align: middle;
+}
+
+/* General border */
+
+.faded-slim-border {
+  border: 1px solid var(--faded-color);
+}
+
+.border-radius-normal, .card {
+  border-radius: 0.5em;
+}
+
+.border-radius-smaller {
+  border-radius: 0.3em;
+}
+
+.border-radius-small {
+  border-radius: 0.2em;
+}
+
+.border-bottom-only {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+/* General padding */
+
+.padding-normal {
+  padding: 0.4em;
+}
+
+.padding-smaller {
+  padding: 0.3em;
+}
+
+.padding-small {
+  padding: 0.2em;
+}
+
+.padding-tiny {
+  padding: 0.1em;
+}
+
+/* Cards */
+
+.card {
+  margin: 0.5em auto;
+  box-sizing: border-box;
+  padding: var(--card-padding);
+  background-color: var(--card-bg);
+  position: relative;
+}
+
+@media screen and (max-width: 30rem) {
+  .card {
+    font-size: 0.8em;
+  }
+
+  .card button {
+    font-size: 0.9em;
+  }
+}
+
+.card-hr {
+  width: calc(100% - 1em);
+  border: 1px solid var(--fg-color);
+  background-color: var(--fg-color);
+}
+
+/* Effects */
+
+.lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover {
+  cursor: pointer;
+}
+
+.lighter-hover:hover {
+  background: #424242;
+}
+
+.light-hover:hover {
+  background: #696969;
+}
+
+.hover-half-opacity:hover {
+  opacity: 0.5;
+}
+
+.click-effect:active {
+  transform: scale(0.9);
+}
+
+/* Misc */
+
+.full-width {
+  width: 100%;
+}
+
+.centered-content {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.under-navbar {
+  height: calc(100% - var(--navbar-height)) !important;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {