Skip to content

Commit 81334b5

Browse files
savetheclocktowersavetheclocktower
committed
Ensure the platform selector is appropriately "sticky"…
…at all breakpoints. Once we allowed the page header links to wrap to the next line, this got broken.
1 parent 25ddd82 commit 81334b5

File tree

2 files changed

+87
-80
lines changed

2 files changed

+87
-80
lines changed

‎layouts/page_header.ejs‎

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,87 @@
1-
<header class="page-header">
2-
<div class="page-header__content">
3-
<a href="/" class="page-header__logo">
4-
<img class="page-header__img" src="/static/logo-name-navbar-dark.svg">
5-
</a>
6-
7-
<nav class="page-header__items">
8-
<a class="page-header__link" href="/download">
9-
<i class="fa-solid fa-download icon-fixed"></i>
10-
<span>Download</span>
11-
</a>
12-
<a class="page-header__link" href="https://docs.pulsar-edit.dev/">
13-
<i class="fa-solid fa-file-lines icon-fixed"></i>
14-
<span>Docs</span>
15-
</a>
16-
<a class="page-header__link" href="https://blog.pulsar-edit.dev/">
17-
<i class="fa-solid fa-blog icon-fixed"></i>
18-
<span>Blog</span>
19-
</a>
20-
<a class="page-header__link" href="/about">
21-
<i class="fa-solid fa-sun icon-fixed"></i>
22-
<span>About Us</span>
1+
<div class="page-header__wrapper">
2+
<header class="page-header">
3+
<div class="page-header__content">
4+
<a href="/" class="page-header__logo">
5+
<img class="page-header__img" src="/static/logo-name-navbar-dark.svg">
236
</a>
24-
<div class="page-header__link-wrapper">
25-
<a class="page-header__link page-header__link--community" href="/community">
26-
<i class="fa-solid fa-user-group icon-fixed"></i>
27-
<span>Community</span>
7+
8+
<nav class="page-header__items">
9+
<a class="page-header__link" href="/download">
10+
<i class="fa-solid fa-download icon-fixed"></i>
11+
<span>Download</span>
12+
</a>
13+
<a class="page-header__link" href="https://docs.pulsar-edit.dev/">
14+
<i class="fa-solid fa-file-lines icon-fixed"></i>
15+
<span>Docs</span>
16+
</a>
17+
<a class="page-header__link" href="https://blog.pulsar-edit.dev/">
18+
<i class="fa-solid fa-blog icon-fixed"></i>
19+
<span>Blog</span>
2820
</a>
29-
<div class="page-header__community-links">
30-
<ul>
31-
<li><a target="_blank" href="https://github.com/orgs/pulsar-edit/discussions">
32-
<i class="fa-brands fa-github icon-fixed"></i>
33-
GitHub Discussions</a></li>
34-
<li><a href="https://discord.com/invite/7aEbB9dGRT" target="_blank">
35-
<i class="fa-brands fa-discord icon-fixed"></i>
36-
Discord</a></li>
37-
<li><a href="https://www.reddit.com/r/pulsaredit/" target="_blank">
38-
<i class="fa-brands fa-reddit icon-fixed"></i>
39-
Reddit</a></li>
40-
<li><a href="https://fosstodon.org/@pulsaredit" target="_blank">
41-
<i class="fa-brands fa-mastodon icon-fixed"></i>
42-
Mastodon</a></li>
43-
<li><a href="https://lemmy.ml/c/pulsaredit" target="_blank">
44-
<i class="fa-solid fa-users icon-fixed"></i>
45-
Lemmy</a></li>
46-
</ul>
21+
<a class="page-header__link" href="/about">
22+
<i class="fa-solid fa-sun icon-fixed"></i>
23+
<span>About Us</span>
24+
</a>
25+
<div class="page-header__link-wrapper">
26+
<a class="page-header__link page-header__link--community" href="/community">
27+
<i class="fa-solid fa-user-group icon-fixed"></i>
28+
<span>Community</span>
29+
</a>
30+
<div class="page-header__community-links">
31+
<ul>
32+
<li><a target="_blank" href="https://github.com/orgs/pulsar-edit/discussions">
33+
<i class="fa-brands fa-github icon-fixed"></i>
34+
GitHub Discussions</a></li>
35+
<li><a href="https://discord.com/invite/7aEbB9dGRT" target="_blank">
36+
<i class="fa-brands fa-discord icon-fixed"></i>
37+
Discord</a></li>
38+
<li><a href="https://www.reddit.com/r/pulsaredit/" target="_blank">
39+
<i class="fa-brands fa-reddit icon-fixed"></i>
40+
Reddit</a></li>
41+
<li><a href="https://fosstodon.org/@pulsaredit" target="_blank">
42+
<i class="fa-brands fa-mastodon icon-fixed"></i>
43+
Mastodon</a></li>
44+
<li><a href="https://lemmy.ml/c/pulsaredit" target="_blank">
45+
<i class="fa-solid fa-users icon-fixed"></i>
46+
Lemmy</a></li>
47+
</ul>
48+
</div>
4749
</div>
48-
</div>
49-
<a class="page-header__link" href="https://web.pulsar-edit.dev/">
50-
<i class="fa-solid fa-box-open icon-fixed"></i>
51-
<span>Packages</span>
52-
</a>
53-
</nav>
50+
<a class="page-header__link" href="https://web.pulsar-edit.dev/">
51+
<i class="fa-solid fa-box-open icon-fixed"></i>
52+
<span>Packages</span>
53+
</a>
54+
</nav>
5455

