Merge pull request #315 from pulsar-edit/fix-platform-selector-and-version

Fix platform selector and version

Author: confused-Techie

docs/global.json

@@ -1,3 +1,3 @@
 {
-  "latest_version": "1.128.0"
-}
+  "latest_version": "1.129.0"
+}

layouts/page_header.ejs

@@ -1,85 +1,87 @@
-<header class="page-header">
-  <div class="page-header__content">
-    <a href="/" class="page-header__logo">
-      <img class="page-header__img" src="/static/logo-name-navbar-dark.svg">
-    </a>
-
-    <nav class="page-header__items">
-      <a class="page-header__link" href="/download">
-        <i class="fa-solid fa-download icon-fixed"></i>
-        <span>Download</span>
-      </a>
-      <a class="page-header__link" href="https://docs.pulsar-edit.dev/">
-        <i class="fa-solid fa-file-lines icon-fixed"></i>
-        <span>Docs</span>
-      </a>
-      <a class="page-header__link" href="https://blog.pulsar-edit.dev/">
-        <i class="fa-solid fa-blog icon-fixed"></i>
-        <span>Blog</span>
-      </a>
-      <a class="page-header__link" href="/about">
-        <i class="fa-solid fa-sun icon-fixed"></i>
-        <span>About Us</span>
+<div class="page-header__wrapper">
+  <header class="page-header">
+    <div class="page-header__content">
+      <a href="/" class="page-header__logo">
+        <img class="page-header__img" src="/static/logo-name-navbar-dark.svg">
       </a>
-      <div class="page-header__link-wrapper">
-        <a class="page-header__link page-header__link--community" href="/community">
-          <i class="fa-solid fa-user-group icon-fixed"></i>
-          <span>Community</span>
+
+      <nav class="page-header__items">
+        <a class="page-header__link" href="/download">
+          <i class="fa-solid fa-download icon-fixed"></i>
+          <span>Download</span>
+        </a>
+        <a class="page-header__link" href="https://docs.pulsar-edit.dev/">
+          <i class="fa-solid fa-file-lines icon-fixed"></i>
+          <span>Docs</span>
+        </a>
+        <a class="page-header__link" href="https://blog.pulsar-edit.dev/">
+          <i class="fa-solid fa-blog icon-fixed"></i>
+          <span>Blog</span>
         </a>
-        <div class="page-header__community-links">
-          <ul>
-            <li><a target="_blank" href="https://github.com/orgs/pulsar-edit/discussions">
-              <i class="fa-brands fa-github icon-fixed"></i>
-              GitHub Discussions</a></li>
-            <li><a href="https://discord.com/invite/7aEbB9dGRT" target="_blank">
-              <i class="fa-brands fa-discord icon-fixed"></i>
-              Discord</a></li>
-            <li><a href="https://www.reddit.com/r/pulsaredit/" target="_blank">
-              <i class="fa-brands fa-reddit icon-fixed"></i>
-              Reddit</a></li>
-            <li><a href="https://fosstodon.org/@pulsaredit" target="_blank">
-              <i class="fa-brands fa-mastodon icon-fixed"></i>
-              Mastodon</a></li>
-            <li><a href="https://lemmy.ml/c/pulsaredit" target="_blank">
-              <i class="fa-solid fa-users icon-fixed"></i>
-              Lemmy</a></li>
-          </ul>
+        <a class="page-header__link" href="/about">
+          <i class="fa-solid fa-sun icon-fixed"></i>
+          <span>About Us</span>
+        </a>
+        <div class="page-header__link-wrapper">
+          <a class="page-header__link page-header__link--community" href="/community">
+            <i class="fa-solid fa-user-group icon-fixed"></i>
+            <span>Community</span>
+          </a>
+          <div class="page-header__community-links">
+            <ul>
+              <li><a target="_blank" href="https://github.com/orgs/pulsar-edit/discussions">
+                <i class="fa-brands fa-github icon-fixed"></i>
+                GitHub Discussions</a></li>
+              <li><a href="https://discord.com/invite/7aEbB9dGRT" target="_blank">
+                <i class="fa-brands fa-discord icon-fixed"></i>
+                Discord</a></li>
+              <li><a href="https://www.reddit.com/r/pulsaredit/" target="_blank">
+                <i class="fa-brands fa-reddit icon-fixed"></i>
+                Reddit</a></li>
+              <li><a href="https://fosstodon.org/@pulsaredit" target="_blank">
+                <i class="fa-brands fa-mastodon icon-fixed"></i>
+                Mastodon</a></li>
+              <li><a href="https://lemmy.ml/c/pulsaredit" target="_blank">
+                <i class="fa-solid fa-users icon-fixed"></i>
+                Lemmy</a></li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <a class="page-header__link" href="https://web.pulsar-edit.dev/">
-        <i class="fa-solid fa-box-open icon-fixed"></i>
-        <span>Packages</span>
-      </a>
-    </nav>
+        <a class="page-header__link" href="https://web.pulsar-edit.dev/">
+          <i class="fa-solid fa-box-open icon-fixed"></i>
+          <span>Packages</span>
+        </a>
+      </nav>
 
-    <nav class="page-header__actions">
-      <a href="https://github.com/pulsar-edit/pulsar">
-        <i class="fa-brands fa-github icon-fixed"></i>
-      </a>
-      <div class="theme-switcher-menu">
-        <button type="button" id="theme-switcher">
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">
-            <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>
-          </svg>
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon">
-            <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>
-          </svg>
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon">
-            <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>
-          </svg>
-        </button>
-      </div>
-    </nav>
-  </div>
-</header>
+      <nav class="page-header__actions">
+        <a href="https://github.com/pulsar-edit/pulsar">
+          <i class="fa-brands fa-github icon-fixed"></i>
+        </a>
+        <div class="theme-switcher-menu">
+          <button type="button" id="theme-switcher">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">
+              <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>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon">
+              <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>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon">
+              <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>
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </header>
 
-<% if (locals.platform_switcher) { %>
-<div class="platform-switcher">
-  <div class="platform-switcher__inner">
-    <span>Platform:</span>
-    <button data-platform="linux" type="button">Linux</button>
-    <button data-platform="mac" type="button">Mac</button>
-    <button data-platform="win" type="button">Windows</button>
+  <% if (locals.platform_switcher) { %>
+  <div class="platform-switcher">
+    <div class="platform-switcher__inner">
+      <span>Platform:</span>
+      <button data-platform="linux" type="button">Linux</button>
+      <button data-platform="mac" type="button">Mac</button>
+      <button data-platform="win" type="button">Windows</button>
+    </div>
   </div>
+  <% } %>
 </div>
-<% } %>

less/page-header.less

@@ -32,6 +32,11 @@
   flex-shrink: 0;
 }
 
+.page-header__wrapper {
+  top: 0;
+  z-index: 1;
+}
+
 .page-header__link-wrapper:hover {
   .page-header__community-links {
     opacity: 1;
@@ -107,14 +112,14 @@
 
 // Page header should be static at narrow widths so it doesn't take up half the
 // screen…
-.page-header {
+.page-header__wrapper {
   position: static !important;
 }
 
 @media (min-width: @bp-larger-than-phablet) {
   // …but once we have enough room for it not to be so tall, we can afford to
   // make it sticky.
-  .page-header {
+  .page-header__wrapper {
     position: sticky !important;
   }