d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix light/dark and responsive layout across mobile, tablet, and desktop.

Browse Source 
Sync theme toggle with html.dark body styles; Tailwind dark: on nav/footer; tablet uses hamburger until lg; symbol logo in dark mode; mobile menu scroll and contrast; cookie/donate FAB spacing.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-05-27 13:28:41 -07:00
co-authored by Cursor
parent 51dffd79ca
commit b096a79573
7 changed files with 72 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+39 -63
View File
@@ -62,8 +62,7 @@
background-attachment: fixed;
}
.dark body,
body.dark {
html.dark body {
background: #0a0f0e;
background-image: none;
}
@@ -217,7 +216,7 @@
align-items: center;
}
@media (min-width: 768px) {
@media (min-width: 1024px) {
.mim-site-nav {
min-height: 4.5rem;
padding-top: 0.375rem;
@@ -251,10 +250,8 @@
max-width: 20rem;
}
@media (prefers-color-scheme: dark) {
.footer-brand-block .footer-tagline {
color: #d4d4d8;
}
.dark .footer-brand-block .footer-tagline {
color: #d4d4d8;
}
.btn-primary {
@@ -323,16 +320,14 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.btn-secondary {
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
color: #e5e5e5;
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: var(--mim-brand-gold);
}
.dark .btn-secondary {
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
color: #e5e5e5;
}
.dark .btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: var(--mim-brand-gold);
}
.btn-white {
@@ -364,20 +359,8 @@
.navlink {
font-size: 0.875rem;
font-weight: 500;
color: #52525b;
transition: color 0.2s;
}
.navlink:hover {
color: var(--mim-brand-green);
}
@media (prefers-color-scheme: dark) {
.navlink {
color: #d4d4d8;
}
.navlink:hover {
color: var(--mim-brand-gold-bright);
}
}
.input-field {
width: 100%;
@@ -402,15 +385,13 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.input-field {
border: 1px solid #4b5563;
background-color: #1f2937;
color: #f3f4f6;
}
.input-field:focus {
border-color: var(--mim-brand-gold);
}
.dark .input-field {
border: 1px solid #4b5563;
background-color: #1f2937;
color: #f3f4f6;
}
.dark .input-field:focus {
border-color: var(--mim-brand-gold);
}
.line-clamp-2 {
@@ -449,14 +430,16 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.input {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
}
.input:focus {
border-color: var(--mim-brand-gold);
}
.dark .input {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
color: #f3f4f6;
}
.dark .input::placeholder {
color: #9ca3af;
}
.dark .input:focus {
border-color: var(--mim-brand-gold);
}
.card {
@@ -467,11 +450,10 @@
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) {
.card {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05);
}
.dark .card {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05);
color: #e5e5e5;
}
.card-hover {
@@ -496,10 +478,8 @@
color: var(--mim-brand-gold);
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.section-eyebrow {
color: var(--mim-brand-gold-bright);
}
.dark .section-eyebrow {
color: var(--mim-brand-gold-bright);
}
.section-title {
@@ -517,10 +497,8 @@
line-height: 2.5rem;
}
}
@media (prefers-color-scheme: dark) {
.section-title {
color: #f4f4f5;
}
.dark .section-title {
color: #f4f4f5;
}
.section-subtitle {
@@ -528,10 +506,8 @@
font-size: 1.125rem;
color: #52525b;
}
@media (prefers-color-scheme: dark) {
.section-subtitle {
color: #d4d4d8;
}
.dark .section-subtitle {
color: #d4d4d8;
}
}