Fixed layout issue on index.html

Dor-sketch · Jun 25, 2024 · 5fa8a11 · 5fa8a11
1 parent 7818b0f
commit 5fa8a11
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -227,7 +227,7 @@
             display: grid;
             grid-template-columns: repeat(9, 1fr);
             grid-template-rows: repeat(9, 1fr);
-            width: 90%;
+            width: 100%;
             /* Make the board fill the container width */
             max-width: 600px;
             /* Optional: limit the maximum width */
@@ -298,11 +298,12 @@
 
         .theme-toggle {
             right: 0;
-            width: 60px;
+            width: 80px;
             height: 30px;
             background-color: #ccc;
             border-radius: 15px;
             transform: translateX(-20%);
+            margin-left:2rem;
         }
 
         .toggle-inner {
@@ -321,6 +322,7 @@
             background-color: #fff;
             border-radius: 50%;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
         }
 
         .toggle-on .toggle-inner {
@@ -538,6 +540,7 @@ label {
     cursor: pointer; /* Changes cursor to pointer on hover */
     transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; /* Adds smooth transition effects */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
+    margin-right: 0.5rem;
 }
 
 .upload-btn:hover {
@@ -557,19 +560,20 @@ label {
 .design-info {
     display: flex;
     flex-direction: column;
+    text-wrap: wrap;
 }
 
 .design-info p {
     margin-top: 1 rem; /* Removes default margin */
     margin-bottom: 0;
-    padding-left: 1rem; /* Adds padding to the left */
+    padding-left: 0.1rem; /* Adds padding to the left */
     padding-top: 0.1rem; /* Adds padding to the top */
 }
 .design-info a {
     color: var(--cell-focus-background-color); /* Sets the link color */
     text-decoration: none; /* Removes underline */
-    padding-left: 1rem; /* Adds padding to the left */
-    padding-bottom: 1rem; /* Adds padding to the top */
+    padding-left: 0.1rem; /* Adds padding to the left */
+    padding-bottom: 0rem; /* Adds padding to the top */
 }
 .solve-button {
     position: absolute; /* or 'fixed' depending on the layout context */

diff --git a/docs/index.html b/docs/index.html
@@ -87,27 +87,29 @@ <h2>Now with a WebAssembly frontend.</h2>
     </div>
     <div class="actions">
         <div class="design-info">
-            <p>Designed By Dor © <script>document.write(new Date().getFullYear());</script></p>
+            <p>Designed By Dor</p>
             <a href="https://dorpascal.com">dorpascal.com</a>
+            <p style="margin: 0.1rem;"> © <script>document.write(new Date().getFullYear());</script></p>
         </div>
         <button onclick="solveSudoku()" class="solve-button">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <polygon points="5 3 19 12 5 21 5 3"></polygon>
             </svg>
         </button>
-        <div class="spacer"></div> <!-- Empty spacer for balancing -->
-    </div>
-    <footer class="footer">
-        <button id="help-btn" style="background-color: transparent; border: none; outline: none;">
-            <i class="fas fa-puzzle-piece" style="font-size: 24px; color: currentColor;"></i>
-        </button>
+        <!-- <div class="spacer"></div> Empty spacer for balancing -->
         <!-- Hide the original file input -->
         <!-- Modified file input to allow image capture -->
         <input type="file" id="fileInput" accept="image/*" capture="environment" style="display: none;">
         <!-- Add a custom button that will trigger the file input click, styled to match the help button -->
 <label for="fileInput" class="upload-btn">
     <i class="fas fa-camera" style="font-size: 24px;"></i>
 </label>
+    </div>
+    <footer class="footer">
+        <button id="help-btn" style="background-color: transparent; border: none; outline: none;">
+            <i class="fas fa-puzzle-piece" style="font-size: 24px; color: currentColor;"></i>
+        </button>
+
 
                 <input id="input-board" type="text" placeholder="Enter board as one line...">