Major redesign of post component styling. Added foundatinal global stylings as well as icons.

8 files changed, 562 insertions, 148 deletions

diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index 07d931f..52f3283 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -1,129 +1,30 @@
-.post {
-  display: flex;
-  width: 98%;
-
-  margin: .5em auto;
+.left-pane {
   box-sizing: border-box;
-  padding: .5em;
-  background-color: var(--card-bg);
-  position: relative;
-}
-
-.post:first-child {
-  margin-top: 0;
-}
-
-hr {
-  border: 1px solid black;
-  width: 90%;
 }
 
 /* Author */
 
-.author {
-  display: flex;
-  margin-bottom: .2em;
-}
-
-.author:hover {
-  cursor: pointer;
-}
-
-.author > img {
+.author-picture {
   width: 2.2em;
   height: 2.2em;
-  margin-right: .2em;
-}
-
-.author-info > .handle {
-  font-size: .9em;
-  color: gray;
 }
 
 /* Content */
 
 .content {
-  flex: 1;
+  padding: 0 var(--card-padding);
 }
 
 .message {
-  margin: .3em 0;
-  word-break: break-all;
-}
-
-.bottom-post {
-  font-size: .5em;
-  color: gray;
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  margin: 0 .5em;
-}
-
-.comment-count {
-  font-size: 1em;
-}
-
-.comment-count > img {
-  height: .8em;
-}
-
-.message:hover, .timestamp:hover {
-  cursor: pointer;
-}
-
-/* Rating */
-
-.rating {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 4.4em;
-  margin: auto -.1em auto 0;
-}
-
-.score {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-
-.vote {
-  display: flex;
-  align-items: center;
-  flex: 1;
-
-  background: var(--card-bg);
-  font-size: 1em;
-
-  border: 1px solid var(--card-bg);
-  box-sizing: border-box;
-  border-radius: .2em;
-
-  }
-
-.vote:hover {
-  border: 1px solid var(--focus-color);
-  color: var(--focus-color);
-  cursor: pointer;
-}
-
-/* Attachments */
-
-.attachments {
-  display: flex;
-  width: 98%;
-  margin: -.3em auto .5em auto;
-  flex-wrap: wrap;
+  margin: 0.2em 0;
+  word-break: break-word;
 }
 
-.attachments:empty {
-  display: none;
+.post-details {
+  margin-bottom: calc(var(--card-padding) / 1.5);
+  padding: 0.2em 0;
 }
 
-.attachments > * {
-  flex: 1;
+.post-details > * {
+  margin-left: 1.1em;
 }
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 1603ebf..a4acfe6 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,48 +1,60 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<section class="post rounded-border" *ngIf="loaded">
-	<section class="content">
-		<summary class="author" (click)="goToAuthorProfile()">
-			<img class="round-image" [src]="user.profilePictureURL">
-			<div class="author-info">
-				<div class="name">
-					{{ user.firstName }} {{ user.lastName }}
-				</div>
-				<div class="handle">
-					@{{ user.userName }}
-				</div>
-			</div>
+<section class="card flex-row" *ngIf="loaded">
+	<aside class="left-pane">
+		<img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL"  (click)="goToAuthorProfile()">
+	</aside>
+	<main class="content flexible">
+		<summary class="font-size-dot8 text-vertical-middle hover-half-opacity"  (click)="goToAuthorProfile()">
+			<span>
+				{{ user.firstName }} {{ user.lastName }}
+			</span>
+			<span class="fg-color-faded">
+				@{{ user.userName }}
+			</span>
 		</summary>
-		<article class="message" (click)="goToPostPage()">
+		<article class="message">
 			{{ post.message }}
 		</article>
-		<div class="bottom-post" (click)="goToPostPage()">
-			<time class="timestamp">
-				{{ timeCreated }}
+		<section class="flex-row flexible-children">
+			<figure *ngFor="let fileURL of post.fileURLs">
+				<app-post-attachment [paramURL]="fileURL"></app-post-attachment>
+			</figure>
+		</section>
+		<section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
+			<time class="flex-row flex-center-align-items">
+				<img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+				<span>
+					{{ timeCreated }}
+				</span>
 			</time>
-			<div class="separator">
-				║
-			</div>
-			<summary class="comment-count">
-				{{ post.comments.length }}
-				<img src="assets/images/comment.png">
+			<summary class="flex-row flex-center-align-items">
+				<img class="img-height-font-size" src="/assets/icons/tabler-icon-message-2.svg">&nbsp;
+				<span>
+					{{ post.comments.length }}
+				</span>
 			</summary>
-		</div>
-	</section>
-	<section class="rating">
-		<button class="vote" (click)="votePost(true)">
-			ᐃ
+		</section>
+		<section class="flex-row flexible-children justify-children-center">
+			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+				<img src="/assets/icons/tabler-icon-message-2.svg">
+				&nbsp;Comment
+			</button>
+			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+				<img src="/assets/icons/tabler-icon-link.svg">
+				&nbsp;Share
+			</button>
+		</section>
+	</main>
+	<aside class="flex-col flex-center-align-items">
+		<button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
+			<img src="/assets/icons/tabler-icon-chevron-up.svg">
 		</button>
-		<summary class="score">
+		<summary>
 			{{ votesNumber }}
 		</summary>
-		<button class="vote" (click)="votePost(false)">
-			ᐁ
+		<button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
+			<img src="/assets/icons/tabler-icon-chevron-down.svg">
 		</button>
-	</section>
+	</aside>
 </section>
-<aside class="attachments">
-	<figure *ngFor="let fileURL of post.fileURLs">
-		<app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment>
-	</figure>
-</aside>
diff --git a/src/assets/icons/tabler-icon-calendar-time.svg b/src/assets/icons/tabler-icon-calendar-time.svg
new file mode 100644
index 0000000..3bb3a3e
--- /dev/null
+++ b/src/assets/icons/tabler-icon-calendar-time.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-calendar-time"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg16"
+   sodipodi:docname="tabler-icon-calendar-time.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs20" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 11.795,21 H 5 A 2,2 0 0 1 3,19 V 7 A 2,2 0 0 1 5,5 h 12 a 2,2 0 0 1 2,2 v 4"
+     id="path4"
+     style="stroke:#ffeede" />
+  <circle
+     cx="18"
+     cy="18"
+     r="4"
+     id="circle6"
+     style="stroke:#ffeede" />
+  <path
+     d="M 15,3 V 7"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="M 7,3 V 7"
+     id="path10"
+     style="stroke:#ffeede" />
+  <path
+     d="M 3,11 H 19"
+     id="path12"
+     style="stroke:#ffeede" />
+  <path
+     d="M 18,16.496 V 18 l 1,1"
+     id="path14"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-chevron-down.svg b/src/assets/icons/tabler-icon-chevron-down.svg
new file mode 100644
index 0000000..0971874
--- /dev/null
+++ b/src/assets/icons/tabler-icon-chevron-down.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-chevron-down"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="tabler-icon-chevron-down.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="750"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <polyline
+     points="6 9 12 15 18 9"
+     id="polyline4"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-chevron-up.svg b/src/assets/icons/tabler-icon-chevron-up.svg
new file mode 100644
index 0000000..20d694a
--- /dev/null
+++ b/src/assets/icons/tabler-icon-chevron-up.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-chevron-up"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="tabler-icon-chevron-up.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="737"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <polyline
+     points="6 15 12 9 18 15"
+     id="polyline4"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-link.svg b/src/assets/icons/tabler-icon-link.svg
new file mode 100644
index 0000000..a9f9110
--- /dev/null
+++ b/src/assets/icons/tabler-icon-link.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-link"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-link.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="737"
+     inkscape:window-height="480"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 10,14 a 3.5,3.5 0 0 0 5,0 l 4,-4 A 3.5355339,3.5355339 0 0 0 14,5 l -0.5,0.5"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 14,10 a 3.5,3.5 0 0 0 -5,0 l -4,4 a 3.5355339,3.5355339 0 0 0 5,5 l 0.5,-0.5"
+     id="path6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-message-2.svg b/src/assets/icons/tabler-icon-message-2.svg
new file mode 100644
index 0000000..6a9d20c
--- /dev/null
+++ b/src/assets/icons/tabler-icon-message-2.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-message-2"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="tabler-icon-message-2.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 12,20 9,17 H 7 A 3,3 0 0 1 4,14 V 8 A 3,3 0 0 1 7,5 h 10 a 3,3 0 0 1 3,3 v 6 a 3,3 0 0 1 -3,3 h -2 l -3,3"
+     id="path4"
+     style="stroke:#ffeede" />
+  <line
+     x1="8"
+     y1="9"
+     x2="16"
+     y2="9"
+     id="line6"
+     style="stroke:#ffeede" />
+  <line
+     x1="8"
+     y1="13"
+     x2="14"
+     y2="13"
+     id="line8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index b62f493..b187391 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,11 +2,15 @@
 @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;
 }
 
 html,
@@ -16,9 +20,18 @@ body {
 }
 body {
   font: 21px sans-serif !important;
+  color: var(--fg-color);
   background-color: var(--bg-color);
 }
 
+button {
+  color: inherit;
+  background: inherit;
+  font: inherit;
+  padding: 0;
+  border: none;
+}
+
 input:focus,
 button:focus {
   outline: 0;
@@ -38,7 +51,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);
 
@@ -96,6 +109,129 @@ 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;
+}
+
+.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-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 */
+
+.small-padding {
+  padding: 0.2em;
+}
+
+/* Cards */
+
+.card {
+  margin: .5em auto;
+  box-sizing: border-box;
+  padding: var(--card-padding);
+  background-color: var(--card-bg);
+  position: relative;
+}
+
+
+/* Effects */
+
+.lighter-hover:hover {
+  cursor: pointer;
+  background: #424242;
+}
+
+.click-effect:active {
+  transform: scale(0.9);
+}
+
+.hover-half-opacity:hover {
+  opacity: 0.5;
+  cursor: pointer;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {