Made boxes in Media self-arrange to fill empty space, improved mobile readability of Publications.

Author: DanielFeshbach

_includes/archive-single.html

@@ -12,6 +12,51 @@
   {% assign title = post.title %}
 {% endif %}
 
+<style>
+/* Responsive archive item styling */
+.archive__item-teaser img {
+  width: 300px;
+  height: auto;
+}
+
+/* Mobile responsive - scale down icons */
+@media (max-width: 768px) {
+  .archive__item-teaser img {
+    width: 80px !important;
+    max-width: 80px !important;
+  }
+  
+  .archive__item-content {
+    min-width: 0; /* Allow text to wrap */
+  }
+  
+  .archive__item-title {
+    font-size: 0.9rem !important;
+    line-height: 1.3 !important;
+  }
+  
+  .publication-meta {
+    font-size: 0.85rem !important;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 480px) {
+  .archive__item-teaser img {
+    width: 60px !important;
+    max-width: 60px !important;
+  }
+  
+  .archive__item-title {
+    font-size: 0.85rem !important;
+  }
+  
+  .publication-meta {
+    font-size: 0.8rem !important;
+  }
+}
+</style>
+
 <div class="{{ include.type | default: "list" }}__item">
   <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
     <div style="display: flex; align-items: center; gap: 15px;">
@@ -23,7 +68,7 @@
             {% else %}
               "{{ teaser | prepend: "/images/" | prepend: base_path }}"
             {% endif %}
-            alt="{{ title | default: post.title }}" style="width: 300px; height: auto;">
+            alt="{{ title | default: post.title }}">
         </div>
       {% endif %}
       <div class="archive__item-content" style="flex-grow: 1;">

_media/grasp-news.md

@@ -3,5 +3,5 @@ title: "GRASP Lab’s Award-Winning Automated System for Printing Origami Robots
 date: 2024-05-15
 permalink: /media/grasp-news
 link: https://www.grasp.upenn.edu/news/kinegami/
-summary: "GRARP Lab news put out [a feature article](https://www.grasp.upenn.edu/news/kinegami/) on [the Kinegami project](https://sung.seas.upenn.edu/research/kinegami/) that I'm part of. They wrote this when [the project's first paper](https://ieeexplore.ieee.org/document/9914656) (which was from before I joined) got an honorable mention for the T-RO best paper award, and the article also discusses the future of the project including my [OSME paper](https://repository.upenn.edu/handle/20.500.14332/60333) and ongoing work."
+summary: "GRASP Lab news put out [a feature article](https://www.grasp.upenn.edu/news/kinegami/) on [the Kinegami project](https://sung.seas.upenn.edu/research/kinegami/) that I'm part of. They wrote this when [the project's first paper](https://ieeexplore.ieee.org/document/9914656) (which was from before I joined) got an honorable mention for the T-RO best paper award, and the article also discusses the future of the project including my [OSME paper](https://repository.upenn.edu/handle/20.500.14332/60333) and ongoing work."
 ---

_pages/media.html

@@ -16,6 +16,16 @@
     padding: 1rem !important;
     box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
     margin-bottom: 1rem !important;
+    align-self: start !important;
+  }
+  
+  /* Grid with small row units for masonry effect */
+  .media-grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
+    grid-auto-rows: 10px !important; /* Smaller units for better fit */
+    gap: 0.75rem !important;
+    align-items: start !important;
   }
 
   /* Tighter spacing between elements */
@@ -34,7 +44,7 @@
 
 <h1>Media</h1>
 
-<section class="media-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.75rem;align-items:start;">
+<section class="media-grid">
   {% assign media_items = site.media | sort: "date" | reverse %}
   {% for item in media_items %}
     <article class="media-card" style="border: 2px solid #ccc !important; background: #fff !important; padding: 1rem !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;">
@@ -70,7 +80,44 @@ <h3 class="archive__item-title" style="margin: 0.1rem 0 0.25rem !important;">
 
 <script async src="https://www.instagram.com/embed.js"></script>
 <script>
-  window.addEventListener('load', function () {
-    if (window.instgrm && instgrm.Embeds) { instgrm.Embeds.process(); }
-  });
+window.addEventListener('load', function() {
+  function masonryLayout() {
+    const grid = document.querySelector('.media-grid');
+    const items = grid.querySelectorAll('.media-card');
+    const rowHeight = 10; // Must match grid-auto-rows
+    const gap = 12; // 0.75rem in pixels
+    
+    items.forEach(item => {
+      // Reset any previous spanning
+      item.style.gridRowEnd = 'auto';
+      
+      // Force layout calculation
+      const rect = item.getBoundingClientRect();
+      const height = rect.height;
+      
+      // Calculate how many 10px rows this item needs (including gap)
+      const rowSpan = Math.ceil((height + gap) / (rowHeight + gap));
+      
+      // Apply the span
+      item.style.gridRowEnd = `span ${rowSpan}`;
+    });
+  }
+  
+  // Run layout multiple times to ensure proper sizing
+  function runLayout() {
+    masonryLayout();
+    setTimeout(masonryLayout, 100);  // Run again after brief delay
+    setTimeout(masonryLayout, 500);  // And once more after embeds settle
+  }
+  
+  if (window.instgrm && instgrm.Embeds) { 
+    instgrm.Embeds.process();
+    setTimeout(runLayout, 2000); // Wait for Instagram embeds to load
+  } else {
+    runLayout();
+  }
+  
+  // Re-run layout on window resize
+  window.addEventListener('resize', runLayout);
+});
 </script>