5 files changed, 668 insertions, 0 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/src/public/css/common.css b/src/public/css/common.css
new file mode 100644
index 0000000..8535564
--- /dev/null
+++ b/src/public/css/common.css
@@ -0,0 +1,570 @@
+:root {
+	--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 {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url("/public/font/material-icons.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: facebook;
+	src: url("/public/font/facebook.otf") format("opentype");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: sfpro;
+	src: url("/public/font/sfpro.otf") format("opentype");
+	font-display: swap;
+}
+
+body {
+	background-color: var(--surface0);
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	color: var(--text);
+	font-family: var(--font);
+}
+
+#main-content {
+	background-color: var(--base);
+	padding-top: 1rem;
+}
+
+header {
+	top: 0;
+	position: sticky;
+	height: 3.5rem;
+	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(--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;
+	color: inherit;
+}
+
+a, button {
+	cursor: pointer;
+}
+
+.btn {
+	color: var(--btntext);
+	display: flex;
+	align-items: center;
+	align-content: center;
+	flex-direction: row;
+	font-weight: bold;
+	font-size: 1rem;
+	text-decoration: none;
+
+	padding: .4rem .6rem;
+	border-radius: .25rem;
+	background-color: transparent;
+	width: fit-content;
+}
+
+.btn:hover {
+	background-color: var(--surface1);
+}
+
+.btn-alt {
+	background-color: var(--surface1);
+}
+
+.btn-alt:hover {
+	background-color: var(--surface2);
+}
+
+.btn-wide {
+	width: auto;
+	flex-grow: 1;
+	justify-content: center;
+}
+
+.btn-line:hover {
+	background-color: inherit;
+	text-decoration: underline;
+}
+
+.btn-blue {
+	color: var(--blue-alt);
+}
+
+input.btn:focus {
+	border: none;
+	outline: none;
+}
+
+.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,
+.nav-left,
+.nav-center,
+.nav-right {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.nav {
+	position: sticky;
+}
+
+.nav-right {
+	flex: 1;
+	justify-content: flex-end;
+}
+
+.nav-center {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	flex: 1;
+	justify-content: center;
+	height: 100%;
+	z-index: 2;
+}
+
+@media (min-width: 800px) {
+	.nav-center .btn > span {
+		display: none;
+	}
+
+    .nav-center .btn {
+        padding: 0 3rem;
+		height: 100%;
+    }
+
+	#action-hamburger {
+		display: none;
+	}
+}
+
+@media (max-width: 800px) {
+	.nav-center {
+		display: none;
+		position: absolute;
+		flex-direction: column;
+		top: 100%;
+		height: fit-content;
+		background-color: var(--surface0);
+		width: 100%;
+		left: 0;
+		transform: translateX(0%);
+		justify-content: flex-start;
+	}
+
+	.nav-center.visible {
+		display: inherit !important;
+	}
+
+	.nav-center .btn {
+		width: calc(100% - 3rem);
+		padding: .75rem 0rem !important;
+        padding-left: 3rem !important;
+		justify-content: flex-start;
+	}
+
+	.nav-center .btn > span {
+		margin-left: 1rem;
+	}
+
+	.nav-center .btn.active {
+		border-bottom: none;
+	}
+}
+
+.nav-right .image-loading {
+	display: block;
+}
+
+@keyframes shimmer {
+  to {
+	background-position-x: 0%;
+  }
+}
+
+.pfp, .pfp img {
+	height: 2.5rem;
+	border-radius: 2.5rem;
+	aspect-ratio: 1;
+	border-radius: 100%;
+	display: block;
+}
+
+.pfp-sm, .pfp-sm img {
+	height: 1.75rem;
+}
+
+.image-loading {
+  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(--surface0);
+	border-radius: .5rem;
+	padding: 1rem;
+}
+
+.card p {
+	margin-bottom: 0;
+}
+
+.card form {
+	flex-grow: 1;
+}
+
+.card .sub-card {
+	background-color: var(--surface1);
+	border-radius: .5rem;
+	padding: .75rem;
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+}
+
+.col {
+	display: flex;
+	flex-direction: column;
+}
+
+.grow {
+	flex-grow: 1;
+}
+
+.ml-sm {
+	margin-left: .5rem;
+}
+
+.ml {
+	margin-left: 1rem;
+}
+
+.mr-sm {
+	margin-right: .5rem;
+}
+
+.mr {
+	margin-right: 1rem;
+}
+
+.mt {
+	margin-top: 1rem;
+}
+
+.mb {
+	margin-bottom: .75rem;
+}
+
+.pb {
+	padding-bottom: 1rem;
+}
+
+.dim {
+	color: var(--subtext);
+}
+
+.modal-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 255, 255, .1);
+	display: block;
+}
+
+.modal {
+	background-color: var(--surface0);
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	min-width: 40rem;
+	min-height: 24rem;
+	border-radius: .5rem;
+	display: flex;
+	flex-direction: column;
+	animation: fadeIn .1s, slideInModal .1s linear;
+}
+
+@keyframes slideInModal {
+	0% {
+		animation-timing-function: ease-in;
+		transform: translate(-50%, -60%);
+	}
+}
+
+@keyframes slideIn {
+	0% {
+		animation-timing-function: ease-out;
+		transform: translate(0, -50%);
+	}
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.modal>form {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.modal-header {
+	font-weight: bold;
+	position: relative;
+	border-bottom: 1px solid var(--surface1);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: grab;
+	padding: 1rem 0;
+}
+
+.modal-content {
+	flex-grow: 1;
+	padding: 1rem;
+}
+
+.modal-footer {
+	margin-top: auto;
+	padding: 0 1rem;
+	padding-bottom: 1rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+}
+
+.float-right {
+	position: absolute;
+	top: 50%;
+	left: 100%;
+	transform: translate(-125%, -50%);
+}
+
+.mi {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-size: 1.5rem;
+}
+
+.mi-sm {
+	font-size: 1rem;
+}
+
+.mi-lg {
+	font-size: 2rem;
+}
+
+#toast-container {
+	position: fixed;
+	top: 4rem;
+	left: 100%;
+	transform: translateX(-110%);
+	margin-top: 1rem;
+	z-index: 10000;
+}
+
+.toast {
+	color: var(--white);
+	padding: .75rem;
+	margin: .5rem;
+	border-radius: .5rem;
+	min-width: 15rem;
+	animation: fadeIn .1s, slideIn .25s linear;
+	display: flex;
+	justify-content: space-between;
+}
+
+.toast.error {
+	background-color: var(--red);
+}
+
+.toast.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/src/public/css/error.css b/src/public/css/error.css
new file mode 100644
index 0000000..5567cd5
--- /dev/null
+++ b/src/public/css/error.css
@@ -0,0 +1,16 @@
+#main-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 10rem 0;
+}
+
+#main-content h1 {
+	color: var(--blue);
+	font-family: Facebook;
+	font-size: 5rem;
+}
+
+#main-content span {
+	font-size: 2rem;
+}
diff --git a/src/public/css/home.css b/src/public/css/home.css
new file mode 100644
index 0000000..3c2a3a1
--- /dev/null
+++ b/src/public/css/home.css
@@ -0,0 +1,24 @@
+#main-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.card {
+	width: 40rem;
+	margin-bottom: 1rem;
+}
+
+.new-post-modal textarea {
+	border: none;
+	resize: none;
+	outline: none;
+	font-size: 1.5rem;
+	margin: 1rem 0;
+	width: 100%;
+	height: 70%;
+	flex-grow: 1;
+	background-color: transparent;
+	color: var(--text);
+	font-family: var(--font);
+}
diff --git a/src/public/css/post.css b/src/public/css/post.css
new file mode 100644
index 0000000..6fd7ca0
--- /dev/null
+++ b/src/public/css/post.css
@@ -0,0 +1,13 @@
+
+.action-load-comments {
+	margin-left: 4rem;
+}
+
+#action-load-posts {
+	width: 100%;
+	justify-content: center;
+}
+
+.post {
+	padding-bottom: 0;
+}