small fixes

Author: tipsy

_includes/landing.css

@@ -3,7 +3,6 @@ main {
 }
 
 header.top-nav-header {
-    position: absolute;
     border: 0;
     background: #050a12;
 }
@@ -23,7 +22,7 @@ header.top-nav-header nav ul.top-nav li a:hover {
 
 /* Hide dark mode toggle on landing page */
 #dark-mode-toggle {
-    display: none;
+    visibility: hidden;
 }
 
 /* White variant for header icons */
@@ -493,11 +492,7 @@ header.top-nav-header nav ul.top-nav li a:hover {
     line-height: 1.7;
 }
 
-@media (max-width: 600px) {
-    body {
-        padding-top: 100px !important;
-    }
-}
+
 
 @media (max-width: 480px) {
 

_includes/starBegging.html

@@ -1,16 +1,12 @@
-<div id="star-begging">
+<div id="star-begging" class="jv-card">
     <style>
         #star-begging {
             transition: transform .25s;
             transform: scale(0);
-            border-radius: var(--jv-radius-lg);
             position: fixed;
             bottom: 32px;
             right: 32px;
             padding: 16px 40px 12px 16px;
-            background: #fff;
-            border: 1px solid var(--jv-color-border);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
             z-index: 9999998;
         }
         #star-begging.in {
@@ -29,27 +25,33 @@
             position: absolute;
             right: 16px;
             top: 16px;
-            height: 32px;
-            width: 32px;
-            line-height: 1;
+            background: rgba(0, 0, 0, 0.04);
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            padding: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 28px;
-            cursor: pointer;
-            background: rgba(0, 0, 0, 0.05);
-            border-radius: var(--jv-radius-md);
-            transition: background 0.2s ease;
         }
         #star-begging .close:hover {
-            background: rgba(0, 0, 0, 0.1);
+            background: rgba(0, 0, 0, 0.08);
+        }
+        #star-begging .close svg {
+            width: 20px;
+            height: 20px;
+            fill: var(--jv-color-text);
         }
     </style>
     <p>
         Like Javalin?
         <br>Star us 😊
     </p>
-    <span class="close">×</span>
+    <button class="close" aria-label="Close">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
+        </svg>
+    </button>
     <iframe id="starFrame" class="githubStar" title="github-stars"
             src="https://ghbtns.com/github-btn.html?user=javalin&amp;repo=javalin&amp;type=star&amp;count=true&size=large"
             frameborder="0" scrolling="0" width="150px" height="30px">

_sass/_frame.scss

@@ -4,15 +4,13 @@ html {
 }
 
 body {
-  padding-top: 80px;
   margin-bottom: 40px;
 }
 
-/* Header - Fixed at top */
+/* Header - Sticky at top */
 header.top-nav-header {
-  position: fixed;
+  position: sticky;
   top: 0;
-  left: 0;
   width: 100%;
   height: 80px;
   z-index: 1000;
@@ -106,10 +104,6 @@ nav.width-limit {
 
 /* Header icon buttons */
 .header-icons {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1001;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -300,60 +294,56 @@ body.dark-mode {
   }
 }
 
-/* Responsive: Mobile screens (<600px) - Non-landing pages only */
+/* Responsive: Mobile screens (<600px) */
 @media (max-width: 600px) {
-  body:not(.splash) {
-    padding-top: 120px;
-
-    header.top-nav-header {
-      height: auto;
-      padding: 12px 0;
-    }
+  header.top-nav-header {
+    height: auto;
+    padding: 12px 0;
+  }
 
-    nav.width-limit {
-      flex-direction: column;
-      align-items: center;
-      height: auto;
-      gap: 12px;
+  nav.width-limit {
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    gap: 12px;
 
-      #logo {
-        align-self: flex-start;
+    #logo {
+      align-self: flex-start;
 
-        img {
-          height: 32px !important;
-          margin: 0;
-        }
+      img {
+        height: 32px !important;
+        margin: 0;
       }
+    }
 
-      ul.top-nav {
-        margin: 0;
+    ul.top-nav {
+      margin: 0;
 
-        li {
-          a {
-            margin: 0;
-            font-size: 16px;
-            padding: 8px;
-          }
+      li {
+        a {
+          margin: 0;
+          font-size: 16px;
+          padding: 8px;
         }
       }
     }
+  }
 
-    .header-icons {
-      position: absolute;
-      top: 12px;
-      right: 20px;
-      gap: 4px;
-    }
+  .header-icons {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    gap: 4px;
+  }
 
-    #dark-mode-toggle,
-    #discord-link,
-    #github-link {
-      padding: 6px;
+  #dark-mode-toggle,
+  #discord-link,
+  #github-link {
+    padding: 6px;
 
-      svg {
-        width: 16px;
-        height: 16px;
-      }
+    svg {
+      width: 16px;
+      height: 16px;
     }
   }
 

_sass/_syntaxHighlighting.scss

@@ -61,7 +61,7 @@ pre.code-toolbar > .toolbar span {
   box-shadow: none;
   border-radius: 0 5px 0 5px;
   color: rgba(255, 255, 255, 0.45);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--jv-color-code-toolbar-border);
   border-top: 0;
   border-right: 0;
   text-shadow: none;

_sass/_variables.scss

@@ -15,6 +15,7 @@
   --jv-color-code-border: #ccd;
   --jv-color-code-bg: #f5f5f5;
   --jv-color-code-bg-dark: #2a2b31;
+  --jv-color-code-toolbar-border: rgba(255, 255, 255, 0.1);
   --jv-color-bg-light: #f9f9f9;
   --jv-color-bg-main: #fff;
   --jv-color-text: #333;
@@ -43,6 +44,7 @@ body.dark-mode {
   --jv-color-code-border: #202225;
   --jv-color-code-bg: #2f3136;
   --jv-color-code-bg-dark: #2f3136;
+  --jv-color-code-toolbar-border: #202225;
   --jv-color-bg-light: #2f3136;
   --jv-color-bg-main: #36393f;
   --jv-color-text: #dcddde;