first draft of memos

Author: denten

_layouts/memo.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+{% assign item = project | default: page %}
+
+{% assign subsection_text = "Author: " | append: item.author %}
+
+{% include section-break.html section="Lab Memo" subsection=subsection_text %}
+
+<div class="mx-4 lg:mx-8 grid grid-cols-1 md:grid-cols-3 mb-8 lg:mb-16 items-center">
+    <!-- Tag & Title (Always First) -->
+    <div class="md:col-span-2">
+
+        <div class="text-sm font-mono text-gray-600 mt-1">{{ item.date | date: "%B %d, %Y" }}</div>
+        <div class="text-gray-900 font-bold text-xl font-ibmsans -skew-1">
+            {{ item.title }}
+        </div>
+
+        <div class="text-xs font-ibmserif mt-2 italic pb-2 border-b-2 md:border-none border-dashed border-gray-400">
+            {% for person in item.people %}
+              {{ person }}{% unless forloop.last %}, {% endunless %}
+            {% endfor %}
+        </div>
+
+    </div>
+
+    <!-- Image Section (Appears between title and text in mobile, right side in desktop) -->
+    <div class="w-full order-2 md:col-span-1 md:order-3 self-start py-5">
+
+        <img class="w-full h-10 sm:h-15 md:h-auto object-cover rounded-lg" src="/assets/images/{{
+        item.image_folder | default: 'projects' }}/{{ item.image }}" alt="{{ item.image_alt }}">
+
+    </div>
+
+    <!-- Text Section (Takes 2/3 space on desktop, below image in mobile) -->
+
+    <div class="prose-sm md:prose-base md:col-span-2 md:pr-6 order-3 md:order-2 font-ibmserif">
+
+            {{ item.content | markdownify  }}
+    </div>
+</div>
+
+