Layout for project

rauhala.info/css/index.css

@@ -595,6 +595,14 @@ video {
   margin-bottom: 2.5rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -692,6 +700,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -700,6 +712,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -749,6 +765,11 @@ video {
   padding-bottom: 0.375rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }

rauhala.info/templates/project.html

@@ -1,3 +1,28 @@
+<div class="container mx-auto mt-10 mb-10">
+  <section class="relative flex">
+    <nav class="mr-10">
+      <ul>
+        <li><a href="$github$">Github</a></li>
+        <li><a href="$issues$">Issues</a></li>
+      $if(badge)$<img src="$badge$" />$endif$
+      </ul>
+    </nav>
+    <article class="flex max-w-xl flex-col items-start justify-center">
+      <div class="flex items-center gap-x-4 text-xs">
+        <time datetime="$date$" class="text-gray-500">$date$</time>
+      </div>
+      <div class="group relative">
+        <section class="text-2xl text-primary border-b">
+          $title$
+        </section>
+        <section>
+          $body$
+        </section>
+      </div>
+    </article>
+  </section>
+</div>
+
 <div class="sidebar-container">
   <article>
     <section>