55-
<nav class="page-header__actions">
56-
<a href="https://github.com/pulsar-edit/pulsar">
57-
<i class="fa-brands fa-github icon-fixed"></i>
58-
</a>
59-
<div class="theme-switcher-menu">
60-
<button type="button" id="theme-switcher">
61-
<svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">
62-
<path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path>
63-
</svg>
64-
<svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon">
65-
<path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path>
66-
</svg>
67-
<svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon">
68-
<path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path>
69-
</svg>
70-
</button>
71-
</div>
72-
</nav>
73-
</div>
74-
</header>
56+
<nav class="page-header__actions">
57+
<a href="https://github.com/pulsar-edit/pulsar">
58+
<i class="fa-brands fa-github icon-fixed"></i>
59+
</a>
60+
<div class="theme-switcher-menu">
61+
<button type="button" id="theme-switcher">
62+
<svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">
63+
<path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path>
64+
</svg>
65+
<svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon">
66+
<path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path>
67+
</svg>
68+
<svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon">
69+
<path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path>
70+
</svg>
71+
</button>
72+
</div>
73+
</nav>
74+
</div>
75+
</header>
7576

76-
<% if (locals.platform_switcher) { %>
77-
<div class="platform-switcher">
78-
<div class="platform-switcher__inner">
79-
<span>Platform:</span>
80-
<button data-platform="linux" type="button">Linux</button>
81-
<button data-platform="mac" type="button">Mac</button>
82-
<button data-platform="win" type="button">Windows</button>
77+
<% if (locals.platform_switcher) { %>
78+
<div class="platform-switcher">
79+
<div class="platform-switcher__inner">
80+
<span>Platform:</span>
81+
<button data-platform="linux" type="button">Linux</button>
82+
<button data-platform="mac" type="button">Mac</button>
83+
<button data-platform="win" type="button">Windows</button>
84+
</div>
8385
</div>
86+
<% } %>
8487
</div>
85-
<% } %>

‎less/page-header.less‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
flex-shrink: 0;
3333
}
3434

35+
.page-header__wrapper {
36+
top: 0;
37+
z-index: 1;
38+
}
39+
3540
.page-header__link-wrapper:hover {
3641
.page-header__community-links {
3742
opacity: 1;
@@ -107,14 +112,14 @@
107112

108113
// Page header should be static at narrow widths so it doesn't take up half the
109114
// screen…
110-
.page-header {
115+
.page-header__wrapper {
111116
position: static !important;
112117
}
113118

114119
@media (min-width: @bp-larger-than-phablet) {
115120
// …but once we have enough room for it not to be so tall, we can afford to
116121
// make it sticky.
117-
.page-header {
122+
.page-header__wrapper {
118123
position: sticky !important;
119124
}
120125

0 commit comments

Comments
 (0)