Mobile overflow fix; publications lead-in

Author: huaicheng

assets/css/custom.css

@@ -479,6 +479,19 @@ section.alumni-section h2 {
   margin-bottom: 0 !important;
 }
 
+/* Publications page lead-in paragraph */
+.publications-intro {
+  margin: 0 0 1.5rem !important;
+  padding-bottom: 0.9rem;
+  border-bottom: 1px solid #e5e7eb;
+  color: #4a4a4a;
+  font-size: 0.98rem;
+  line-height: 1.55;
+  max-width: 50em;
+}
+.publications-intro p:first-child { margin-top: 0; }
+.publications-intro p:last-child { margin-bottom: 0; }
+
 /* Remove spacing from any div elements that might be causing gaps */
 .publication-entry div {
   margin-bottom: 0 !important;
@@ -1622,6 +1635,7 @@ p.hero-subtitle {
   line-height: 1.5;
   max-width: 1100px;
   text-align: center;
+  box-sizing: border-box;
 }
 .moat-footer__row {
   display: flex;
@@ -1746,6 +1760,7 @@ section[id] {
   border-top: 1px solid #e5e7eb;
   max-width: none;
   width: 100%;
+  box-sizing: border-box;
   position: sticky;
   bottom: 0;
   z-index: 50;

content/publication/_index.md

@@ -16,3 +16,5 @@ banner:
   caption: ''
   image: ''
 ---
+
+We publish our research at major systems venues such as ASPLOS, FAST, OSDI, and SOSP. PDFs, slides, posters, code, and BibTeX entries are linked beside each paper below.

layouts/_default/baseof.html

@@ -6,6 +6,9 @@
     <title>{{ .Site.Title }}</title>
     {{ partial "custom_head.html" . }}
     <style>
+        /* Global box-sizing reset so percentage widths + padding don't overflow the viewport */
+        *, *::before, *::after { box-sizing: border-box; }
+
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             line-height: 1.6;
@@ -14,6 +17,11 @@
             background-color: #f8f9fa;
             min-height: 100vh;
         }
+        /* Keep horizontal-overflow clipping on the html element so it doesn't break position:sticky
+           on descendants (overflow-x:hidden on body would create a new block formatting context
+           and de-stick the sticky navbar + footer). overflow-x:clip is safer when supported;
+           html-level clip on older browsers still permits sticky to work. */
+        html { overflow-x: clip; }
 
         .page-header {
             background-color: white;
@@ -66,6 +74,13 @@
             padding: 2rem;
             background-color: white;
             box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            box-sizing: border-box;
+        }
+        @media (max-width: 768px) {
+            .main-container {
+                max-width: 100%;
+                padding: 1rem;
+            }
         }
 
         /* Special width for project pages */
@@ -487,8 +502,9 @@
             .people-section {
                 padding: 0 2px;
             }
-            
+
             .people-grid.vertical {
+                grid-template-columns: repeat(2, 1fr);
                 gap: 12px;
             }
 

layouts/publication/list.html

@@ -1,8 +1,11 @@
 {{ define "main" }}
   <div class="publications-container publication-page">
+    {{ with .Content }}
+      <div class="publications-intro">{{ . }}</div>
+    {{ end }}
     {{ $sorted := .Pages.ByDate.Reverse }}
     {{ range $index, $item := $sorted }}
       {{ partial "views/citation.html" (dict "item" $item "index" $index) }}
     {{ end }}
   </div>
-{{ end }} 
+{{ end }}