feat: begin adding settings menu, move theme to settings

1 files changed, 220 insertions, 12 deletions

diff --git a/static/main.css b/static/main.css
index 6f899cf..5f7c0f9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -25,12 +25,19 @@
     box-sizing: border-box;
 }
 
+html {
+    height:100%;
+}
+
 body {
     background-color:var(--bg-main);
+    background-image:radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
+    background-attachment:fixed;
     color:var(--text-primary);
     font-family:system-ui,-apple-system,sans-serif;
     margin:0;
     padding:0;
+    min-height:100%;
     -webkit-tap-highlight-color: transparent;
 }
 
@@ -44,13 +51,12 @@ img[src=""] {
     align-items: center;
     min-height: 100vh;
     padding: 20px;
-    background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
 }
 
 .view-home .container {
     width: 100%;
     max-width: 580px;
-    margin: 0 auto; 
+    margin: 0 auto;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -100,11 +106,56 @@ img[src=""] {
     background:var(--bg-card);
     color:var(--text-primary);
     border-color:var(--border);
+    text-decoration:none;
+    display:inline-flex;
+    align-items:center;
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    border:1px solid var(--border);
 }
 .view-home .btn-secondary:hover {
     background:var(--border);
     border-color:var(--text-secondary);
 }
+.home-settings-btn {
+    position:fixed;
+    top:27px;
+    right:60px;
+    width:24px;
+    height:24px;
+    background-color:var(--text-primary);
+    -webkit-mask-image:url('/static/settings.svg');
+    mask-image:url('/static/settings.svg');
+    mask-size:contain;
+    mask-repeat:no-repeat;
+    mask-position:center;
+    text-decoration:none;
+}
+.nav-settings-icon {
+    width:24px;
+    height:24px;
+    flex-shrink:0;
+    margin-left:auto;
+    margin-top:3px;
+    background-color:var(--text-secondary);
+    -webkit-mask-image:url('/static/settings.svg');
+    mask-image:url('/static/settings.svg');
+    mask-size:100% 100%;
+    transition:background-color 0.2s;
+    text-decoration:none;
+}
+.nav-settings-icon:hover,
+.nav-settings-icon.active {
+    background-color:var(--text-primary);
+}
+.nav-settings-link {
+    display:none;
+    margin-left:auto;
+}
 header {
     display:flex;
     align-items:center;
@@ -112,6 +163,7 @@ header {
     padding:15px 60px;
     border-bottom:1px solid var(--border);
     background:var(--bg-main);
+    width:100%;
 }
 .search-form {
     flex-grow:1;
@@ -145,11 +197,11 @@ h1 span {
     padding:0 60px;
     border-bottom:1px solid var(--border);
     background:var(--bg-main);
+    width:100%;
 }
 .nav-container {
     display:flex;
     gap:30px;
-    max-width:1200px;
 }
 .nav-tabs a {
     padding:14px 0;
@@ -168,6 +220,9 @@ h1 span {
     color:var(--accent);
     border-bottom-color:var(--accent);
 }
+.nav-right {
+    margin-left:auto;
+}
 .image-results-container {
     padding:30px 60px;
 }
@@ -473,19 +528,23 @@ h1 span {
 
 
 @media (max-width:1200px) {
-    body {
-        padding-left: 16px;
-        padding-right: 16px;
-    }
     .content-layout {
         grid-template-columns:1fr;
         padding:20px 30px;
         gap:20px;
     }
+    header {
+        gap:20px;
+    }
     .results-container,.infobox-sidebar {
         grid-column:1;
         max-width:100%;
     }
+    .settings-layout {
+        padding:20px 30px;
+        display:flex;
+        justify-content:center;
+    }
     .infobox-sidebar {
         order:-1;
     }
@@ -498,9 +557,11 @@ h1 span {
 }
 
 @media (max-width:768px) {
-    body {
-        padding-left: 16px;
-        padding-right: 16px;
+    .nav-settings-icon {
+        display:none;
+    }
+    .nav-settings-link {
+        display:inline;
     }
     header {
         flex-direction:column;
@@ -532,7 +593,7 @@ h1 span {
         font-size:0.95rem;
     }
     .content-layout {
-        padding:16px;
+        padding:16px 16px 16px 40px;
         gap:16px;
     }
     .result {
@@ -591,7 +652,6 @@ h1 span {
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: translateY(-5vh);
         padding:20px 16px;
         min-height: 100vh;
     }
@@ -621,6 +681,12 @@ h1 span {
 }
 
 @media (max-width:600px) {
+    .content-layout {
+        padding:16px 16px 16px 28px;
+    }
+    .settings-layout {
+        padding:12px 0;
+    }
     header {
         padding:12px 12px;
     }
@@ -657,3 +723,145 @@ h1 span {
         font-size:0.75rem;
     }
 }
+
+.settings-layout {
+    padding:30px 60px 30px 260px;
+}
+
+.settings-container {
+    max-width:700px;
+}
+
+.settings-title {
+    font-size:1.8rem;
+    font-weight:700;
+    margin:0 0 32px 0;
+    letter-spacing:-0.5px;
+}
+
+.settings-section {
+    background:var(--bg-card);
+    border:1px solid var(--border);
+    border-radius:12px;
+    padding:24px;
+    margin-bottom:32px;
+}
+
+.settings-section-title {
+    font-size:1.1rem;
+    font-weight:700;
+    margin:0 0 4px 0;
+}
+
+.settings-section-desc {
+    color:var(--text-secondary);
+    font-size:0.9rem;
+    margin:0 0 20px 0;
+    line-height:1.4;
+}
+
+.settings-field {
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:10px 0;
+}
+
+.settings-field + .settings-field {
+    border-top:1px solid var(--border);
+}
+
+.settings-label {
+    font-size:0.95rem;
+    color:var(--text-primary);
+}
+
+.settings-select {
+    padding:8px 12px;
+    border-radius:8px;
+    border:1px solid var(--border);
+    background:var(--bg-main);
+    color:var(--text-primary);
+    font-size:0.9rem;
+    outline:none;
+    cursor:pointer;
+    transition:border-color 0.2s;
+}
+
+.settings-select:focus {
+    border-color:var(--accent);
+}
+
+.settings-actions {
+    display:flex;
+    gap:12px;
+    margin-top:8px;
+    padding-bottom:40px;
+    justify-content:flex-start;
+}
+
+.settings-actions .btn-primary {
+    background:var(--accent);
+    color:var(--bg-main);
+    border:1px solid transparent;
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    touch-action:manipulation;
+}
+
+.settings-actions .btn-primary:hover {
+    filter:brightness(1.1);
+    transform:translateY(-1px);
+}
+
+.settings-actions .btn-secondary {
+    background:var(--bg-card);
+    color:var(--text-primary);
+    border:1px solid var(--border);
+    padding:10px 24px;
+    border-radius:8px;
+    font-weight:600;
+    font-size:0.9rem;
+    cursor:pointer;
+    transition:all 0.2s;
+    touch-action:manipulation;
+}
+
+.settings-actions .btn-secondary:hover {
+    background:var(--border);
+    border-color:var(--text-secondary);
+}
+
+@media (max-width:768px) {
+    .settings-layout {
+        padding:12px;
+        display:block;
+    }
+    .settings-container {
+        max-width:100%;
+    }
+    .settings-title {
+        font-size:1.4rem;
+        margin-bottom:24px;
+    }
+    .settings-section {
+        padding:16px;
+    }
+    .settings-field {
+        flex-direction:column;
+        align-items:stretch;
+        gap:8px;
+    }
+    .settings-actions {
+        flex-direction:column;
+    }
+    .settings-actions .btn-primary,
+    .settings-actions .btn-secondary {
+        width:100%;
+        text-align:center;
+    }
+}