5 files changed, 276 insertions, 127 deletions

diff --git a/src/public/css/auth.css b/src/public/css/auth.css
new file mode 100644
index 0000000..b08e27b
--- /dev/null
+++ b/src/public/css/auth.css
@@ -0,0 +1,45 @@
+#main-content {
+	padding-top: 20rem;
+	padding-bottom: 5rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.branding {
+	max-width: 30rem;
+	margin-right: 5rem;
+}
+
+.branding h1 {
+	color: var(--blue);
+	font-family: facebook;
+	font-size: 3.5rem;
+}
+
+.branding span {
+	font-size: 1.5rem;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	width: 30rem;
+}
+
+@media(max-width: 1200px) {
+	#main-content {
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		padding: 10rem 0;
+	}
+
+	.branding {
+		margin: 0;
+	}
+
+	.form {
+		margin-top: 4rem;
+	}
+}
diff --git a/web/public/css/common.css b/src/public/css/common.css
index 8b55268..8535564 100644
--- a/web/public/css/common.css
+++ b/src/public/css/common.css
@@ -1,17 +1,44 @@
 :root {
-	--primary: #242424 !important;
-	--secondary: #181818 !important;
-	--hover: #1b1b1b !important;
-	--light: #3e4042 !important;
-	--mild: #1b1b1b !important;
-	--medium: #e2ded6 !important;
-	--extreme: #e2ded6 !important;
-	--logo: #1778f2 !important;
-	--error: #f02849 !important;
-	--success: #30ab5a !important;
-	--text: #ffffff !important;
-	--banner: #6b6b6b !important;
-	--popup: #242424cc !important;
+	--white: #E4E6EB;
+	--blue: #1778f2;
+	--red: #f02849;
+	--green: #30ab5a;
+
+	--blue-alt: #1D85FC;
+	--green-alt: #39B463;
+
+	--font: Helvetica;
+}
+
+:root {
+	--base :#18191A;
+	--surface0: #242526;
+	--surface1: #3A3B3C;
+	--surface2: #4E4F50;
+
+	--text: #E4E6EB;
+	--subtext: #B0B3B8;
+	--btntext: #E4E6EB;
+}
+
+/**
+:root {
+    --base: #f0f2f5;
+    --surface0: #ffffff;
+    --surface1: #f0f2f5;
+    --surface2: #dadde1;
+
+	--text: #000000;
+    --subtext: #1d2129;
+    --btntext: #606770;
+}
+*/
+
+@font-face {
+	font-family: 'Helvetica Neue';
+	font-style: normal;
+	src: url("/public/font/helvetica-neue.otf") format("opentype");
+	font-display: swap;
 }
 
 @font-face {
@@ -33,14 +60,8 @@
 	font-display: swap;
 }
 
-@font-face {
-	font-family: sfprobold;
-	src: url("/public/font/sfprobold.otf") format("opentype");
-	font-display: swap;
-}
-
 body {
-	background-color: var(--secondary);
+	background-color: var(--surface0);
 	width: 100%;
 	height: 100%;
 	margin: 0;
@@ -48,93 +69,132 @@ body {
 	display: flex;
 	flex-direction: column;
 	color: var(--text);
-	font-family: sfpro;
+	font-family: var(--font);
+}
+
+#main-content {
+	background-color: var(--base);
+	padding-top: 1rem;
 }
 
 header {
 	top: 0;
 	position: sticky;
 	height: 3.5rem;
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	padding: 0 1rem;
+	border-bottom: 1px solid var(--surface1);
 }
 
 header .logo {
 	font-family: facebook;
-	color: var(--logo);
+	color: var(--blue);
 	font-size: 2.25rem;
 	height: 100%;
 	line-height: 2rem;
 	margin-top: .75rem;
 }
 
+footer {
+	text-align: center;
+	padding: 1rem;
+	color: var(--subtext);
+	font-size: .75rem;
+}
+
+hr {
+	color: var(--surface2);
+	background-color: var(--surface2);
+	width: 100%;
+	height: 1px;
+	border: none;
+}
+
+a, button, input, div {
+	box-sizing: border-box;
+}
+
 a, button, input {
 	background: none;
 	border: none;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	font-family: sfprobold;
 	color: inherit;
-	text-decoration: none;
-	font-size: 1rem;
 }
 
 a, button {
 	cursor: pointer;
 }
 
