diff --git a/public/style.css b/public/style.css
index 541c4bd..21a8624 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7183,10 +7183,12 @@ code {
   --notice-warn-color: #aa7d30;
   --notice-failure-color: #b42222;
   --spoiler-border: #aaa;
+  --site-width: 80rem;
+  --site-width-narrow: 60rem;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-color: #202020;
+    --background-color: #2f2f2f;
     --color: #eee;
     --link-color: #cc3b95;
     --dim-color: #bbb;
@@ -7202,6 +7204,7 @@ code {
     --main-background-color-transparent: rgba(#202020, 0);
     --card-background: #494949;
     --card-background-hover: #333;
+    --card-background-transparent: #242424D8;
     --dim-background: #252525;
     --dim-background-transparent: rgba(#252525, 0);
     --forum-thread-read-color: #777;
@@ -7226,7 +7229,7 @@ br {
 body {
   background-color: var(--background-color);
   color: var(--color);
-  font-family: "Fira Sans", sans-serif;
+  font-family: "Inter", sans-serif;
   min-height: 100vh;
   box-sizing: border-box;
 }
@@ -7242,6 +7245,9 @@ a.external::after,
   content: " 1";
   vertical-align: middle;
 }
+.link--normal {
+  --link-color: var(--color);
+}
 b,
 strong {
   font-weight: 500;
@@ -7380,7 +7386,10 @@ pre,
   font-size: 0.65rem;
 }
 .mw-site {
-  max-width: 80rem;
+  max-width: var(--site-width);
+}
+.mw-site-narrow {
+  max-width: var(--site-width-narrow);
 }
 .mh-3 {
   max-height: var(--height-3);
@@ -7502,6 +7511,9 @@ pre,
 .hide-if-empty:empty {
   display: none !important;
 }
+.fill-current {
+  fill: currentColor;
+}
 @media screen and (min-width: 35em) {
   .bi-avoid-ns {
     break-inside: avoid;
@@ -8429,18 +8441,13 @@ span.icon-rss::before {
 .project-card {
   color: var(--fg-font-color);
   background-color: var(--card-background);
-  border-color: var(--project-card-border-color);
-  transition: box-shadow 0.2s, background-color 0.2s;
+}
+.project-card.project-card-black {
+  background-color: var(--card-background-transparent);
 }
 .slideshow .project-card {
   margin-top: 8px;
 }
-.project-card:hover {
-  background-color: var(--card-background-hover);
-}
-.project-card:hover > .title {
-  text-decoration: underline;
-}
 .project-card .image-container {
   --image-size: 8rem;
   width: var(--image-size);
@@ -8452,9 +8459,6 @@ span.icon-rss::before {
   top: 0;
   bottom: 0;
 }
-.project-card .details {
-  transition: background-color 0.2s;
-}
 .project-card .badges:empty {
   display: none;
 }
diff --git a/src/rawdata/scss/core.css b/src/rawdata/scss/core.css
index 25060bb..47ca0dd 100644
--- a/src/rawdata/scss/core.css
+++ b/src/rawdata/scss/core.css
@@ -13,7 +13,7 @@ br {
 body {
     background-color: var(--background-color);
     color: var(--color);
-    font-family: "Fira Sans", sans-serif;
+    font-family: "Inter", sans-serif;
     min-height: 100vh;
     box-sizing: border-box;
 }
@@ -31,6 +31,10 @@ a,
     }
 }
 
+.link--normal {
+    --link-color: var(--color);
+}
+
 b,
 strong {
     font-weight: 500;
@@ -209,7 +213,11 @@ pre,
 }
 
 .mw-site {
-    max-width: 80rem;
+    max-width: var(--site-width);
+}
+
+.mw-site-narrow {
+    max-width: var(--site-width-narrow);
 }
 
 .mh-3 {
@@ -372,6 +380,10 @@ pre,
     display: none !important;
 }
 
+.fill-current {
+    fill: currentColor;
+}
+
 @media screen and (min-width: 35em) {
     .bi-avoid-ns {
         break-inside: avoid;
diff --git a/src/rawdata/scss/projects.css b/src/rawdata/scss/projects.css
index cc1ce11..8070624 100644
--- a/src/rawdata/scss/projects.css
+++ b/src/rawdata/scss/projects.css
@@ -53,22 +53,15 @@
 .project-card {
   color: var(--fg-font-color);
   background-color: var(--card-background);
-  border-color: var(--project-card-border-color);
 
-  transition: box-shadow 0.2s, background-color 0.2s;
+  &.project-card-black {
+    background-color: var(--card-background-transparent);
+  }
 
   .slideshow & {
     margin-top: 8px;
   }
 
-  &:hover {
-    background-color: var(--card-background-hover);
-
-    &>.title {
-      text-decoration: underline;
-    }
-  }
-
   .image-container {
     --image-size: 8rem;
 
@@ -83,11 +76,6 @@
     }
   }
 
-  .details {
-    /* Background color given by theme */
-    transition: background-color 0.2s;
-  }
-
   .badges:empty {
     display: none;
   }
diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css
index 5e0f29d..9bfbe3e 100644
--- a/src/rawdata/scss/vars.css
+++ b/src/rawdata/scss/vars.css
@@ -47,11 +47,14 @@ $breakpoint-large: screen and (min-width: 60em)
     --notice-failure-color: #b42222;
 
     --spoiler-border: #aaa;
+
+    --site-width: 80rem;
+    --site-width-narrow: 60rem;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #202020;
+        --background-color: #2f2f2f;
         --color: #eee;
         --link-color: #cc3b95;
 
@@ -73,6 +76,7 @@ $breakpoint-large: screen and (min-width: 60em)
         /* --card-background: #282828; */
         --card-background: #494949;
         --card-background-hover: #333;
+        --card-background-transparent: #242424D8;
 
         --dim-background: #252525;
         --dim-background-transparent: rgba(#252525, 0);
diff --git a/src/templates/src/include/footer-2024.html b/src/templates/src/include/footer-2024.html
index 10d36ca..afeae00 100644
--- a/src/templates/src/include/footer-2024.html
+++ b/src/templates/src/include/footer-2024.html
@@ -1,5 +1,5 @@
 <footer>
-    <div class="mv5 h3 fill-current link--white">
+    <div class="mv5 h3 fill-current link--normal">
         <a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
     </div>
 </footer>
diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html
index 2ef47f6..1a0314d 100644
--- a/src/templates/src/include/header-2024.html
+++ b/src/templates/src/include/header-2024.html
@@ -1,4 +1,4 @@
-<header id="site-header" class="flex flex-row items-center link--white">
+<header id="site-header" class="flex flex-row items-center link--normal">
 	<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
 		Handmade
 	</a>
diff --git a/src/templates/src/include/project_card.html b/src/templates/src/include/project_card.html
index ba9b911..9a1f0e8 100644
--- a/src/templates/src/include/project_card.html
+++ b/src/templates/src/include/project_card.html
@@ -6,13 +6,15 @@
 		</div>
 	{{ end }}
 	<div class="details pa3 flex-grow-1">
-		<h3 class="mb2 f4">{{ .Project.Name }}</h3>
+		<h3 class="b mb2 f4">{{ .Project.Name }}</h3>
 		<div class="blurb">{{ .Project.Blurb }}</div>
-		<div class="badges mt2">
-			{{ if .Project.LifecycleString }}
+		<hr>
+		<div>TODO: Authors</div>
+		{{ if .Project.LifecycleString }}
+			<div class="badges mt2">
 				<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span>
-			{{ end }}
-		</div>
+			</div>
+		{{ end }}
 	</div>
 </a>
 
diff --git a/src/templates/src/layouts/base-2024.html b/src/templates/src/layouts/base-2024.html
index 922b2fa..6164210 100644
--- a/src/templates/src/layouts/base-2024.html
+++ b/src/templates/src/layouts/base-2024.html
@@ -34,202 +34,6 @@
 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
 
-	<style>
-		:root {
-			--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
-			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
-			--white: #fff;
-			--bg-button: rgba(255, 255, 255, 0);
-			--bg-button-hover: rgba(255, 255, 255, 0.1);
-			--charcoal: #2F2F2F;
-			--gray: #CBCBCB;
-			--rich-gray: #494949;
-
-			--spacing-0: 0;
-			--spacing-1: .25rem;
-			--spacing-2: .5rem;
-			--spacing-3: 1rem;
-			--spacing-4: 2rem;
-			--spacing-5: 4rem;
-			--spacing-6: 8rem;
-			--spacing-7: 16rem;
-			--border-radius-2: 0.25rem;
-
-			--link-color: transparent;
-		}
-
-		body {
-			font-family: "Inter", "Fira Sans", sans-serif;
-			font-size: 1rem; /* remove this override when base stylesheet is less dumb */
-		}
-
-		h1, h2, h3, h4, h5, h6 {
-			font-weight: 700;
-		}
-
-		.w2-5 {
-			width: 3rem;
-		}
-
-		.link--white {
-			--link-color: var(--white);
-		}
-
-		.post-content p {
-			/* stupid override, should be done by .post-content instead of .content */
-			margin: 0.6rem 0;
-		}
-
-		.bg--theme-gradient-dark {
-			background: var(--theme-gradient-dark);
-		}
-
-		.bg--theme-gradient-light {
-			background: var(--theme-gradient-light);
-		}
-
-		.bg--charcoal {
-			background: var(--charcoal);
-		}
-
-		.bg--rich-gray {
-			background: var(--rich-gray);
-		}
-
-		.bg--gray {
-			background: var(--gray);
-		}
-
-		.b--charcoal {
-			border-color: var(--charcoal);
-		}
-
-		.b--rich-gray {
-			border-color: var(--rich-gray);
-		}
-
-		.c--theme-gradient-dark {
-			background: var(--theme-gradient-dark);
-			background-clip: text;
-			-webkit-background-clip: text;
-			color: transparent;
-		}
-
-		a, .c--theme-gradient-light {
-			background: var(--theme-gradient-light);
-			background-clip: text;
-			-webkit-background-clip: text;
-		}
-
-		.c--theme-gradient-light {
-			color: transparent;
-		}
-
-		.c--gray {
-			color: var(--gray);
-		}
-
-		.btn--jam {
-			border: 1px solid var(--white);
-			border-radius: var(--border-radius-2);
-			padding: var(--spacing-2) var(--spacing-3);
-
-			background-color: var(--bg-button);
-		}
-
-		.btn--jam.small {
-			padding: var(--spacing-1) var(--spacing-2);
-		}
-
-		.btn--jam:hover {
-			background-color: var(--bg-button-hover);
-		}
-
-		.button-simple {
-			background: var(--bg-button);
-			border: 1px solid var(--white);
-		}
-
-		.button-simple:hover {
-			background: var(--bg-button-hover);
-		}
-
-		.c-white {
-			color: var(--white);
-		}
-
-		.invisible {
-			visibility: hidden;
-		}
-
-		.svg-mask {
-			mask: var(--mask-url);
-			-webkit-mask: var(--mask-url);
-		}
-
-		.fill-current {
-			fill: currentColor;
-		}
-
-		.square {
-			aspect-ratio: 1 / 1;
-		}
-
-		.wide-screen {
-			aspect-ratio: 16 / 9;
-		}
-
-		.iframe-fill iframe {
-			flex-grow: 1;
-		}
-
-		.jam-logo {
-			max-width: 18rem;
-		}
-
-		.jam-logo-small {
-			max-width: 8rem;
-		}
-
-		.jam-title {
-			/* align with the width of the logo */
-			font-size: 2.76rem;
-			font-weight: 700;
-			/* align with the text's actual bounding box */
-			line-height: 1.18;
-			margin-top: -0.18em;
-			margin-left: -0.03em;
-			margin-right: -0.03em;
-		}
-
-		.jam-title.small {
-			font-size: 2.25rem;
-			/* align with the text's actual bounding box */
-			line-height: 1.18;
-			margin-top: -0.18em;
-			margin-left: -0.03em;
-			margin-right: -0.03em;
-		}
-
-		/* not small */
-		@media screen and (min-width: 35em) {
-			.jam-logo {
-				max-width: 24rem;
-			}
-
-			.jam-title {
-				font-size: 3.7rem;
-			}
-		}
-
-		/* not small */
-		@media screen and (min-width: 35em) {
-			.flex-basis-40-ns {
-				flex-basis: 40%;
-			}
-		}
-	</style>
-
 	{{ template "extrahead" . }}
 </head>
 
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index 98f4a79..4e515bb 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -8,40 +8,38 @@
 {{ end }}
 
 {{ 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 br3 overflow-hidden">
-			{{ if .Project.Logo }}
-				<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
-			{{ else }}
-				<div class="bg--dim w-100 aspect-ratio--1x1 relative">
-					<div class="aspect-ratio--object flex justify-center items-center f3 b c--dimmest tc">{{ .Project.Name }}</div>
+<div class="flex flex-row justify-center">
+	<div class="flex-grow-1 flex flex-column items-center mw-site">
+		<div class="w-100 h5 bg-white-50"></div>
+		<div class="w-100 mw-site-narrow flex justify-center" style="margin-top: -3rem">
+			{{ template "project_card.html" projectcarddata .Project "flex-grow-1 project-card-black" }}
+		</div>
+		{{ if .Project.ParsedDescription }}
+			<div class="description w-100 mw-site-narrow pt4 post-content">
+				<h3>About {{ .Project.Name }}</h3>
+				<!-- TODO: Make this collapsible -->
+				{{ .Project.ParsedDescription }}
+			</div>
+		{{ end }}
+		{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
+			<div class="w-100 pt4">
+				<div class="flex flex-row items-center mb2">
+					<h2 id="recent">Recent Activity</h2>
+					<div class="flex-grow-1"></div>
+					{{ if .Header.Project.CanEdit }}
+						<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
+					{{ end }}
+				</div>
+				<div class="timeline">
+					{{ range .RecentActivity }}
+						{{ template "timeline_item.html" . }}
+					{{ end }}
 				</div>
-			{{ end }}
-		</div>
-		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
-			<div class="mb3">
-				{{ range $i, $owner := .Owners }}
-					<div class="flex mb3 items-center">
-						<img class="avatar mr2" src="{{ $owner.AvatarUrl }}" />
-						<a class="rel" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
-					</div>
-				{{ end }}
 			</div>
-			<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>
+		{{ end }}
 	</div>
+</div>
+<div class="flex flex-column flex-row-l">
 	<div class="flex-grow-1 overflow-hidden">
 		{{ with .Screenshots }}
 			<div class="carousel-container mw-100 mb3">
@@ -68,29 +66,7 @@
 				</div>
 			</div>
 		{{ end }}
-		<div class="description ph3 ph0-ns post-content">
-			{{ if .Project.ParsedDescription }}
-				{{ .Project.ParsedDescription }}
-			{{ else }}
-				{{ .Project.Blurb }}
-			{{ end }}
-		</div>
-		{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
-			<div class="content-block timeline-container ph3 ph0-ns mv4">
-				<div class="flex flex-row items-center mb2">
-					<h2 id="recent">Recent Activity</h2>
-					<div class="flex-grow-1"></div>
-					{{ if .Header.Project.CanEdit }}
-						<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
-					{{ end }}
-				</div>
-				<div class="timeline">
-					{{ range .RecentActivity }}
-						{{ template "timeline_item.html" . }}
-					{{ end }}
-				</div>
-			</div>
-		{{ end }}
+		
 	</div>
 </div>
 {{ if .User }}