work on individual project page

Author: denten

_includes/components/projects/card.html

@@ -1,44 +1,48 @@
+{% assign item = project | default: page %}
+
 <div class="projects-card mx-4 lg:mx-8 grid grid-cols-1 md:grid-cols-3 gap-4 mb-8 lg:mb-16 items-center">
     <!-- Tag & Title (Always First) -->
     <div class="md:col-span-3">
-      {% if include.category-name %}
+      {% if item.tag %}
         <div class="flex items-center">
           <svg width="64" height="2" viewBox="0 0 64 2" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M64 1H0" stroke="#6B7280" />
           </svg>
             <p class="text-base leading-none text-gray-500 ml-2">
-                {{ include.category-name }}
+                {{ item.tag }}
             </p>
         </div>
       {% endif %}
 
         <div class="text-gray-900 font-bold text-xl font-ibmsans">
-            {{ include.title }}
+            {{ item.title }}
         </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">
+
     <img 
-      src="/assets/images/projects/{{ include.image}}" 
+      src="/assets/images/projects/{{ item.image}}" 
       class="w-full h-10 sm:h-15 md:h-auto object-cover rounded-lg" 
-      alt="{{include.image-alt}}"
+      alt="{{ item.image_alt }}"
     />
     </div>
 
     <!-- Text Section (Takes 2/3 space on desktop, below image in mobile) -->
 
     <div class="md:col-span-2 md:pr-6 order-3 md:order-2">
+
         {% capture first_paragraph %}
-            {{ project.content | markdownify | split: '</p>' | first | remove: '<p>' | rstrip }}
+            {{ item.content | markdownify | split: '</p>' | first | remove: '<p>' | rstrip }}
         {% endcapture %}
 
-        <p class="p-5 pt-3 text-base leading-6 mb-3 font-ibmserif bg-gray-100">
+        <div class="prose p-5 pt-3 text-base leading-6 mb-3 font-ibmserif bg-gray-100 prose">
             {{ first_paragraph }}
-            <a href="{{ project.url }}" class="text-sky-600 hover:underline text-xs
+            <a href="{{ item.url }}" class="text-sky-600 hover:underline text-xs
                 font-ibmsans">
                 [read more]
             </a>
-        </p>
+        </div>
     </div>
 </div>

_layouts/project.html

@@ -2,4 +2,38 @@
 layout: default
 ---
 
-{{ content }}
+{% assign item = project | default: page %}
+
+
+
+{% assign subsection_text = "Filed under: " | append: item.tag %}
+{% include section-break.html section="Project description" 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-3">
+
+        <div class="text-gray-900 font-bold text-xl font-ibmsans">
+            {{ item.title }}
+        </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">
+
+    <img 
+      src="/assets/images/projects/{{ item.image}}" 
+      class="w-full h-10 sm:h-15 md:h-auto object-cover my-6 shadow-sm md:shadow-none" 
+      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">
+
+            {{ item.content | markdownify  }}
+    </div>
+</div>
+
+

assets/css/main.css

@@ -5,6 +5,7 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif');
 @import "tailwindcss";
 
+@plugin "@tailwindcss/typography";
 
 @theme {
   --font-ibmserif: "IBM Plex Serif", serif;

collections/_projects/archeology-of-fictional-space.md

@@ -4,7 +4,7 @@ title: Archeology of Fictional Space
 date: 2018-05-05
 tag: modeling-and-visualization
 image: lit-space.png
-image-alt: "Four tall and skinny scatter plots demonstrating density and clutter."
+image_alt: "Four tall and skinny scatter plots demonstrating density and clutter."
 people:
 - Dennis Yi Tenen
 type: research paper

collections/_projects/keyword-injection.md

@@ -16,4 +16,4 @@ extent and how? To answer that question, we propose to treat the memo as a natur
 in "keyword injection." We then analyze the congressional record to capture the dynamics of
 term diffusion, revealing a pattern of influence over time.
 
-<sup>1</sup>: *The New York Times*, 12/14/94.
+<sup>1</sup> *The New York Times*, 12/14/94.

index.html

@@ -8,8 +8,6 @@
     <p class="-skew-1">
         <span class="font-ibmserif text-base">
 
-            
-
             Some stories are written. Others emerge synthetically, in collectives.
             CUØ draws on expertise in literary theory, sociology of knowledge,
             linguistics, and computation to study how stories shape our personal and shared