4 files changed, 458 insertions, 0 deletions

diff --git a/web/public/css/common.css b/web/public/css/common.css
new file mode 100644
index 0000000..05f429f
--- /dev/null
+++ b/web/public/css/common.css
@@ -0,0 +1,404 @@
+: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;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url("/public/font/MaterialIcons-Regular.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;
+}
+
+@font-face {
+	font-family: sfprobold;
+	src: url("/public/font/sfprobold.otf") format("opentype");
+	font-display: swap;
+}
+
+body {
+	background-color: var(--secondary);
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	color: var(--text);
+	font-family: sfpro;
+}
+
+header {
+	height: 3.5rem;
+	background-color: var(--primary);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0 1rem;
+}
+
+header .logo {
+	font-family: facebook;
+	color: var(--logo);
+	font-size: 2.25rem;
+	height: 100%;
+	line-height: 2rem;
+	margin-top: .75rem;
+}
+
+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 {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	align-items: center;
+	color: var(--text);
+}
+
+.nav .header-entry {
+	height: 100%;
+}
+
+.nav-center .header-entry:hover {
+	background-color: var(--hover);
+}
+
+.btn-action {
+	justify-content: center;
+	align-items: center;
+	padding: .35rem;
+	margin: .25rem;
+	border-radius: .25rem;
+}
+
+.btn-action:hover {
+	background-color: var(--hover);
+}
+
+.btn-blue:hover {
+	color: var(--logo);
+}
+
+.header .btn-blue {
+	border-bottom: 1px solid var(--logo);
+}
+
+.btn-line:hover {
+	text-decoration: underline;
+}
+
+.nav,
+.nav-left,
+.nav-center,
+.nav-right {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.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) {
+	.header-entry > span {
+		display: none;
+	}
+
+    .nav-center .header-entry {
+        padding: 0 3rem;
+    }
+
+	#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(--primary);
+		width: 100%;
+		left: 0;
+		transform: translateX(0%);
+		justify-content: flex-start;
+	}
+
+	.nav-center.visible {
+		display: inherit !important;
+	}
+
+	.nav-center .header-entry {
+		width: calc(100% - 3rem);
+		padding: .75rem 0rem !important;
+        padding-left: 3rem !important;
+		justify-content: flex-start;
+	}
+
+	.nav-center .header-entry > span {
+		margin-left: 1rem;
+	}
+
+	.nav-center .header-entry.active {
+		border-bottom: none;
+	}
+}
+
+.nav-right .image-loading {
+	display: block;
+}
+
+.nav-right .header-entry {
+	padding: 0;
+	padding-left: 1.5rem;
+}
+
+@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(--secondary) 0%, var(--primary) 25%, var(--secondary) 50%);
+  background-size: 500%;
+  background-position-x: 150%;
+  animation: shimmer 1s linear infinite;
+}
+
+.card {
+	background-color: var(--primary);
+	border-radius: .5rem;
+	padding: 1rem;
+}
+
+.card form {
+	flex-grow: 1;
+}
+
+.card .sub-card {
+	background-color: var(--secondary);
+	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;
+}
+
+.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;
+}
+
+.dim {
+	color: var(--medium);
+}
+
+.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(--primary);
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	min-width: 40rem;
+	min-height: 24rem;
+	border-radius: .5rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.modal>form {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.modal-header {
+	font-family: sfprobold;
+	position: relative;
+	border-bottom: 1px solid var(--light);
+	text-align: center;
+	margin: 0 1rem;
+	border-radius: .5rem .5rem 0 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding-left: 1rem;
+	cursor: grab;
+	padding: 1rem;
+}
+
+.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;
+	transform: translate(0%, -50%);
+	top: 45%;
+	right: 0;
+}
+
+.mi {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-size: 1.5rem;
+}
+
+.mi-sm {
+	font-size: 1rem;
+}
+
+.mi-lg {
+	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);
+}
+
diff --git a/web/public/css/error.css b/web/public/css/error.css
new file mode 100644
index 0000000..aea11d9
--- /dev/null
+++ b/web/public/css/error.css
@@ -0,0 +1,16 @@
+#error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 10rem;
+}
+
+#error h1 {
+	color: var(--logo);
+	font-family: Facebook;
+	font-size: 5rem;
+}
+
+#error span {
+	font-size: 2rem;
+}
diff --git a/web/public/css/home.css b/web/public/css/home.css
new file mode 100644
index 0000000..e70223e
--- /dev/null
+++ b/web/public/css/home.css
@@ -0,0 +1,26 @@
+#main-content {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 1rem;
+}
+
+.card {
+	width: 40rem;
+	margin-bottom: 1rem;
+}
+
+.new-post-modal textarea {
+	border: none;
+	resize: none;
+	outline: none;
+	font-family: sfpro;
+	font-size: 1.5rem;
+	margin: 1rem 0;
+	width: 100%;
+	height: 70%;
+	flex-grow: 1;
+	background-color: transparent;
+	color: var(--text);
+}
diff --git a/web/public/css/post.css b/web/public/css/post.css
new file mode 100644
index 0000000..6ad14ba
--- /dev/null
+++ b/web/public/css/post.css
@@ -0,0 +1,12 @@
+.post hr {
+	color: var(--light);
+	margin: 0;
+}
+
+.post hr:nth-of-type(1) {
+	margin-top: .5rem;
+}
+
+.action-load-comments {
+	margin-left: 4rem;
+}