User profile tweaks

public/style.css

@@ -7516,6 +7516,24 @@ video {
   .bg5-ns {
     background-color: var(--c5);
   }
+  .g0-ns {
+    gap: var(--spacing-0);
+  }
+  .g1-ns {
+    gap: var(--spacing-1);
+  }
+  .g2-ns {
+    gap: var(--spacing-2);
+  }
+  .g3-ns {
+    gap: var(--spacing-3);
+  }
+  .g4-ns {
+    gap: var(--spacing-4);
+  }
+  .g5-ns {
+    gap: var(--spacing-5);
+  }
   .w6-ns {
     width: var(--width-6);
   }
@@ -7548,6 +7566,24 @@ video {
   .bg5-m {
     background-color: var(--c5);
   }
+  .g0-m {
+    gap: var(--spacing-0);
+  }
+  .g1-m {
+    gap: var(--spacing-1);
+  }
+  .g2-m {
+    gap: var(--spacing-2);
+  }
+  .g3-m {
+    gap: var(--spacing-3);
+  }
+  .g4-m {
+    gap: var(--spacing-4);
+  }
+  .g5-m {
+    gap: var(--spacing-5);
+  }
   .w6-m {
     width: var(--width-6);
   }
@@ -7580,6 +7616,24 @@ video {
   .bg5-l {
     background-color: var(--c5);
   }
+  .g0-l {
+    gap: var(--spacing-0);
+  }
+  .g1-l {
+    gap: var(--spacing-1);
+  }
+  .g2-l {
+    gap: var(--spacing-2);
+  }
+  .g3-l {
+    gap: var(--spacing-3);
+  }
+  .g4-l {
+    gap: var(--spacing-4);
+  }
+  .g5-l {
+    gap: var(--spacing-5);
+  }
   .w6-l {
     width: var(--width-6);
   }

src/rawdata/scss/core.css

@@ -384,6 +384,30 @@ on our SVGs to ensure that they naturally render at the right size.)
         background-color: var(--c5);
     }
 
+    .g0-ns {
+        gap: var(--spacing-0);
+    }
+
+    .g1-ns {
+        gap: var(--spacing-1);
+    }
+
+    .g2-ns {
+        gap: var(--spacing-2);
+    }
+
+    .g3-ns {
+        gap: var(--spacing-3);
+    }
+
+    .g4-ns {
+        gap: var(--spacing-4);
+    }
+
+    .g5-ns {
+        gap: var(--spacing-5);
+    }
+
     .w6-ns {
         width: var(--width-6);
     }
@@ -426,6 +450,30 @@ on our SVGs to ensure that they naturally render at the right size.)
         background-color: var(--c5);
     }
 
+    .g0-m {
+        gap: var(--spacing-0);
+    }
+
+    .g1-m {
+        gap: var(--spacing-1);
+    }
+
+    .g2-m {
+        gap: var(--spacing-2);
+    }
+
+    .g3-m {
+        gap: var(--spacing-3);
+    }
+
+    .g4-m {
+        gap: var(--spacing-4);
+    }
+
+    .g5-m {
+        gap: var(--spacing-5);
+    }
+
     .w6-m {
         width: var(--width-6);
     }
@@ -468,6 +516,30 @@ on our SVGs to ensure that they naturally render at the right size.)
         background-color: var(--c5);
     }
 
+    .g0-l {
+        gap: var(--spacing-0);
+    }
+
+    .g1-l {
+        gap: var(--spacing-1);
+    }
+
+    .g2-l {
+        gap: var(--spacing-2);
+    }
+
+    .g3-l {
+        gap: var(--spacing-3);
+    }
+
+    .g4-l {
+        gap: var(--spacing-4);
+    }
+
+    .g5-l {
+        gap: var(--spacing-5);
+    }
+
     .w6-l {
         width: var(--width-6);
     }

src/templates/src/user_profile.html

@@ -30,11 +30,11 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="mw-site pa3 center flex g3">
+<div class="mw-site pt3 center flex flex-column flex-row-l g4 g3-ns">
 	<div class="
-		flex-shrink-0 self-start-l
+		flex-shrink-0
+		mw5-l ph3 ph0-l overflow-hidden
 		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="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
@@ -166,7 +166,7 @@
 	</div>
     <div class="flex-grow-1 overflow-hidden flex flex-column g3">
 		{{ if or .OwnProfile .ProfileUserProjects }}
-			<div class="ph3 ph0-ns">
+			<div class="ph3 ph0-l">
 				<h2 class="mb2">{{ if .OwnProfile }}My {{ end }}Projects</h2>
 				<div class="flex flex-column g2">
 					{{ range .ProfileUserProjects }}
@@ -183,7 +183,7 @@
 			</div>
 		{{ end }}
 		{{ if or .OwnProfile (gt (len .TimelineItems) 0) }}
-			<div class="timeline-container ph3 ph0-ns flex flex-column g2">
+			<div class="timeline-container ph3 ph0-l flex flex-column g2">
 				<div class="flex flex-column g1">
 					<div class="flex flex-row items-center">
 						<h2 id="recent">Recent Activity</h2>