7 files changed, 141 insertions, 47 deletions
diff --git a/src/public/css/common.css b/src/public/css/common.css
index 0750b8a..281df6b 100644
--- a/src/public/css/common.css
+++ b/src/public/css/common.css
@@ -170,6 +170,21 @@ a, button {
 	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;
@@ -205,6 +220,7 @@ input.btn:focus {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	z-index: 5;
 }
 
 .nav {
@@ -224,7 +240,7 @@ input.btn:focus {
 	flex: 1;
 	justify-content: center;
 	height: 100%;
-	z-index: 2;
+	z-index: 6;
 }
 
 @media (min-width: 800px) {
@@ -274,6 +290,11 @@ input.btn:focus {
 	.nav-center .btn.active {
 		border-bottom: none;
 	}
+
+	.nav .btn-border::before {
+		background: inherit;
+	}
+
 }
 
 .nav-right .image-loading {
@@ -305,6 +326,10 @@ input.btn:focus {
   animation: shimmer 1s linear infinite;
 }
 
+.image-loaded {
+	background-color: var(--base);
+}
+
 .card {
 	background-color: var(--surface0);
 	border-radius: .5rem;
@@ -393,6 +418,14 @@ input.btn:focus {
 	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 {
diff --git a/src/public/css/home.css b/src/public/css/home.css
index 3c2a3a1..3fdc381 100644
--- a/src/public/css/home.css
+++ b/src/public/css/home.css
@@ -2,11 +2,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-}
-
-.card {
-	width: 40rem;
-	margin-bottom: 1rem;
+	padding: 1rem;
+	padding-bottom: 0;
 }
 
 .new-post-modal textarea {
diff --git a/src/public/css/people.css b/src/public/css/people.css
index 279c839..6b07eff 100644
--- a/src/public/css/people.css
+++ b/src/public/css/people.css
@@ -11,42 +11,20 @@
 }
 
 #people-container {
-	margin-left: auto;
-	margin-right: auto;
+	display: grid;
+	width: 100%;
 	padding: 1rem 2rem;
-	padding-bottom: 0;
-	flex-direction: row;
-	align-items: center;
-	flex-wrap: wrap;
-	max-width: 90rem;
+	margin-bottom: 1rem;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr) );
+	grid-auto-rows: max-content;
+	grid-gap: 2rem;
 }
 
 .profile {
-	width: 25rem;
-}
-
-@media(max-width: 1400px) {
-	#people-container {
-		max-width: 70rem;
-	}
-	.profile {
-		width: 25rem;
-	}
-}
-
-@media(max-width: 1000px) {
-	#people-container {
-		max-width: 50rem;
-	}
-	.profile {
-		width: 20rem;
-	}
-}
-
-.profile {
-	margin: 1rem;
+	width: 16rem;
 	text-decoration: none;
-	height: fit-content;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .profile:hover {
@@ -54,16 +32,22 @@
 }
 
 .profile strong {
-	font-size: 2rem;
+	font-size: 1.5rem;
 }
 
 .profile .pfp, .profile .pfp img {
 	padding: none;
 	margin: none;
-	height: 6rem;
+	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);
diff --git a/src/public/css/post.css b/src/public/css/post.css
index 6fd7ca0..2b6a4b1 100644
--- a/src/public/css/post.css
+++ b/src/public/css/post.css
@@ -8,6 +8,22 @@
 	justify-content: center;
 }
 
+.post, #new-post {
+	margin-bottom: 1rem;
+	width: 40rem;
+}
+
 .post {
 	padding-bottom: 0;
 }
+
+@media(max-width: 40rem) {
+	.post, #new-post {
+		width: 100%;
+	}
+}
+
+.post .likes {
+	display: block;
+	padding-top: .25rem;
+}
diff --git a/src/public/css/profile.css b/src/public/css/profile.css
index a16fdfd..71cbbfa 100644
--- a/src/public/css/profile.css
+++ b/src/public/css/profile.css
@@ -4,17 +4,34 @@
 	padding: 0;
 }
 