-form button {
-	padding: .5rem;
-	border-radius: .5rem;
-}
-
-input:focus {
-	border: none;
-	outline: none;
-}
-
-.header-entry {
+.btn {
+	color: var(--btntext);
 	display: flex;
+	align-items: center;
+	align-content: center;
 	flex-direction: row;
+	font-weight: bold;
+	font-size: 1rem;
 	text-decoration: none;
-	align-items: center;
-	color: var(--text);
+
+	padding: .4rem .6rem;
+	border-radius: .25rem;
+	background-color: transparent;
+	width: fit-content;
 }
 
-.nav .header-entry {
-	height: 100%;
+.btn:hover {
+	background-color: var(--surface1);
 }
 
-.nav-center .header-entry:hover {
-	background-color: var(--hover);
+.btn-alt {
+	background-color: var(--surface1);
 }
 
-.btn-action {
+.btn-alt:hover {
+	background-color: var(--surface2);
+}
+
+.btn-wide {
+	width: auto;
+	flex-grow: 1;
 	justify-content: center;
-	align-items: center;
-	padding: .35rem;
-	margin: .25rem;
-	border-radius: .25rem;
 }
 
-.btn-action:hover {
-	background-color: var(--hover);
+.btn-line:hover {
+	background-color: inherit;
+	text-decoration: underline;
 }
 
-.btn-blue:hover {
-	color: var(--logo);
+.btn-blue {
+	color: var(--blue-alt);
 }
 
-.header .btn-blue {
-	border-bottom: 1px solid var(--logo);
+input.btn:focus {
+	border: none;
+	outline: none;
 }
 
-.btn-line:hover {
-	text-decoration: underline;
+.btn-submit {
+	color: var(--white);
+	background-color: var(--blue);
+	flex-grow: 1;
+	padding: .5rem;
+}
+
+.btn-submit:hover {
+	background-color: var(--blue-alt);
+}
+
+.btn-success {
+	color: var(--white);
+	background-color: var(--green);
+	flex-grow: 1;
+	padding: .5rem;
+}
+
+.btn-success:hover {
+	background-color: var(--green-alt);
 }
 
 .nav,
@@ -167,12 +227,13 @@ input:focus {
 }
 
 @media (min-width: 800px) {
-	.header-entry > span {
+	.nav-center .btn > span {
 		display: none;
 	}
 
-    .nav-center .header-entry {
+    .nav-center .btn {
         padding: 0 3rem;
+		height: 100%;
     }
 
 	#action-hamburger {
@@ -187,7 +248,7 @@ input:focus {
 		flex-direction: column;
 		top: 100%;
 		height: fit-content;
-		background-color: var(--primary);
+		background-color: var(--surface0);
 		width: 100%;
 		left: 0;
 		transform: translateX(0%);
@@ -198,18 +259,18 @@ input:focus {
 		display: inherit !important;
 	}
 
-	.nav-center .header-entry {
+	.nav-center .btn {
 		width: calc(100% - 3rem);
 		padding: .75rem 0rem !important;
         padding-left: 3rem !important;
 		justify-content: flex-start;
 	}
 
-	.nav-center .header-entry > span {
+	.nav-center .btn > span {
 		margin-left: 1rem;
 	}
 
-	.nav-center .header-entry.active {
+	.nav-center .btn.active {
 		border-bottom: none;
 	}
 }
@@ -218,11 +279,6 @@ input:focus {
 	display: block;
 }
 
-.nav-right .header-entry {
-	padding: 0;
-	padding-left: 1.5rem;
-}
-
 @keyframes shimmer {
   to {
 	background-position-x: 0%;
@@ -242,40 +298,32 @@ input:focus {
 }
 
 .image-loading {
-  background: linear-gradient(-45deg, var(--secondary) 0%, var(--primary) 25%, var(--secondary) 50%);
+  background: linear-gradient(-45deg, var(--surface0) 0%, var(--base) 25%, var(--surface0) 50%);
   background-size: 500%;
   background-position-x: 150%;
   animation: shimmer 1s linear infinite;
 }
 
 .card {
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	border-radius: .5rem;
 	padding: 1rem;
 }
 
+.card p {
+	margin-bottom: 0;
+}
+
 .card form {
 	flex-grow: 1;
 }
 
 .card .sub-card {
-	background-color: var(--secondary);
+	background-color: var(--surface1);
 	border-radius: .5rem;
 	padding: .75rem;
 }
 
-.input {
-	padding: 10px;
-	border-radius: 10px;
-	width: calc(100% - 20px);
-	background-color: var(--secondary);
-	font-family: sfpro;
-}
-
-.input:hover {
-	background-color: var(--hover);
-}
-
 .row {
 	display: flex;
 	flex-direction: row;
@@ -314,8 +362,12 @@ input:focus {
 	margin-bottom: .75rem;
 }
 
+.pb {
+	padding-bottom: 1rem;
+}
+
 .dim {
-	color: var(--medium);
+	color: var(--subtext);
 }
 
 .modal-container {
@@ -329,7 +381,7 @@ input:focus {
 }
 
 .modal {
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -372,18 +424,14 @@ input:focus {
 }
 
 .modal-header {
-	font-family: sfprobold;
+	font-weight: bold;
 	position: relative;
-	border-bottom: 1px solid var(--light);
-	text-align: center;
-	margin: 0 1rem;
-	border-radius: .5rem .5rem 0 0;
+	border-bottom: 1px solid var(--surface1);
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding-left: 1rem;
 	cursor: grab;
-	padding: 1rem;
+	padding: 1rem 0;
 }
 
 .modal-content {
@@ -402,9 +450,9 @@ input:focus {
 
 .float-right {
 	position: absolute;
-	transform: translate(0%, -50%);
-	top: 45%;
-	right: 0;
+	top: 50%;
+	left: 100%;
+	transform: translate(-125%, -50%);
 }
 
 .mi {
@@ -421,17 +469,6 @@ input:focus {
 	font-size: 2rem;
 }
 
-button[type="submit"] {
-	text-align: center;
-	background-color: var(--logo);
-	flex-grow: 1;
-	padding: .5rem;
-}
-
-button[type="submit"]:hover {
-	background-color: var(--logo);
-}
-
 #toast-container {
 	position: fixed;
 	top: 4rem;
@@ -442,20 +479,92 @@ button[type="submit"]:hover {
 }
 
 .toast {
+	color: var(--white);
 	padding: .75rem;
 	margin: .5rem;
 	border-radius: .5rem;
 	min-width: 15rem;
-	font-family: sfpro;
 	animation: fadeIn .1s, slideIn .25s linear;
 	display: flex;
 	justify-content: space-between;
 }
 
 .toast.error {
-	background-color: var(--error);
+	background-color: var(--red);
 }
 
 .toast.success {
-	background-color: var(--success);
+	background-color: var(--green);
+}
+
+form input:not(.btn) {
+	display: block;
+	font-size: 1.1rem;
+	outline: 2px solid var(--surface2);
+	border-radius: .25rem;
+	padding: .75rem;
+}
+
+form input:not(.btn):focus {
+	outline-color: var(--blue);
+}
+
+form .rel label:not(.static) {
+	position: absolute;
+	top: 50%;
+	transform: translate(.5rem, -40%);
+	color: var(--subtext);
+	transition: all 0.2s ease-out;
+	pointer-events: none;
+	width: fit-content;
+	font-size: 1.1rem;
+}
+
+input:focus + label:not(.static),
+input:not(:placeholder-shown) + label:not(.static) {
+	color: var(--text);
+	top: 0;
+	padding: .5rem;
+	padding-top: 0;
+	font-size: .75rem;
+	transform: translate(.5rem, -25%);
+	background-color: var(--surface0);
+}
+
+.rel {
+	position: relative;
+}
+
+.rel input {
+	width: 100%;
+	flex-grow: 1;
+}
+
+input[type=radio] {
+	padding: 3rem !important;
+}
+
+.radio {
+	display: flex;
+	flex-direction: row;
+	width: auto;
+	flex-grow: 1;
+}
+
+.radio label {
+	border: 1px solid var(--surface2);
+	height: fit-content;
+	width: 100%;
+	padding: .75rem;
+	border-radius: .25rem;
+	cursor: pointer;
+}
+
+.radio input {
+	position: absolute;
+	top: 50%;
+	left: 100%;
+	transform: translate(-250%, -70%);
+	width: fit-content;
+	outline: none !important;
 }
diff --git a/web/public/css/error.css b/src/public/css/error.css
index aea11d9..5567cd5 100644
--- a/web/public/css/error.css
+++ b/src/public/css/error.css
@@ -1,16 +1,16 @@
-#error {
+#main-content {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 10rem;
+	padding: 10rem 0;
 }
 
-#error h1 {
-	color: var(--logo);
+#main-content h1 {
+	color: var(--blue);
 	font-family: Facebook;
 	font-size: 5rem;
 }
 
-#error span {
+#main-content span {
 	font-size: 2rem;
 }
diff --git a/web/public/css/home.css b/src/public/css/home.css
index e70223e..3c2a3a1 100644
--- a/web/public/css/home.css
+++ b/src/public/css/home.css
@@ -1,9 +1,7 @@
 #main-content {
-	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 1rem;
 }
 
 .card {
@@ -15,7 +13,6 @@
 	border: none;
 	resize: none;
 	outline: none;
-	font-family: sfpro;
 	font-size: 1.5rem;
 	margin: 1rem 0;
 	width: 100%;
@@ -23,4 +20,5 @@
 	flex-grow: 1;
 	background-color: transparent;
 	color: var(--text);
+	font-family: var(--font);
 }
diff --git a/web/public/css/post.css b/src/public/css/post.css
index 4030da3..6fd7ca0 100644
--- a/web/public/css/post.css
+++ b/src/public/css/post.css
@@ -1,16 +1,13 @@
-.post hr {
-	color: var(--light);
-	margin: 0;
-}
-
-.post hr:nth-of-type(1) {
-	margin-top: .5rem;
-}
 
 .action-load-comments {
 	margin-left: 4rem;
 }
 
 #action-load-posts {
+	width: 100%;
 	justify-content: center;
 }
+
+.post {
+	padding-bottom: 0;
+}