profile css + other css changes

3 files changed, 106 insertions, 20 deletions

diff --git a/src/public/css/common.css b/src/public/css/common.css
index 8535564..0750b8a 100644
--- a/src/public/css/common.css
+++ b/src/public/css/common.css
@@ -219,6 +219,7 @@ input.btn:focus {
 .nav-center {
 	position: absolute;
 	left: 50%;
+	top: 0;
 	transform: translateX(-50%);
 	flex: 1;
 	justify-content: center;
@@ -542,6 +543,8 @@ input:not(:placeholder-shown) + label:not(.static) {
 
 input[type=radio] {
 	padding: 3rem !important;
+	width: 1rem !important;
+	outline: none !important;
 }
 
 .radio {
diff --git a/src/public/css/people.css b/src/public/css/people.css
index be1e507..279c839 100644
--- a/src/public/css/people.css
+++ b/src/public/css/people.css
@@ -14,19 +14,39 @@
 	margin-left: auto;
 	margin-right: auto;
 	padding: 1rem 2rem;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-row-gap: 2rem;
-	grid-auto-rows: 1fr;
-	flex-direction: column;
+	padding-bottom: 0;
+	flex-direction: row;
 	align-items: center;
+	flex-wrap: wrap;
 	max-width: 90rem;
 }
 
 .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;
 	text-decoration: none;
-	height: 100%;
+	height: fit-content;
 }
 
 .profile:hover {
@@ -44,20 +64,6 @@
 	border-radius: .3rem;
 }
 
-@media(max-width: 1400px) {
-	#people-container {
-		max-width: 90rem;
-		grid-template-columns: 1fr 1fr;
-	}
-}
-
-@media(max-width: 1000px) {
-	#people-container {
-		max-width: 50rem;
-		grid-template-columns: 1fr;
-	}
-}
-
 td:nth-child(1) {
 	font-weight: bold;
 	color: var(--subtext);
diff --git a/src/public/css/profile.css b/src/public/css/profile.css
new file mode 100644
index 0000000..a16fdfd
--- /dev/null
+++ b/src/public/css/profile.css
@@ -0,0 +1,77 @@
+#main-content {
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+}
+
+#profile-header {
+	background-color: var(--surface0);
+	margin-bottom: 2rem;
+}
+
+#profile-header .banner {
+	width: 100%;
+	min-height: 20rem;
+	aspect-ratio: 5;
+}
+
+#profile-header .info .pfp-wrapper .pfp,
+#profile-header .info .pfp-wrapper .pfp img {
+	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: 2rem;
+}
+
+#profile-header .info .content {
+	margin-left: 17rem;
+	margin-top: 2rem;
+}
+
+#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-posts,
+#post-container {
+	width: 40rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#post-container .post {
+	margin-bottom: 1rem;
+}