basic project list

src/pages/events.astro

@@ -32,8 +32,6 @@ for (const year of pastYears.reverse()) {
 ---
 
 <BaseLayout title="Events">
-    <div>
-    </div>
 
 	<div class="middle-pane-medium mt-10">
 

src/pages/research.astro

@@ -1,13 +1,24 @@
 ---
 
 import BaseLayout from '../layouts/base.astro';
+import core from '../core.json';
+
+const research = core.projects.filter(x => x.type && x.type === "research");
 
 ---
 
 <BaseLayout title="Research">
 
 	<div class="middle-pane-medium mt-10">
-		<p>My page content, wrapped in a layout!</p>
+
+		<h1 id="upcoming">Research ({research.length})</h1>
+
+		{research.map((item) => (
+			<div class="w3pn-project-item">
+				<a href={item.links.docs} class="block p-6 text-white text-xl">{item.name}</a>
+			</div>
+		))}
+
 	</div>
 
 </BaseLayout>

src/styles/base.css

@@ -148,6 +148,14 @@
   .w3pn-hp-grid > div {
     @apply aspect-video bg-[#0f0f0f] grid grid-rows-2 hover:bg-[#202020] cursor-pointer;
   }
+
+  .w3pn-project-item {
+    @apply w-full border border-[#202020] mb-3;
+  }
+
+  .w3pn-project-item a:hover {
+    @apply bg-[#0f0f0f]/30;
+  }
   
   .w3pn-event-item {
     @apply w-full border border-[#202020] mb-3;