i did thing oh god large commit

5 files changed, 106 insertions, 45 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;
+}