LDS Journal
-LDS Journal is a private journaling tool designed for members of the LDS community. It offers scripture-based prompts, daily reflection reminders, and a simple way to record spiritual insights and meaningful life moments. +
LDS Journal is a private journaling tool designed for members of the LDS community. It offers scripture-based prompts, daily reflection reminders, and a simple way to record spiritual insights and meaningful life moments.
If you have any questions or concerns, or need help with this app, please contact us at hello@squatchcraft.com.
@@ -34,5 +36,6 @@LDS Journal
© 2025 Colson - All Rights Reserved
Crafted with passion and purpose.
+ diff --git a/powerplayai-privacy.html b/powerplayai-privacy.html index 5d145f4..677b9f3 100644 --- a/powerplayai-privacy.html +++ b/powerplayai-privacy.html @@ -1,6 +1,7 @@ +SquatchCraft Apps
Contact Us
© 2025 Colson - All Rights Reserved
Crafted with passion and purpose.
+ diff --git a/powerplayai.html b/powerplayai.html index 535f539..b3168aa 100644 --- a/powerplayai.html +++ b/powerplayai.html @@ -1,6 +1,7 @@ +SquatchCraft Apps
Power Play AI
© 2025 Colson - All Rights Reserved
Crafted with passion and purpose.
+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..3cfb2f2 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +(function() { + const root = document.documentElement; + const toggle = document.getElementById('theme-toggle'); + const saved = localStorage.getItem('theme'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + if (saved) { + root.setAttribute('data-theme', saved); + } else if (prefersDark) { + root.setAttribute('data-theme', 'dark'); + } + const update = () => { + const theme = root.getAttribute('data-theme'); + toggle.textContent = theme === 'dark' ? '☀️' : '🌙'; + }; + update(); + toggle.addEventListener('click', () => { + const newTheme = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; + root.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + update(); + }); +})(); diff --git a/styles.css b/styles.css index 0bb86c6..dd76870 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,33 @@ /* --------------------------- - RESET & BASE + MODERN 2026 THEME ---------------------------- */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); + +:root { + --color-bg: #f0f2f5; + --color-text: #333; + --color-primary: #3a7bd5; + --color-primary-dark: #2a6bc5; + --color-header-bg: linear-gradient(135deg, #3a7bd5, #3a6073); + --color-card-bg: #fff; + --color-card-text: #666; + --color-footer-bg: #333; + --color-footer-text: #ccc; + --transition-speed: 0.3s; +} + +[data-theme='dark'] { + --color-bg: #1a1c1e; + --color-text: #e5e7eb; + --color-primary: #8ab4f8; + --color-primary-dark: #669df6; + --color-header-bg: linear-gradient(135deg, #0f172a, #1e293b); + --color-card-bg: #2c2f33; + --color-card-text: #cbd5e1; + --color-footer-bg: #0f172a; + --color-footer-text: #94a3b8; +} + * { margin: 0; padding: 0; @@ -9,24 +36,25 @@ html { scroll-behavior: smooth; - height: 100%; /* For sticky footer */ + height: 100%; } body { min-height: 100%; display: flex; - flex-direction: column; /* For sticky footer */ - font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background: #f0f2f5; - color: #333; + flex-direction: column; + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background: var(--color-bg); + color: var(--color-text); line-height: 1.6; + transition: background var(--transition-speed), color var(--transition-speed); } /* --------------------------- - HEADER & HERO + HEADER & NAVIGATION ---------------------------- */ header { - background: linear-gradient(135deg, #3a7bd5, #3a6073); + background: var(--color-header-bg); padding: 2rem 1rem; text-align: center; color: #fff; @@ -34,7 +62,6 @@ header { } header::after { - /* Subtle angled overlay effect */ content: ""; position: absolute; bottom: 0; @@ -50,7 +77,7 @@ header::after { header h1 { font-size: 2.5rem; margin-bottom: 1rem; - font-weight: 600; + font-weight: 700; letter-spacing: 1px; } @@ -64,25 +91,51 @@ header p { nav { margin-top: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; } + nav ul { list-style: none; - display: inline-flex; + display: flex; gap: 1.5rem; + flex-wrap: wrap; + justify-content: center; } -nav li { - margin: 0; -} + nav a { color: #fff; text-decoration: none; font-weight: 500; - transition: color 0.3s ease; + transition: color var(--transition-speed); } + nav a:hover { color: #ffe; } +.theme-toggle { + background: none; + border: 2px solid rgba(255, 255, 255, 0.8); + color: #fff; + border-radius: 50%; + width: 2.5rem; + height: 2.5rem; + font-size: 1.1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background var(--transition-speed), transform var(--transition-speed); +} + +.theme-toggle:hover { + background: rgba(255, 255, 255, 0.15); + transform: scale(1.05); +} + /* --------------------------- MAIN CONTAINER ---------------------------- */ @@ -91,14 +144,14 @@ nav a:hover { width: 100%; margin: 0 auto; padding: 2rem 1rem; - flex: 1; /* For sticky footer: this ensures main content can grow */ + flex: 1; } /* --------------------------- TYPOGRAPHY ---------------------------- */ h1, h2, h3 { - font-weight: 500; + font-weight: 600; } h2 { @@ -107,12 +160,13 @@ h2 { position: relative; margin-bottom: 0.75rem; } + h2::after { content: ""; display: block; width: 60px; height: 4px; - background: #3a7bd5; + background: var(--color-primary); margin-top: 0.5rem; border-radius: 2px; } @@ -129,12 +183,13 @@ p { } a { - color: #3a7bd5; + color: var(--color-primary); text-decoration: none; - transition: color 0.3s ease; + transition: color var(--transition-speed); } + a:hover { - color: #2a6bc5; + color: var(--color-primary-dark); text-decoration: underline; } @@ -145,19 +200,18 @@ a:hover { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; - /* Optional: force grid cells to be equal height */ grid-auto-rows: 1fr; } .card { - background: #fff; - border-radius: 6px; + background: var(--color-card-bg); + border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; - min-height: 320px; /* ensures a consistent minimum height */ + min-height: 320px; } .card:hover { @@ -172,35 +226,32 @@ a:hover { .card p { margin-bottom: 1rem; - color: #666; - /* Allow paragraphs to take up available space */ + color: var(--color-card-text); flex-grow: 1; } -/* Button-like links inside cards; margin-top: auto pushes them to the bottom */ .card a.btn { display: inline-block; margin-top: auto; padding: 0.6rem 1rem; border-radius: 4px; - background: #3a7bd5; + background: var(--color-primary); color: #fff; text-decoration: none; font-weight: 500; - transition: background 0.3s ease; + transition: background var(--transition-speed); } .card a.btn:hover { - background: #2a6bc5; + background: var(--color-primary-dark); } - /* --------------------------- FOOTER ---------------------------- */ footer { - background: #333; - color: #ccc; + background: var(--color-footer-bg); + color: var(--color-footer-text); text-align: center; padding: 1rem; } @@ -213,31 +264,17 @@ footer p { /* --------------------------- UTILITY CLASSES ---------------------------- */ -.mt-2 { - margin-top: 2rem; -} -.mb-2 { - margin-bottom: 2rem; -} -.text-center { - text-align: center; -} +.mt-2 { margin-top: 2rem; } +.mb-2 { margin-bottom: 2rem; } +.text-center { text-align: center; } /* --------------------------- RESPONSIVE DESIGN ---------------------------- */ @media (max-width: 768px) { - header h1 { - font-size: 2rem; - } - header p { - font-size: 1rem; - } - nav ul { - flex-direction: column; - align-items: center; - } - .container { - padding: 1rem; - } + header h1 { font-size: 2rem; } + header p { font-size: 1rem; } + nav { flex-direction: column; gap: 1rem; } + nav ul { flex-direction: column; gap: 1rem; } + .container { padding: 1rem; } }