diff --git a/README.md b/README.md index f1ba479..8e54b37 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ A community-driven web application for tracking winter road conditions and icy h 1. **Clone the repository:** ```bash - git clone git@github.com:deco/ice.git + git clone git@git.deco.sh:deco/ice.git cd ice ``` @@ -89,7 +89,7 @@ PORT=3000 2. **Deploy your application:** ```bash - git clone git@github.com:deco/ice.git /opt/ice + git clone git@git.deco.sh:deco/ice.git /opt/ice cd /opt/ice npm install # This automatically builds CSS via postinstall ``` @@ -149,7 +149,7 @@ MIT License - see LICENSE file for details ## Support This is a community safety tool. For issues or questions: -- Create a GitHub issue +- Create an issue on our git repository - Check existing documentation - Review security guidelines diff --git a/public/admin.html b/public/admin.html index 0fb381a..c39c699 100644 --- a/public/admin.html +++ b/public/admin.html @@ -7,6 +7,18 @@ +
@@ -155,6 +167,8 @@
+ + diff --git a/public/admin.js b/public/admin.js index a616e0d..3c30a29 100644 --- a/public/admin.js +++ b/public/admin.js @@ -705,7 +705,13 @@ function initializeTheme() { } function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); + if (theme === 'auto') { + // Detect system preference and apply appropriate theme + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-theme', theme); + } } function updateThemeIcon(theme, iconElement) { diff --git a/public/app-mapbox.js b/public/app-mapbox.js index 55d74d6..bea752e 100644 --- a/public/app-mapbox.js +++ b/public/app-mapbox.js @@ -617,7 +617,13 @@ function initializeTheme() { } function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); + if (theme === 'auto') { + // Detect system preference and apply appropriate theme + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-theme', theme); + } } function updateThemeIcon(theme, iconElement) { diff --git a/public/index.html b/public/index.html index 61bbf3c..cc9c836 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,18 @@ +
@@ -109,6 +121,8 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
+ + diff --git a/public/privacy.html b/public/privacy.html index 1e8d6df..ea6476b 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -7,6 +7,18 @@ +
@@ -92,8 +104,8 @@

Contact Information

Questions about this privacy policy or your data?

@@ -110,78 +122,9 @@ + + diff --git a/scripts/deploy.sh b/scripts/deploy.sh index 6b46198..192615c 100644 --- a/scripts/deploy.sh +++ b/scripts/deploy.sh @@ -104,7 +104,7 @@ echo "" echo "🚀 Next steps to deploy Great Lakes Ice Report:" echo "" echo "1. Clone your repository:" -echo " git clone git@github.com:deco/great-lakes-ice-report.git /opt/great-lakes-ice-report" +echo " git clone git@git.deco.sh:deco/ice.git /opt/great-lakes-ice-report" echo "" echo "2. Set up the application:" echo " cd /opt/great-lakes-ice-report" diff --git a/src/scss/main.scss b/src/scss/main.scss index 4c15bf3..c15733b 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -135,17 +135,7 @@ button { // Theme toggle styles (common across pages) .theme-toggle { - @include button($bg-color: transparent); - border: 2px solid var(--border-color); - border-radius: $border-radius-full; - width: 40px; - height: 40px; - @include flex-center; - - &:hover { - background-color: var(--table-hover); - transform: none; - } + @include theme-toggle-styles; } // Utility classes diff --git a/src/scss/_mixins.scss b/src/scss/mixins.scss similarity index 87% rename from src/scss/_mixins.scss rename to src/scss/mixins.scss index 85f9d6b..bb0d2c9 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/mixins.scss @@ -122,6 +122,23 @@ color: $text-color; } +// Theme Toggle Mixin (consolidates duplicated theme toggle styles) +@mixin theme-toggle-styles($width: 40px, $height: 40px) { + @include button($bg-color: transparent); + border: 2px solid var(--border-color); + border-radius: $border-radius-full; + width: $width; + height: $height; + @include flex-center; + transition: all 0.3s ease; + box-shadow: 0 2px 4px var(--shadow); + + &:hover { + background-color: var(--table-hover); + transform: none; + } +} + // Back-link button mixin (shared component) @mixin back-link-styles { display: inline-block; diff --git a/src/scss/pages/_admin.scss b/src/scss/pages/_admin.scss index df43a1e..9a115ad 100644 --- a/src/scss/pages/_admin.scss +++ b/src/scss/pages/_admin.scss @@ -58,13 +58,9 @@ } .theme-toggle-admin { + @include theme-toggle-styles; background: var(--card-bg) !important; color: var(--text-color) !important; - border: 2px solid var(--border-color) !important; - width: 40px; - height: 40px; - border-radius: $border-radius-full !important; - @include flex-center; padding: 0 !important; } diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss index 8393d9e..7e6c3c6 100644 --- a/src/scss/pages/_index.scss +++ b/src/scss/pages/_index.scss @@ -58,7 +58,8 @@ } } - .theme-toggle { +.theme-toggle { + @include theme-toggle-styles; align-self: center; } } diff --git a/src/scss/pages/_privacy.scss b/src/scss/pages/_privacy.scss index 57855c9..4cb6fff 100644 --- a/src/scss/pages/_privacy.scss +++ b/src/scss/pages/_privacy.scss @@ -23,19 +23,14 @@ } &__theme-toggle { + @include theme-toggle-styles; position: absolute; top: 0; right: 0; - background: var(--card-bg); - border: 2px solid var(--border-color); - border-radius: 50%; width: 50px; height: 50px; - @include flex-center; cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 4px var(--shadow); - + .theme-icon { font-size: $font-size-lg; }