Merge pull request #3 from Team-Kaleidoscope/major-redesign

Major redesign

1 files changed, 324 insertions, 100 deletions

diff --git a/src/styles.css b/src/styles.css
index b62f493..11c2973 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,11 +2,18 @@
 @import "./reset.css";
 
 :root {
-  --bg-color: white;
-  --focus-color: forestgreen;
-  --card-bg: white;
-  --success: forestgreen;
+  --max-width: 40rem;
+  --bg-color: #18191a;
+  --fg-color: #ffeede;
+  --focus-color: #669908;
+  --card-bg: #303030;
+  --card-padding: 0.5em;
+  --success: #669908;
   --failure: indianred;
+  --faded-color: #696969;
+  --navbar-height: 2.6em;
+  --upvote-highlight: #999908;
+  --downvote-highlight: #c35b5b;
 }
 
 html,
@@ -16,11 +23,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;
 }
 
@@ -35,20 +53,6 @@ input[type=file]::file-selector-button {
   visibility: hidden;
 }
 
-#content {
-  /* Used for the login and register pages */
-  height: 100%;
-  max-width: 20em;
-  box-sizing: border-box;
-  border: 0.5em solid var(--bg-color);
-
-  margin: 0 auto;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
 
 .rounded-border {
   border: 2px solid black;
@@ -64,6 +68,7 @@ input[type=file]::file-selector-button {
 .title {
   font-size: 2em;
   font-weight: bold;
+  text-align: center;
 }
 
 .error {
@@ -74,6 +79,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,39 +102,325 @@ input[type=file]::file-selector-button {
   width: fit-content;
 }
 
-/* Inputs, the type found in login and register */
+/* 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;
+  }
+
+  .title {
+    font-size: 1.5em;
+  }
+
+  .input-selection:first-child {
+    margin-top: 1.2em !important;
+  }
+
+  :not(card) button {
+    font-size: 0.7em;
+  }
+}
+
+.card-hr {
+  width: calc(100% - 1em);
+  border: 1px solid var(--fg-color);
+  background-color: var(--fg-color);
+}
+
+/* General flex */
+
+.flex-row, .flex-col {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.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;
+}
+
+.align-children-center > * {
+  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;
+}
+
+/* General text */
+
+.text-centered {
+  text-align: center;
+}
+
+.text-vertical-middle {
+  vertical-align: middle;
+}
+
+/* General border */
+
+.border-faded-slim {
+  border: 1px solid var(--faded-color);
+}
+
+.border-radius-dot5r, .card {
+  border-radius: 0.5rem;
+}
+
+.border-radius-dot3 {
+  border-radius: 0.3em;
+}
+
+.border-radius-dot2 {
+  border-radius: 0.2em;
+}
+
+.border-bottom-only {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+/* General colors */
+
+.fg-faded {
+  color: var(--faded-color);
+}
+
+.fg-focus {
+  color: var(--focus-color);
+  border-color: var(--focus-color);
+}
+
+.fg-error {
+  color: var(--failure);
+  border-color: var(--failure);
+}
+
+/* General padding */
+
+.padding-dot6 {
+  padding: 0.6em;
+}
+
+.padding-dot5 {
+  padding: 0.5em;
+}
+
+.padding-dot4 {
+  padding: 0.4em;
+}
+
+.padding-dot3 {
+  padding: 0.3em;
+}
+
+.padding-dot2 {
+  padding: 0.2em;
+}
+
+.padding-dot1 {
+  padding: 0.1em;
+}
+
+.padding-side-font {
+  padding-right: 1em;
+  padding-left: 1em;
+}
 
-.input-field {
+.padding-side-dot3 {
+  padding-right: 0.3em;
+  padding-left: 0.3em;
+}
+
+.padding-bot-dot5 {
+  padding-bottom: 0.5em;
+}
+
+.padding-top-bot-dot5 {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.padding-top-bot-dot2 {
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+}
+
+/* Margin */
+
+.margin-0 {
+  margin: 0;
+}
+
+.margin-top-0 {
+  margin-top: 0;
+}
+
+.margin-top-dot4 {
+  margin-top: 0.4em;
+}
+
+.margin-top-dot5 {
+  margin-top: 0.5em;
+}
+
+.margin-bot-dot5 {
+  margin-bottom: 0.5em;
+}
+
+.margin-top-bot-dot7 {
+  margin-top: 0.7em;
+  margin-bottom: 0.7em;
+}
+
+.margin-top-bot-dot3 {
+  margin-top: 0.3em;
+  margin-bottom: 0.3em;
+}
+
+.margin-top-bot-dot2 {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+.margin-right-dot2 {
+  margin-right: 0.2em;
+}
+
+/* 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);
+}
+
+/* Size */
+
+.height-full {
+  height: 100%;
+}
+
+.width-full {
   width: 100%;
-  background-color: var(--bg-color);
+}
+
+.height-font {
+  height: 1em;
+}
+
+/* Misc */
 
-  border: 0;
-  border-bottom: 1px solid grey;
+.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 */
+
+.textarea-new-msg {
+  min-height: 2em;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.fancy-input {
+  box-sizing: border-box;
   margin-bottom: 0.5em;
   padding: 0.4em;
   padding-left: 0;
-
-  font-size: inherit;
 }
 
-.input-field-label {
+.fancy-input-label {
   width: inherit;
   height: inherit;
   position: absolute;
   left: 0;
 
   margin-top: 0.4em;
-  color: grey;
-
   transition: 0.2s;
   scale: 1em;
 }
 
 .input-selection {
   position: relative;
-  margin-top: 0.7em;
+  margin-top: 0.5em;
 }
 
 .input-selection input::placeholder {
@@ -177,7 +469,7 @@ input[type=file]::file-selector-button {
   top: 0;
 }
 
-/* Move the errors above the input when
+  /* Move the errors above the input when
    * using the site on a small screen and
    * add some space for them above the input
    */
@@ -202,76 +494,8 @@ input[type=file]::file-selector-button {
   opacity: 0;
 }
 
-/* Submit button */
-
-.submit-btn {
-  width: 100%;
-  color: white;
-  background-color: black;
-
-  border: 2px solid black;
-  border-radius: 0.4em;
-  box-sizing: border-box;
-
-  font-size: 0.8em;
-  text-align: center;
-
-  margin-top: 0.5em;
-  padding: 0.3em;
-}
-
-.submit-btn:hover {
-  cursor: pointer;
-  color: var(--focus-color);
-  background-color: white;
-  border-color: var(--focus-color) !important;
-}
-
-.submit-btn:active {
-  transition: 0s !important;
-  transform: scale(0.9);
-}
-
-.delete-btn:hover {
-  color: indianred;
-  border-color: indianred !important;
-}
-
 /* Form attachments (the ones that are shown while creating and editing a post) */
 
-.form-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  color: gray;
-  font-size: 0.75em;
-  margin: 0 0.3em;
-}
-
 .form-attachment {
-  border: 2px solid black;
-  border-radius: 0.6em;
-  margin-top: 0.2em;
-  margin-right: 0.2em;
-  padding: 0.2em;
-  display: flex;
-  align-items: center;
-}
-
-.form-attachment:last-child {
-  margin-right: 0;
-}
-
-.remove-form-attachment {
-  font-size: 0.9em;
-  color: var(--failure);
-  background-color: white;
-  border-radius: 0.2em;
-  margin: 0 0.2em;
-  padding: 0.2em;
-}
-
-.remove-form-attachment:hover {
-  color: white;
-  background-color: var(--failure);
-  cursor: pointer;
+  background-color: #424242;
 }