Skip to content

Commit b3c6ce1

Browse files
pubinopubino
committed
Fix Safari sidebar disappearing on newsletter archive pages
Safari has issues with position:sticky directly on CSS Grid items when align-items:start shrinks the grid area to content height. Wrap the aside in a div grid item that stretches to full row height, keeping position:sticky on the inner aside. Also add -webkit-sticky fallback for older Safari.
1 parent e1721fb commit b3c6ce1

File tree

3 files changed

+53
-48
lines changed

3 files changed

+53
-48
lines changed

‎_layouts/newsletter-archive.html‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -30,37 +30,39 @@ <h1>{{ page.title }}</h1>
3030
</ul>
3131
</div>
3232

33-
<aside class="newsletter-sidebar">
34-
<h3>Browse by Year</h3>
35-
<ul class="year-list">
36-
{% assign years_seen = "" %}
37-
{% for issue in issues %}
38-
{% assign issue_year = issue.date | date: '%Y' %}
39-
{% unless years_seen contains issue_year %}
40-
{% assign years_seen = years_seen | append: issue_year | append: "," %}
41-
<li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
42-
{% endunless %}
43-
{% endfor %}
44-
</ul>
45-
46-
{% if page.year and page.month == nil %}
47-
<h3>Browse by Month</h3>
48-
<ul class="year-list">
49-
{% assign months_seen = "" %}
50-
{% for issue in issues %}
51-
{% assign issue_year = issue.date | date: '%Y' %}
52-
{% if issue_year == page.year %}
53-
{% assign issue_month = issue.date | date: '%m' %}
54-
{% assign month_key = issue_year | append: "-" | append: issue_month %}
55-
{% unless months_seen contains month_key %}
56-
{% assign months_seen = months_seen | append: month_key | append: "," %}
57-
<li><a href="/newsletter/{{ issue_year }}/{{ issue_month }}/">{{ issue.date | date: '%B' }}</a></li>
33+
<div class="newsletter-sidebar-col">
34+
<aside class="newsletter-sidebar">
35+
<h3>Browse by Year</h3>
36+
<ul class="year-list">
37+
{% assign years_seen = "" %}
38+
{% for issue in issues %}
39+
{% assign issue_year = issue.date | date: '%Y' %}
40+
{% unless years_seen contains issue_year %}
41+
{% assign years_seen = years_seen | append: issue_year | append: "," %}
42+
<li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
5843
{% endunless %}
44+
{% endfor %}
45+
</ul>
46+
47+
{% if page.year and page.month == nil %}
48+
<h3>Browse by Month</h3>
49+
<ul class="year-list">
50+
{% assign months_seen = "" %}
51+
{% for issue in issues %}
52+
{% assign issue_year = issue.date | date: '%Y' %}
53+
{% if issue_year == page.year %}
54+
{% assign issue_month = issue.date | date: '%m' %}
55+
{% assign month_key = issue_year | append: "-" | append: issue_month %}
56+
{% unless months_seen contains month_key %}
57+
{% assign months_seen = months_seen | append: month_key | append: "," %}
58+
<li><a href="/newsletter/{{ issue_year }}/{{ issue_month }}/">{{ issue.date | date: '%B' }}</a></li>
59+
{% endunless %}
60+
{% endif %}
61+
{% endfor %}
62+
</ul>
5963
{% endif %}
60-
{% endfor %}
61-
</ul>
62-
{% endif %}
63-
</aside>
64+
</aside>
65+
</div>
6466
</div>
6567

6668
{{ content }}

‎assets/css/site.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,19 @@ section:last-of-type{margin-bottom:0}
121121
.newsletter-actions .btn{border-color:#2ea3f2;color:#2ea3f2}
122122
.newsletter-actions .btn:hover,.newsletter-actions .btn:focus{background:#2ea3f2;color:#fff}
123123
/* Newsletter page layout with sidebar */
124-
.newsletter-page{display:grid;grid-template-columns:1fr 250px;gap:40px;align-items:start}
124+
.newsletter-page{display:grid;grid-template-columns:1fr 250px;gap:40px}
125125
.newsletter-main{min-width:0}
126126
.newsletter-main h2{margin-top:0}
127-
.newsletter-sidebar{position:sticky;top:100px}
127+
.newsletter-sidebar{position:-webkit-sticky;position:sticky;top:100px}
128128
.newsletter-sidebar h3{margin:24px 0 12px;font-size:1rem;color:#666}
129129
.newsletter-sidebar .year-list{list-style:none;margin:0;padding:0}
130130
.newsletter-sidebar .year-list li{margin:0 0 8px}
131131
.newsletter-sidebar .year-list a{text-decoration:none;color:#2ea3f2;font-weight:600}
132132
.newsletter-sidebar .year-list a:hover,.newsletter-sidebar .year-list a:focus{text-decoration:underline}
133133
@media (max-width:768px){
134134
.newsletter-page{grid-template-columns:1fr;gap:30px}
135-
.newsletter-sidebar{position:static;order:-1}
135+
.newsletter-sidebar-col{order:-1}
136+
.newsletter-sidebar{position:static}
136137
}
137138
.newsletter-issue header h2{margin:0 0 5px;font-size:2rem;font-weight:600}
138139
.newsletter-issue .meta{color:#777;margin:0 0 30px;font-size:.9rem}

‎newsletter/index.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,23 @@ <h2>Recent Issues</h2>
1919
</ul>
2020
</div>
2121

22-
<aside class="newsletter-sidebar">
23-
<p class="newsletter-actions">
24-
<a class="btn manage-subscription" href="https://kornhauser.princeton.edu/newsletter">Manage Subscription</a>
25-
</p>
22+
<div class="newsletter-sidebar-col">
23+
<aside class="newsletter-sidebar">
24+
<p class="newsletter-actions">
25+
<a class="btn manage-subscription" href="https://kornhauser.princeton.edu/newsletter">Manage Subscription</a>
26+
</p>
2627

27-
<h3>Browse by Year</h3>
28-
<ul class="year-list">
29-
{% assign years_seen = "" %}
30-
{% for issue in issues %}
31-
{% assign issue_year = issue.date | date: '%Y' %}
32-
{% unless years_seen contains issue_year %}
33-
{% assign years_seen = years_seen | append: issue_year | append: "," %}
34-
<li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
35-
{% endunless %}
36-
{% endfor %}
37-
</ul>
38-
</aside>
28+
<h3>Browse by Year</h3>
29+
<ul class="year-list">
30+
{% assign years_seen = "" %}
31+
{% for issue in issues %}
32+
{% assign issue_year = issue.date | date: '%Y' %}
33+
{% unless years_seen contains issue_year %}
34+
{% assign years_seen = years_seen | append: issue_year | append: "," %}
35+
<li><a href="/newsletter/{{ issue_year }}/">{{ issue_year }}</a></li>
36+
{% endunless %}
37+
{% endfor %}
38+
</ul>
39+
</aside>
40+
</div>
3941
</div>

0 commit comments

Comments
 (0)