From 2882c49b2b4685b4c3f005935008e69bc08accf5 Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Wed, 27 Oct 2021 21:54:20 -0500
Subject: [PATCH] Improve project styles or something

---
 src/templates/src/include/header.html   |  2 +-
 src/templates/src/project_homepage.html | 33 +++++++------
 src/templates/src/user_profile.html     | 64 +++++++++++++------------
 3 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html
index e57b63b0..fc331aef 100644
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@@ -34,7 +34,7 @@
                     <div>made</div>
                 </a>
                 <a href="{{ .Project.Url }}">
-                    <h2 class="mb0 mt2 mt0-ns ml3-ns">{{ .Project.Name }}</h2>
+                    <h2 class="mb0 mt2 mt0-ns mh3 mr0-ns tc tl-ns">{{ .Project.Name }}</h2>
                 </a>
                 {{ with .Header.Project }}
                     <div class="{{ $itemsClass }}">
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index 0ccdae37..da2b24ca 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -7,27 +7,32 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="flex flex-column flex-row-ns">
-    <div class="sidebar flex-shrink-0 mw5 self-center self-start-ns mh3 ml0-ns overflow-hidden">
-		<img alt="{{ .Project.Name }}" class="br3" src="{{ .Project.Logo }}" />
-		<a href="{{ .CurrentProjectUrl }}">
-			<h2 class="mt3">{{ .Project.Name }}</h2>
-		</a>
-		<div class="mt3">
+<div class="flex flex-column flex-row-l">
+    <div class="
+		sidebar flex-shrink-0 self-start-l
+		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
+		mw5-l mh3 ml0-ns mb3 overflow-hidden
+	">
+		<div class="w-100 w5-ns flex-shrink-0 flex justify-center">
+			<img alt="{{ .Project.Name }}" class="br3" src="{{ .Project.Logo }}">
+		</div>
+		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
 			<div class="mb3">
 				{{ range $i, $owner := .Owners }}
-					<div class="flex mv3 items-center {{ if eq $i 0 }}mt2{{ end }}">
+					<div class="flex mb3 items-center">
 						<img class="avatar-icon mr2" src="{{ $owner.AvatarUrl }}" />
 						<a class="user-link" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
 					</div>
 				{{ end }}
 			</div>
-			{{ range .ProjectLinks }}
-				<div class="pair flex">
-					<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
-					<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
-				</div>
-			{{ end }}
+			<div class="w-100 w-auto-ns w-100-l">
+				{{ range .ProjectLinks }}
+					<div class="pair flex">
+						<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
+						<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
+					</div>
+				{{ end }}
+			</div>
 		</div>
 	</div>
 	<div class="flex-grow-1 overflow-hidden">
diff --git a/src/templates/src/user_profile.html b/src/templates/src/user_profile.html
index 57c94df0..0acb76e6 100644
--- a/src/templates/src/user_profile.html
+++ b/src/templates/src/user_profile.html
@@ -2,6 +2,39 @@
 
 {{ define "content" }}
 <div class="flex flex-column flex-row-l">
+	<div class="
+		sidebar flex-shrink-0 self-start-l
+		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
+		mw5-l mh3 ml0-ns mb3 overflow-hidden
+	">
+		<div class="w-100 w5-ns flex-shrink-0 flex justify-center">
+			<img class="br3" alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
+		</div>
+		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column items-start overflow-hidden">
+			{{ with or .ProfileUser.Bio .ProfileUser.Blurb }}
+				<div class="mb3">{{ . }}</div>
+			{{ end }}
+			<div class="w-100 w-auto-ns">
+				{{ if .ProfileUser.Email }}
+					<div class="pair flex">
+						<div class="key flex-auto flex-shrink-0 mr2">Email</div>
+						<div class="value projectlink truncate">{{ .ProfileUser.Email }}</div>
+					</div>
+				{{ end }}
+				{{ range .ProfileUserLinks }}
+					<div class="pair flex">
+						<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
+						<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
+					</div>
+				{{ end }}
+
+				<div class="pair flex">
+					<div class="key flex-auto flex-shrink-0 mr2">Member since</div>
+					<div class="value projectlink truncate">{{ absoluteshortdate .ProfileUser.DateJoined }}</div>
+				</div>
+			</div>
+		</div>
+	</div>
     <div class="flex-grow-1 overflow-hidden">
 		{{ with .ProfileUserProjects }}
 			<div class="content-block ph3 ph0-ns">
@@ -37,37 +70,6 @@
 			</div>
 		{{ end }}
 	</div>
-    <div class="sidebar flex-shrink-0 mw6 w-30-l self-center self-start-l mh3 mh0-ns ml3-l overflow-hidden">
-		<div class="content-block box avatar">
-			<img alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}" />
-		</div>
-		<div class="content-block box list">
-			<div class="content-block">
-				<div class="description">
-					<p>{{ .ProfileUser.Bio }}</p>
-				</div>
-			</div>
-
-			<div class="pair flex flex-wrap">
-				<div class="key flex-auto mr1">Member since</div>
-				<div class="value">{{ absoluteshortdate .ProfileUser.DateJoined }}</div>
-			</div>
-
-			{{ if .ProfileUser.Email }}
-				<div class="pair flex flex-wrap">
-					<div class="key flex-auto mr1">Email</div>
-					<div class="value">{{ .ProfileUser.Email }}</div>
-				</div>
-			{{ end }}
-
-			{{ range .ProfileUserLinks }}
-				<div class="pair flex flex-wrap">
-					<div class="key flex-auto mr1">{{ .Name }}</div>
-					<div class="value projectlink"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
-				</div>
-			{{ end }}
-		</div>
-	</div>
 </div>
 <script>
 	const filterTitles = [];