Clean up

Author: one-data-cookie

.github/workflows/jekyll.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.0
         with:
-          ruby-version: '3.1.7' # Not needed with a .ruby-version file
+          ruby-version: '3.1' # Not needed with a .ruby-version file
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
       - name: Setup Pages

_includes/header.html

@@ -34,13 +34,23 @@
       <a class="navbar-item" href="{{ site.url }}">
         <h4>{{ site.heading }}</h4>
       </a>
-      <div class="navbar-item navbar-dark-mode__mobile is-hidden-tablet" onclick="modeSwitcher()">
-        <div class="buttons">
-          <a class="button is-text">
-            <span class="icon is-small">
-              <img src="../assets/img/moon.svg" id="theme-toggle-img--mobile">
-            </span>
-          </a>
+      <!-- Mobile Buttons Group -->
+      <div class="mobile-buttons-group is-hidden-tablet">
+        <div class="navbar-item" onclick="openSearchModal()">
+          <div class="buttons">
+            <a class="button is-text">
+              <span class="cmd-palette-btn">⌘K</span>
+            </a>
+          </div>
+        </div>
+        <div class="navbar-item navbar-dark-mode__mobile" onclick="modeSwitcher()">
+          <div class="buttons">
+            <a class="button is-text">
+              <span class="icon is-small">
+                <img src="../assets/img/moon.svg" id="theme-toggle-img--mobile">
+              </span>
+            </a>
+          </div>
         </div>
       </div>
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -79,13 +89,19 @@ <h4>{{ site.heading }}</h4>
         <a href="{{ site.social.linkedin }}" target="_blank" class="navbar-item" data-umami-event="social-linkedin">
           LinkedIn
         </a>
-        <a href="mailto:{{ site.social.email }}" class="navbar-item" data-umami-event="social-email">          Email
+        <a href="mailto:{{ site.social.email }}" class="navbar-item" data-umami-event="social-email">
+          Email
         </a>
       </div>
-      <div class="navbar-end is-hidden-mobile" onclick="modeSwitcher()" >
+      <div class="navbar-end is-hidden-mobile">
         <div class="navbar-item">
           <div class="buttons">
-            <a class="button is-text">
+            <!-- Command Palette Button -->
+            <a class="button is-text" onclick="openSearchModal()">
+              <span class="cmd-palette-btn">⌘K</span>
+            </a>
+            <!-- Theme Switcher Button -->
+            <a class="button is-text" onclick="modeSwitcher()">
               <span class="icon is-small">
                 <img src="../assets/img/moon.svg" id="theme-toggle-img">
               </span>

_layouts/post.html

@@ -261,6 +261,13 @@ <h5 class="block-title">Metadata</h5>
 
         </div>
     </section>
+    <!-- Command Palette -->
+    <script type="module" src="https://unpkg.com/ninja-keys?module"></script>
+    <ninja-keys class="dark"></ninja-keys>
+    <script src="/assets/js/commandPalette.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
+    
+    <!-- Other Scripts -->
     <script src="/assets/js/copyCode.js"></script>
     <script src="/assets/js/headerLinks.js"></script>
     <script src="/assets/js/footnoteTooltip.js"></script>

assets/css/style.css

@@ -1599,3 +1599,70 @@ label.margin-toggle:not(.sidenote-number) {
   grid-template-columns: repeat(1, 1fr);
 }
 }
+
+/* Command Palette Button Styles */
+.cmd-palette-btn {
+    font-weight: 1000;
+    font-size: 25px;
+    text-decoration: none;
+}
+
+/* Override Bulma button styles with high specificity */
+.navbar-item .button.is-text:hover,
+.navbar-item .button.is-text:focus,
+.navbar-item .button.is-text:active,
+.button.is-text:hover,
+.button.is-text:focus,
+.button.is-text:active,
+.button:hover,
+.button:focus,
+.button:active,
+.cmd-palette-btn:hover,
+.cmd-palette-btn:focus,
+.cmd-palette-btn:active {
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+    background: none !important;
+    color: inherit !important;
+}
+
+/* Remove underline from command palette button links */
+a:has(.cmd-palette-btn) {
+    text-decoration: none !important;
+}
+
+a:has(.cmd-palette-btn):hover {
+    text-decoration: none !important;
+}
+
+/* Mobile navbar positioning - keep command palette next to theme switcher */
+@media screen and (max-width: 1023px) {
+    .navbar-brand {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    }
+    
+    .navbar-brand .navbar-item:first-child {
+        flex-grow: 1;
+    }
+    
+    .mobile-buttons-group {
+        display: flex;
+        gap: 0;
+        align-items: center;
+        margin-left: auto;
+        margin-right: 0.5rem;
+    }
+    
+    .mobile-buttons-group .navbar-item {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    
+    .navbar-burger {
+        margin-left: 0;
+    }
+}