fix themes for mobile

WJTB-Radio · Feb 18, 2024 · 5d245c7 · 5d245c7
1 parent 2ed9e39
commit 5d245c7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/src/app/(pages)/themes/themes.module.scss b/src/app/(pages)/themes/themes.module.scss
@@ -7,6 +7,17 @@
 	padding: 4rem;
 }
 
+.theme {
+	background-color: var(--bg2-color);
+	margin: auto;
+	color: var(--text-color);
+	min-width: 20rem;
+	padding: 1rem;
+	border: 0.25rem solid var(--accent-color);
+	border-radius: 1rem;
+	margin: 1rem;
+}
+
 @media (max-width: 100rem) {
 	.container {
 		grid-template-columns: repeat(2, 1fr);
@@ -16,19 +27,21 @@
 @media (max-width: 50rem) {
 	.container {
 		grid-template-columns: repeat(1, 1fr);
-		padding: 1rem;
+		padding: 0;
+		column-gap: 0rem;
+	}
+	.theme {
+		min-width: unset;
+		width: 100%;
+		margin: 0;
+		margin-top: 1rem;
 	}
 }
 
-.theme {
-	background-color: var(--bg2-color);
-	margin: auto;
-	color: var(--text-color);
-	min-width: 20rem;
-	padding: 1rem;
-	border: 0.25rem solid var(--accent-color);
-	border-radius: 1rem;
-	margin: 1rem;
+@media (min-width: 25rem) {
+	.container {
+		padding: 1rem;
+	}
 }
 
 .button {

diff --git a/src/app/(pages)/themes/themes.tsx b/src/app/(pages)/themes/themes.tsx
@@ -21,6 +21,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#eded50",
 			"--iframe-bg-color": "#eeeeee",
 			"font-family": "system-ui, sans-serif",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"paper": {
@@ -39,6 +40,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#236ece",
 			"--iframe-bg-color": "#eeeeee00",
 			"font-family": "'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"trees": {
@@ -57,6 +59,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#ffbe59",
 			"--iframe-bg-color": "#eeeeee00",
 			"font-family": "system-ui, sans-serif",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"strawberry": {
@@ -75,6 +78,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#d32153",
 			"--iframe-bg-color": "#eeeeee00",
 			"font-family": "system-ui, sans-serif",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"autumn": {
@@ -93,6 +97,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#eded50",
 			"--iframe-bg-color": "#efad26",
 			"font-family": "'garamond', serif",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"spooky": {
@@ -111,6 +116,7 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent2-color": "#3bee22",
 			"--iframe-bg-color": "#eeeeee",
 			"font-family": "'modern antiqua', cursive",
+			"font-weight": "300",
 		} as CSSProperties,
 	},
 	"winter": {
@@ -128,8 +134,8 @@ export const themes: {[id: string]: Theme}  = {
 			"--accent-shadow-color": "#5b5730",
 			"--accent2-color": "#ef8af2",
 			"--iframe-bg-color": "#eeeeee",
-			"font-weight": "500",
 			"font-family": "Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif",
+			"font-weight": "500",
 		} as CSSProperties,
 	},
 };