diff --git a/src/app/(pages)/themes/themes.module.scss b/src/app/(pages)/themes/themes.module.scss index c179eac..274eb17 100644 --- 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 index de16b13..39a83e5 100644 --- 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, }, };