rework styles with scss

28 files changed, 9 insertions, 980 deletions

diff --git a/src/public/css/auth.css b/src/public/css/auth.css
deleted file mode 100644
index 2c31694..0000000
--- a/src/public/css/auth.css
+++ /dev/null
@@ -1,47 +0,0 @@
-#main-content {
-	padding-top: 20rem;
-	padding-bottom: 5rem;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-}
-
-.branding {
-	max-width: 100%;
-	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;
-	max-width: 100%;
-}
-
-@media(max-width: 1200px) {
-	#main-content {
-		flex-direction: column;
-		align-items: center;
-		width: 100%;
-		padding: 10rem 1rem;
-	}
-
-	.branding {
-		margin: 0;
-	}
-
-	.form {
-		margin-top: 4rem;
-	}
-}
diff --git a/src/public/css/common.css b/src/public/css/common.css
deleted file mode 100644
index b941b1b..0000000
--- a/src/public/css/common.css
+++ /dev/null
@@ -1,644 +0,0 @@
-: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-alt.btn-blue {
-	background-color: var(--blue);
-	color: var(--white);
-}
-
-.btn-alt.btn-blue:hover {
-	background-color: var(--blue-alt);
-}
-
-.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);
-}
-
-.btn {
-	position: relative;
-}
-
-.btn-border::before {
-	position: absolute;
-	content: "";
-	display: block;
-	bottom: -1px;
-	left: 0;
-	right: 0;
-	height: 1px;
-	background: 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;
-	z-index: 5;
-}
-
-.nav {
-	position: sticky;
-}
-
-.nav-right {
-	flex: 1;
-	justify-content: flex-end;
-}
-
-.nav-center {
-	position: absolute;
-	left: 50%;
-	top: 0;
-	transform: translateX(-50%);
-	flex: 1;
-	justify-content: center;
-	height: 100%;
-	z-index: 6;
-}
-
-@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 .btn-border::before {
-		background: inherit;
-	}
-
-}
-
-.nav-right .image-loading {
-	display: block;
-}
-
-.pfp, .pfp .inner {
-	height: 2.5rem;
-	border-radius: 2.5rem;
-	aspect-ratio: 1;
-	border-radius: 100%;
-	display: block;
-}
-
-.pfp-sm, .pfp-sm .inner {
-	height: 1.75rem;
-}
-
-object.inner {
-	pointer-events: none;
-}
-
-.image-loading {
-  background: linear-gradient(-45deg, var(--surface0) 0%, var(--base) 25%, var(--surface0) 50%);
-  background-size: 500%;
-  background-position-x: 150%;
-}
-
-.image-loaded {
-	background-color: var(--base);
-}
-
-.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: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 255, 255, .1);
-	display: block;
-}
-
-.modal {
-	background-color: var(--surface0);
-	position: fixed;
-	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;
-	z-index: 10;
-}
-
-@media (max-width: 40rem) {
-	.modal {
-		min-width: 100%;
-		width: 100%;
-	}
-}
-
-@keyframes slideInModal {
-	0% {
-		animation-timing-function: ease-in;
-		transform: translate(-50%, -60%);
-	}
-}
-
-@keyframes slideIn {
-	0% {
-		animation-timing-function: ease-in;
-		transform: translate(0, -20%);
-	}
-}
-
-@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;
-	width: 1rem !important;
-	outline: none !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;
-}
-
-.container {
-	padding: 1rem;
-}
-
-.grow {
-	flex-grow: 1;
-}
-
-#user-menu {
-	position: fixed;
-	right: .5rem;
-	top: 4rem;
-	min-width: fit-content;
-	animation: fadeIn .1s, slideIn .1s linear;
-}
-
-#user-menu .btn {
-	width: 100%;
-}
-
-#user-menu-header {
-	align-items: center;
-}
-
-#user-menu-header .pfp {
-	margin-right: 1rem;
-}
-
-.hidden {
-	display: none;
-}
diff --git a/src/public/css/error.css b/src/public/css/error.css
deleted file mode 100644
index 5567cd5..0000000
--- a/src/public/css/error.css
+++ /dev/null
@@ -1,16 +0,0 @@
-#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
deleted file mode 100644
index 40e1063..0000000
--- a/src/public/css/home.css
+++ /dev/null
@@ -1,21 +0,0 @@
-#main-content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 1rem;
-	padding-bottom: 0;
-}
-
-.new-post-modal textarea {
-	border: none;
-	resize: none;
-	outline: none;
-	font-size: 1.5rem;
-	margin: 1rem 0;
-	width: 100%;
-	height: 10rem;
-	flex-grow: 1;
-	background-color: transparent;
-	color: var(--text);
-	font-family: var(--font);
-}
diff --git a/src/public/css/people.css b/src/public/css/people.css
deleted file mode 100644
index d36e5e8..0000000
--- a/src/public/css/people.css
+++ /dev/null
@@ -1,59 +0,0 @@
-
-.title {
-	margin-top: 2rem;
-	margin-left: 3rem;
-	font-size: 3rem;
-	margin-bottom: 0;
-}
-
-.desc {
-	margin-left: 3rem;
-}
-
-#people-container {
-	display: grid;
-	width: 100%;
-	padding: 1rem 2rem;
-	margin-bottom: 1rem;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr) );
-	grid-auto-rows: max-content;
-	grid-gap: 2rem;
-}
-
-.profile {
-	width: 16rem;
-	text-decoration: none;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.profile:hover {
-	outline: 1px solid var(--blue);
-}
-
-.profile strong {
-	font-size: 1.5rem;
-}
-
-.profile .pfp, .profile .pfp .inner {
-	padding: none;
-	margin: none;
-	width: 100%;
-	height: 100%;
-	aspect-ratio: 1;
-	border-radius: .3rem;
-}
-
-.profile .pfp {
-	margin-bottom: 1rem;
-}
-
-td:nth-child(1) {
-	font-weight: bold;
-	color: var(--subtext);
-	padding-right: 1rem;
-}
-
-td:nth-child(2) {
-	color: var(--text);
-}
diff --git a/src/public/css/post.css b/src/public/css/post.css
deleted file mode 100644
index 254e82b..0000000
--- a/src/public/css/post.css
+++ /dev/null
@@ -1,29 +0,0 @@
-
-.action-load-comments {
-	margin-left: 4rem;
-}
-
-#action-load-posts {
-	width: 100%;
-	justify-content: center;
-}
-
-#post-container {
-	max-width: 40rem;
-	width: 100%;
-}
-
-.post, #new-post {
-	margin-bottom: 1rem;
-	max-width: 40rem;
-	width: 100%;
-}
-
-.post {
-	padding-bottom: 0;
-}
-
-.post .likes {
-	display: block;
-	padding-top: .25rem;
-}
diff --git a/src/public/css/profile.css b/src/public/css/profile.css
deleted file mode 100644
index 0c8dd78..0000000
--- a/src/public/css/profile.css
+++ /dev/null
@@ -1,142 +0,0 @@
-#main-content {
-	display: flex;
-	flex-direction: column;
-	padding: 0;
-}
-
-#profile-header-container {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	background-color: var(--surface0);
-	border-bottom: 1px solid var(--surface1);
-}
-
-#profile-header {
-	min-width: 0;
-	max-width: 80rem;
-	flex-grow: 1;
-}
-
-#profile-header .banner {
-	width: 100%;
-	max-width: 100%;
-	min-height: 30rem;
-	aspect-ratio: 5;
-}
-
-.banner .inner {
-	width: 100%;
-	height: 100%;
-}
-
-#profile-header .banner img {
-	height: 100%;
-	width: 100%;
-	object-fit: cover;
-}
-
-#profile-header .info .pfp-wrapper .pfp,
-#profile-header .info .pfp-wrapper .pfp .inner {
-	height: 12.5rem;
-}
-
-#profile-header .info {
-	position: relative;
-	margin-bottom: 6rem;
-}
-
-#profile-header .info .pfp-wrapper {
-	padding: .5rem;
-	background-color: var(--surface0);
-	height: fit-content;
-	border-radius: 100%;
-	position: absolute;
-	top: -2.5rem;
-	left: 1rem;
-}
-
-#profile-header .info .content {
-	margin-left: 17rem;
-	margin-top: 2rem;
-}
-
-@media(max-width: 800px) {
-	#profile-header .info .pfp-wrapper .pfp,
-	#profile-header .info .pfp-wrapper .pfp .inner {
-		height: 8rem;
-	}
-
-	#profile-header .info .content {
-	margin-left: 12rem;
-	}
-}
-
-#profile-header .info .content .name {
-	font-size: 2rem;
-}
-
-#profile-header > hr {
-	border-bottom: 1px solid var(--surface1);
-	height: 0;
-	margin-bottom: 0;
-}
-
-.options {
-	width: 100%;
-	height: 3rem;
-}
-
-.options .btn {
-	height: 100%;
-	width: 10rem;
-}
-
-.options .btn span {
-	width: 100%;
-	text-align: center;
-}
-
-.tab {
-	max-width: 80rem;
-	width: 100%;
-	height: 100%;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-#post-container {
-	max-width: 40rem;
-	width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: -1rem;
-}
-
-#post-container .post {
-	margin-bottom: 1rem;
-}
-
-td:nth-child(1) {
-	padding-right: 2rem;
-}
-
-#about-tab {
-	width: auto;
-}
-
-#follow-container {
-	margin-left: auto;
-	margin-right: 2rem;
-}
-
-#follow-container > a {
-	width: 10rem;
-	padding: .5rem;
-}
-
-#follow-container > a > span {
-	width: 100%;
-	text-align: center;
-}
diff --git a/src/public/css/settings.css b/src/public/css/settings.css
deleted file mode 100644
index 8c3e9f7..0000000
--- a/src/public/css/settings.css
+++ /dev/null
@@ -1,13 +0,0 @@
-
-#main-content {
-	display: flex;
-	justify-content: center;
-}
-
-#settings {
-	margin: 0 1rem;
-	margin-bottom: 1rem;
-	max-width: 800px;
-	min-width: 400px;
-	width: 100%;
-}
diff --git a/src/public/font/facebook.otf b/src/public/font/Facebook.otf
index 97d5c6f..97d5c6f 100644
--- a/src/public/font/facebook.otf
+++ b/src/public/font/Facebook.otf
diff --git a/src/public/font/Facebook.ttf b/src/public/font/Facebook.ttf
new file mode 100644
index 0000000..ad1183a
--- /dev/null
+++ b/src/public/font/Facebook.ttf
diff --git a/src/public/font/Facebook.woff b/src/public/font/Facebook.woff
new file mode 100644
index 0000000..80f9b1d
--- /dev/null
+++ b/src/public/font/Facebook.woff
diff --git a/src/public/font/Facebook.woff2 b/src/public/font/Facebook.woff2
new file mode 100644
index 0000000..fcfea6c
--- /dev/null
+++ b/src/public/font/Facebook.woff2
diff --git a/src/public/font/helvetica-neue.otf b/src/public/font/Helvetica Neue.otf
index 7a08ea0..7a08ea0 100644
--- a/src/public/font/helvetica-neue.otf
+++ b/src/public/font/Helvetica Neue.otf
diff --git a/src/public/font/Helvetica Neue.ttf b/src/public/font/Helvetica Neue.ttf
new file mode 100644
index 0000000..90c5010
--- /dev/null
+++ b/src/public/font/Helvetica Neue.ttf
diff --git a/src/public/font/Helvetica Neue.woff b/src/public/font/Helvetica Neue.woff
new file mode 100644
index 0000000..0d4e85f
--- /dev/null
+++ b/src/public/font/Helvetica Neue.woff
diff --git a/src/public/font/Helvetica Neue.woff2 b/src/public/font/Helvetica Neue.woff2
new file mode 100644
index 0000000..c02d45d
--- /dev/null
+++ b/src/public/font/Helvetica Neue.woff2
diff --git a/src/public/font/Material Icons.otf b/src/public/font/Material Icons.otf
new file mode 100644
index 0000000..844e52a
--- /dev/null
+++ b/src/public/font/Material Icons.otf
diff --git a/src/public/font/material-icons.ttf b/src/public/font/Material Icons.ttf
index 9d09b0f..9d09b0f 100644
--- a/src/public/font/material-icons.ttf
+++ b/src/public/font/Material Icons.ttf
diff --git a/src/public/font/Material Icons.woff b/src/public/font/Material Icons.woff
new file mode 100644
index 0000000..02d9d8c
--- /dev/null
+++ b/src/public/font/Material Icons.woff
diff --git a/src/public/font/Material Icons.woff2 b/src/public/font/Material Icons.woff2
new file mode 100644
index 0000000..4b3b9d4
--- /dev/null
+++ b/src/public/font/Material Icons.woff2
diff --git a/src/public/font/sfpro.otf b/src/public/font/SF Pro.otf
index 7042365..7042365 100644
--- a/src/public/font/sfpro.otf
+++ b/src/public/font/SF Pro.otf
diff --git a/src/public/font/SF Pro.ttf b/src/public/font/SF Pro.ttf
new file mode 100644
index 0000000..aef375f
--- /dev/null
+++ b/src/public/font/SF Pro.ttf
diff --git a/src/public/font/SF Pro.woff b/src/public/font/SF Pro.woff
new file mode 100644
index 0000000..43226a3
--- /dev/null
+++ b/src/public/font/SF Pro.woff
diff --git a/src/public/font/SF Pro.woff2 b/src/public/font/SF Pro.woff2
new file mode 100644
index 0000000..5f7f7fb
--- /dev/null
+++ b/src/public/font/SF Pro.woff2
diff --git a/src/public/font/sfprobold.otf b/src/public/font/sfprobold.otf
deleted file mode 100644
index 28fa5a4..0000000
--- a/src/public/font/sfprobold.otf
+++ /dev/null
diff --git a/src/public/icons/logo512.png b/src/public/icons/logo512.png
new file mode 100644
index 0000000..2551beb
--- /dev/null
+++ b/src/public/icons/logo512.png
diff --git a/src/public/js/lib.js b/src/public/js/lib.js
index 4d08bab..e19f6c6 100644
--- a/src/public/js/lib.js
+++ b/src/public/js/lib.js
@@ -131,12 +131,12 @@ $.ajaxSetup({
 })
 
 var onImgLoad = function(me) {
-	me.parentElement.classList.remove('image-loading');
-	me.parentElement.classList.add('image-loaded');
+	me.parentElement.classList.remove('loading');
+	me.parentElement.classList.add('loaded');
 }
 
 var onImgError = function(me) {
-	me.parentElement.classList.remove('image-loading');
-	me.parentElement.classList.add('image-loaded');
+	me.parentElement.classList.remove('loading');
+	me.parentElement.classList.add('loaded');
 	me.remove();
 }
diff --git a/src/public/js/post.js b/src/public/js/post.js
index 3c03bae..a7b05c6 100644
--- a/src/public/js/post.js
+++ b/src/public/js/post.js
@@ -104,7 +104,7 @@ $$('.action-new-comment-form').on('submit', function(e) {
 
 $$('.action-like').on('click', function() {
 	let me = $(this);
-	let liked = me.hasClass('btn-blue');
+	let liked = me.hasClass('btn-primary');
 	let like_id = me.attr('likeId');
 	let post_id = me.attr('postId');
 
@@ -119,15 +119,15 @@ $$('.action-like').on('click', function() {
 	}
 
 	const onPatch = () => {
-		let liked = me.hasClass('btn-blue');
-		me.toggleClass('btn-blue');
+		let liked = me.hasClass('btn-primary');
+		me.toggleClass('btn-primary');
 		updateLiked(!liked);
 	}
 
 	const onPost = (data) => {
-		let liked = me.hasClass('btn-blue');
+		let liked = me.hasClass('btn-primary');
 		me.attr('likeId', data[0].id + '');
-		me.toggleClass('btn-blue');
+		me.toggleClass('btn-primary');
 		updateLiked(!liked);
 	}