style(index_template.html): improve header layout with flexbox for be…

…tter alignment and spacing fix(index_template.html): adjust logo and dark mode toggle positions for consistency style(index_template.html): change dark mode GitHub button color for better contrast
rtuszik · Oct 11, 2024 · 33ebc4b · 33ebc4b
1 parent dbbd98b
commit 33ebc4b
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/src/index_template.html b/src/index_template.html
@@ -88,27 +88,31 @@
         background-color: var(--mocha-base);
       }
 
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
       #logo_img {
-        top: 20px;
-        left: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        top: 10px;
+        left: 10px;
       }
 
       h1 {
+        flex-grow: 2;
         color: var(--latte-mauve);
         text-align: center;
         font-size: 2.5rem;
         margin-bottom: 2rem;
+        margin-right: 8rem;
       }
 
       body.dark-mode h1 {
         color: var(--mocha-mauve);
       }
 
       #dark-mode-toggle {
-        position: absolute;
-        top: 20px;
-        right: 20px;
         background: none;
         border: none;
         cursor: pointer;
@@ -351,7 +355,7 @@
       }
 
       .dark-mode .GitHub_Button {
-        background-color: var(--mocha-peach);
+        background-color: var(--mocha-maroon);
       }
 
       .GitHub_Button .text {
@@ -408,19 +412,17 @@
     </style>
   </head>
   <body class="dark-mode">
-    <img
-      src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
-      id="logo_img"
-      width="128"
-    />
-    <h1>Cheatsheet Index</h1>
-    <button
-      id="dark-mode-toggle"
-      class="dark-mode-toggle"
-      aria-label="Toggle dark mode"
-    >
-      <span id="theme-icon">◐</span>
-    </button>
+    <div class="header">
+      <img
+        src="https://github.com/rtuszik/KoalaKeys/raw/main/assets/icons/KoalaKeys.png"
+        id="logo_img"
+        width="128"
+      />
+      <h1>Cheatsheet Index</h1>
+      <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+        <span id="theme-icon">◐</span>
+      </button>
+    </div>
     <div class="controls">
       <div class="search-bar">
         <input type="text" id="search" placeholder="Search cheatsheets..." />