Redesign newsletter page with sidebar layout

- Recent Issues now prominent in main content area
- Browse by Year and Manage Subscription moved to sticky sidebar
- Responsive: sidebar moves above content on mobile

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: pubino

assets/css/site.css

@@ -120,6 +120,20 @@ section:last-of-type{margin-bottom:0}
 .newsletter-actions{margin:0 0 24px}
 .newsletter-actions .btn{border-color:#2ea3f2;color:#2ea3f2}
 .newsletter-actions .btn:hover,.newsletter-actions .btn:focus{background:#2ea3f2;color:#fff}
+/* Newsletter page layout with sidebar */
+.newsletter-page{display:grid;grid-template-columns:1fr 250px;gap:40px;align-items:start}
+.newsletter-main{min-width:0}
+.newsletter-main h2{margin-top:0}
+.newsletter-sidebar{position:sticky;top:100px}
+.newsletter-sidebar h3{margin:24px 0 12px;font-size:1rem;color:#666}
+.newsletter-sidebar .year-list{list-style:none;margin:0;padding:0}
+.newsletter-sidebar .year-list li{margin:0 0 8px}
+.newsletter-sidebar .year-list a{text-decoration:none;color:#2ea3f2;font-weight:600}
+.newsletter-sidebar .year-list a:hover,.newsletter-sidebar .year-list a:focus{text-decoration:underline}
+@media (max-width:768px){
+.newsletter-page{grid-template-columns:1fr;gap:30px}
+.newsletter-sidebar{position:static;order:-1}
+}
 .newsletter-issue header h2{margin:0 0 5px;font-size:2rem;font-weight:600}
 .newsletter-issue .meta{color:#777;margin:0 0 30px;font-size:.9rem}
 .issue-pagination{display:flex;justify-content:space-between;margin:60px 0 0}

newsletter/index.md

@@ -6,28 +6,34 @@ permalink: /newsletter/
 
 <h1>SmartDrivingCars Newsletter</h1>
 
-<p class="newsletter-actions">
-  <a class="btn manage-subscription" href="https://kornhauser.princeton.edu/newsletter">Manage Subscription</a>
-</p>
+<div class="newsletter-page">
+  <main class="newsletter-main">
+    <h2>Recent Issues</h2>
+    <ul class="newsletter-archive">
+    {% assign issues = site.newsletters | sort: 'date' | reverse %}
+    {% for issue in issues %}
+      <li>
+        <a href="{{ issue.url }}"><time datetime="{{ issue.date | date_to_xmlschema }}">{{ issue.date | date: '%Y-%m-%d' }}</time> – {% if issue.display_name %}{{ issue.display_name }}{% else %}{{ issue.title }}{% endif %}</a>
+      </li>
+    {% endfor %}
+    </ul>
+  </main>
 
-<h2>Browse by Year</h2>
-<ul>
-{% assign years_seen = "" %}
-{% assign issues = site.newsletters | sort: 'date' | reverse %}
-{% for issue in issues %}
-  {% assign issue_year = issue.date | date: '%Y' %}
-  {% unless years_seen contains issue_year %}
-    {% assign years_seen = years_seen | append: issue_year | append: "," %}
-  <li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
-  {% endunless %}
-{% endfor %}
-</ul>
+  <aside class="newsletter-sidebar">
+    <p class="newsletter-actions">
+      <a class="btn manage-subscription" href="https://kornhauser.princeton.edu/newsletter">Manage Subscription</a>
+    </p>
 
-<h2>Recent Issues</h2>
-<ul class="newsletter-archive">
-{% for issue in issues %}
-  <li>
-    <a href="{{ issue.url }}"><time datetime="{{ issue.date | date_to_xmlschema }}">{{ issue.date | date: '%Y-%m-%d' }}</time> – {% if issue.display_name %}{{ issue.display_name }}{% else %}{{ issue.title }}{% endif %}</a>
-  </li>
-{% endfor %}
-</ul>
+    <h3>Browse by Year</h3>
+    <ul class="year-list">
+    {% assign years_seen = "" %}
+    {% for issue in issues %}
+      {% assign issue_year = issue.date | date: '%Y' %}
+      {% unless years_seen contains issue_year %}
+        {% assign years_seen = years_seen | append: issue_year | append: "," %}
+      <li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
+      {% endunless %}
+    {% endfor %}
+    </ul>
+  </aside>
+</div>