From a86645a576fd10620bb391127f53f90fa2dcd374 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Sat, 26 Aug 2023 05:45:17 +0200
Subject: [PATCH] moved profile stats under the header image

---
 assets/dist/profile.css | 51 ++++++++++++++++++++++-------------------
 template/profile.tmpl   | 16 +++++++------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/assets/dist/profile.css b/assets/dist/profile.css
index 83083fb..009556f 100644
--- a/assets/dist/profile.css
+++ b/assets/dist/profile.css
@@ -1,4 +1,3 @@
-
 /*
 	GoToSocial
 	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@@ -78,9 +77,9 @@
 		grid-template-columns: var(--avatar-size) auto 1fr;
 		grid-template-rows: var(--overlap) var(--name-size) auto;
 		grid-template-areas:
-			"avatar . ."
-			"avatar displayname displayname"
-			"avatar username role";
+			" avatar  .            .            .     "
+			" avatar  displayname  displayname  stats "
+			" avatar  username     role         stats ";
 
 		margin: 1rem;
 		margin-top: calc(-1 * var(--overlap));
@@ -156,9 +155,10 @@
 			grid-template-columns: auto 1fr;
 			grid-template-rows: var(--avatar-size) var(--name-size) auto;
 			grid-template-areas:
-				"avatar avatar"
-				"displayname displayname"
-				"username role";
+				" avatar       avatar      "
+				" displayname  displayname "
+				" username     role        "
+				" stats        stats       ";
 		}
 
 			.profile .header .basic-info .displayname {
@@ -220,6 +220,7 @@
 
 .profile .toots .toot {
 		border-radius: 0;
+		padding-top: 0;
 	}
 
 .profile .toots .toot .info {
@@ -257,20 +258,20 @@
 .profile .about-user .fields {
 		background: var(--profile-bg);
 		display: grid;
-		grid-template-columns: 6rem auto;
+		grid-template-columns: auto auto;
+		padding: 0.5rem;
 	}
 
 .profile .about-user .fields > * {
 		padding: 0.5rem;
 	}
 .profile .about-user .fields > b {
-				align-self: flex-end;
-				justify-self: center;
+				align-self: center;
+				justify-self: flex-end;
 			}
 .profile .about-user .fields > span {
 			}
-.profile .about-user .fields > span + b,
-.profile .about-user .fields > span + b + span {
+.profile .about-user .fields > span + b {
 				border-top: 0.1rem solid var(--gray2);
 			}
 
@@ -279,18 +280,20 @@
 		padding: 1rem;
 	}
 
-.profile .about-user .accountstats {
-		background: var(--bg-accent);
-		padding: 0.5rem;
-
+.profile .accountstats {
+		grid-area: stats;
 		display: grid;
-		grid-template-columns: 6rem auto;
-		gap: 0.5rem 1rem;
+		grid-auto-flow: column;
+		grid-template: repeat(2, 1fr) / repeat(4, auto);
+		gap: 0 1rem;
+		align-self: center;
 	}
-.profile .about-user .accountstats > b {
-	justify-self: end;
-	font-weight: normal;
-}
-.profile .about-user .accountstats > b + * {
-	justify-self: start;
+
+.profile .accountstats > * {
+		padding: 0.5rem;
+		justify-self: center;
+	}
+
+.profile .accountstats > b {
+	border-bottom: 0.1rem solid var(--gray2);
 }
diff --git a/template/profile.tmpl b/template/profile.tmpl
index 2cb2ad1..86759e8 100644
--- a/template/profile.tmpl
+++ b/template/profile.tmpl
@@ -48,7 +48,15 @@
 				{{ end }}
 			</div>
 			{{ end }}
+
+			<div class="accountstats">
+				<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
+				<b>posts</b><span>{{.account.StatusesCount}}</span>
+				<b>followers</b><span>{{.account.FollowersCount}}</span>
+				<b>follows</b><span>{{.account.FollowingCount}}</span>
+			</div>
 		</div>
+
 	</div>
 
 	<div class="column-split">
@@ -70,12 +78,6 @@
 				{{ end }}
 			</div>
 
-			<div class="accountstats">
-				<b>join</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
-				<b>posts</b><span>{{.account.StatusesCount}}</span>
-				<b>follows</b><span>{{.account.FollowingCount}}</span>
-				<b>followers</b><span>{{.account.FollowersCount}}</span>
-			</div>
 		</section>
 
 		<section class="toots">
@@ -97,7 +99,7 @@
 				<h2 id="recent" tabindex="-1">Recent posts</h2>
 				{{ if .rssFeed }}
 				<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
-					<i class="fa fa-rss-square" aria-hidden="true"></i>
+					<img src="/rss.svg" width="24" height="24">
 				</a>
 				{{ end }}
 			</div>