From 22c39f16f11a443f74947cfb4a5c705458f5bc3f Mon Sep 17 00:00:00 2001
From: Meta Vens <rwvens@hotmail.com>
Date: Sun, 26 Apr 2026 04:14:46 +0100
Subject: [PATCH] Reposition header GitHub link

---
 src/repixelizer/gui_static/index.html | 42 ++++++++++++---------------
 src/repixelizer/gui_static/styles.css | 26 +++++------------
 2 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/src/repixelizer/gui_static/index.html b/src/repixelizer/gui_static/index.html
index 6aa40ee..769969a 100644
--- a/src/repixelizer/gui_static/index.html
+++ b/src/repixelizer/gui_static/index.html
@@ -23,29 +23,25 @@
                 </div>
               </div>
             </div>
-            <div class="header-side">
-              <div class="header-link-row">
-                <a
-                  class="header-github-link"
-                  href="https://github.com/GameCult/repixelizer"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  aria-label="Repixelizer on GitHub"
-                  title="Repixelizer on GitHub"
-                >
-                  <svg viewBox="0 0 98 96" aria-hidden="true">
-                    <path
-                      d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 0 48.9043 0C21.8203 0 0 22.1074 0 49.1914C0 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
-                    />
-                  </svg>
-                </a>
-              </div>
-              <div class="header-instructions">
-                <p class="eyebrow">How To Use It</p>
-                <p class="instruction-line">1. Drop an input on the right or choose a file.</p>
-                <p class="instruction-line">2. Leave size and phase blank to let the machine search, or pin them if you already know the lattice.</p>
-                <p class="instruction-line">3. Run it, watch the status panel for the active stage, then patch the output by hand if the machine gets cute.</p>
-              </div>
+            <a
+              class="header-github-link"
+              href="https://github.com/GameCult/repixelizer"
+              target="_blank"
+              rel="noreferrer noopener"
+              aria-label="Repixelizer on GitHub"
+              title="Repixelizer on GitHub"
+            >
+              <svg viewBox="0 0 98 96" aria-hidden="true">
+                <path
+                  d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 0 48.9043 0C21.8203 0 0 22.1074 0 49.1914C0 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
+                />
+              </svg>
+            </a>
+            <div class="header-instructions">
+              <p class="eyebrow">How To Use It</p>
+              <p class="instruction-line">1. Drop an input on the right or choose a file.</p>
+              <p class="instruction-line">2. Leave size and phase blank to let the machine search, or pin them if you already know the lattice.</p>
+              <p class="instruction-line">3. Run it, watch the status panel for the active stage, then patch the output by hand if the machine gets cute.</p>
             </div>
           </header>
 
diff --git a/src/repixelizer/gui_static/styles.css b/src/repixelizer/gui_static/styles.css
index 5a57e50..c40e30c 100644
--- a/src/repixelizer/gui_static/styles.css
+++ b/src/repixelizer/gui_static/styles.css
@@ -288,8 +288,6 @@ p {
 .brand,
 .brand-lockup,
 .copy-stack,
-.header-side,
-.header-link-row,
 .header-instructions {
   display: grid;
   gap: 10px;
@@ -334,21 +332,9 @@ p {
 
 .app-shell-header {
   display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
+  grid-template-columns: minmax(0, 1.35fr) auto minmax(280px, 0.9fr);
   gap: 16px;
-  align-items: start;
-}
-
-.header-side {
-  align-content: start;
-  min-width: 0;
-}
-
-.header-link-row {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  min-height: 88px;
+  align-items: center;
 }
 
 .header-github-link {
@@ -362,6 +348,8 @@ p {
   text-decoration: none;
   line-height: 0;
   flex: 0 0 auto;
+  justify-self: center;
+  align-self: center;
 }
 
 .header-github-link svg {
@@ -388,6 +376,7 @@ p {
 
 .header-instructions {
   align-content: start;
+  min-width: 0;
   padding: 12px 14px;
   border: 3px solid rgba(8, 36, 62, 0.88);
   background:
@@ -1061,9 +1050,8 @@ select:focus-visible {
     align-items: flex-start;
   }
 
-  .header-link-row {
-    justify-content: flex-start;
-    min-height: 0;
+  .header-github-link {
+    justify-self: start;
   }
 
   .brand-lockup {