-#profile-header {
+#profile-header-container {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
 	background-color: var(--surface0);
-	margin-bottom: 2rem;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid var(--surface1);
+}
+
+#profile-header {
+	min-width: 0;
+	max-width: 80rem;
+	flex-grow: 1;
 }
 
 #profile-header .banner {
 	width: 100%;
-	min-height: 20rem;
+	min-height: 30rem;
 	aspect-ratio: 5;
 }
 
+#profile-header .banner img {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+}
+
 #profile-header .info .pfp-wrapper .pfp,
 #profile-header .info .pfp-wrapper .pfp img {
 	height: 12.5rem;
@@ -32,7 +49,7 @@
 	border-radius: 100%;
 	position: absolute;
 	top: -2.5rem;
-	left: 2rem;
+	left: 1rem;
 }
 
 #profile-header .info .content {
@@ -65,13 +82,27 @@
 	text-align: center;
 }
 
-#tab-posts,
+.tab {
+	max-width: 80rem;
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0 1rem;
+	margin-bottom: 1rem;
+}
+
 #post-container {
-	width: 40rem;
+	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;
+}
diff --git a/src/public/js/lib.js b/src/public/js/lib.js
index 19019ad..95f83b7 100644
--- a/src/public/js/lib.js
+++ b/src/public/js/lib.js
@@ -13,7 +13,8 @@ var $$ = (selector) => {
 		'click',
 		'submit',
 		'each',
-		'error'
+		'error',
+		'one'
 	];
 
 	let vtable = {};
@@ -46,9 +47,9 @@ var $$ = (selector) => {
 				let config = { childList: true, subtree: true };
     			let MutationObserver = window.MutationObserver;
     			let observer = new MutationObserver(onMutate);
+
 				observer.observe(document.body, config);
 			});
-
 		};
 	}
 
@@ -121,3 +122,14 @@ $.ajaxSetup({
 	})(),
 	error: errorToastAjax
 })
+
+var onImgLoad = function(me) {
+	me.parentElement.classList.remove('image-loading');
+	me.parentElement.classList.add('image-loaded');
+}
+
+var onImgError = function(me) {
+	me.parentElement.classList.remove('image-loading');
+	me.parentElement.classList.add('image-loaded');
+	me.remove();
+}
diff --git a/src/public/js/post.js b/src/public/js/post.js
index 38bbb78..3c03bae 100644
--- a/src/public/js/post.js
+++ b/src/public/js/post.js
@@ -45,8 +45,15 @@ $$('#action-load-posts').on('click', function() {
 	let pageSize = Number(me.attr('pageSize'));
 	let postCount = Number(me.attr('postCount'));
 	let postMax = Number(me.attr('postMax'));
+	let filterUid = me.attr('userId');
 
 	let url = '/_util/post/posts?page=' + page + '&max=' + postMax;
+
+	if (!isNaN(filterUid)) {
+		console.log(filterUid);
+		url += '&user_id=' + filterUid;
+	}
+
 	$.get(url, function (data) {
 		if (data === '') {
 			me.remove();
@@ -101,13 +108,27 @@ $$('.action-like').on('click', function() {
 	let like_id = me.attr('likeId');
 	let post_id = me.attr('postId');
 
+	const updateLiked = (liked) => {
+		let post = me.closest('.post');
+		let likes = post.find('.likes');
+		let count = likes.find('.count');
+
+		let c = Number(count[0].textContent);
+		c += liked ? 1 : -1;
+		count[0].textContent = c;
+	}
+
 	const onPatch = () => {
+		let liked = me.hasClass('btn-blue');
 		me.toggleClass('btn-blue');
+		updateLiked(!liked);
 	}
 
 	const onPost = (data) => {
+		let liked = me.hasClass('btn-blue');
 		me.attr('likeId', data[0].id + '');
 		me.toggleClass('btn-blue');
+		updateLiked(!liked);
 	}
 
 	if (like_id) {