Make the texts switch to different size starting from lg

hasparus · hasparus · commit 3634196a3e93 · 2025-05-15T18:08:27.000+02:00
diff --git a/src/app/typography.css b/src/app/typography.css
@@ -15,7 +15,7 @@
 .typography-d1 {
   font-size: 96px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-d1 {
     font-size: 48px;
   }
@@ -24,7 +24,7 @@
 .typography-h1 {
   font-size: 40px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-h1 {
     font-size: 72px;
   }
@@ -33,7 +33,7 @@
 .typography-h2 {
   font-size: 32px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-h2 {
     font-size: 48px;
   }
@@ -42,7 +42,7 @@
 .typography-h3 {
   font-size: 24px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-h3 {
     font-size: 32px;
   }
@@ -51,7 +51,7 @@
 .typography-body-lg {
   font-size: 16px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-body-lg {
     font-size: 20px;
   }
@@ -60,7 +60,7 @@
 .typography-body-md {
   font-size: 14px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-body-md {
     font-size: 16px;
   }
@@ -69,7 +69,7 @@
 .typography-body-sm {
   font-size: 12px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-body-sm {
     font-size: 14px;
   }
@@ -78,7 +78,7 @@
 .typography-body-xs {
   font-size: 10px;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .typography-body-xs {
     font-size: 12px;
   }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`.typography-d1 {`
`16`	`16`	`font-size: 96px;`
`17`	`17`	`}`
`18`		`-@media (min-width: 768px) {`
	`18`	`+@media (min-width: 1024px) {`
`19`	`19`	`.typography-d1 {`
`20`	`20`	`font-size: 48px;`
`21`	`21`	`}`
`@@ -24,7 +24,7 @@`
`24`	`24`	`.typography-h1 {`
`25`	`25`	`font-size: 40px;`
`26`	`26`	`}`
`27`		`-@media (min-width: 768px) {`
	`27`	`+@media (min-width: 1024px) {`
`28`	`28`	`.typography-h1 {`
`29`	`29`	`font-size: 72px;`
`30`	`30`	`}`
`@@ -33,7 +33,7 @@`
`33`	`33`	`.typography-h2 {`
`34`	`34`	`font-size: 32px;`
`35`	`35`	`}`
`36`		`-@media (min-width: 768px) {`
	`36`	`+@media (min-width: 1024px) {`
`37`	`37`	`.typography-h2 {`
`38`	`38`	`font-size: 48px;`
`39`	`39`	`}`
`@@ -42,7 +42,7 @@`
`42`	`42`	`.typography-h3 {`
`43`	`43`	`font-size: 24px;`
`44`	`44`	`}`
`45`		`-@media (min-width: 768px) {`
	`45`	`+@media (min-width: 1024px) {`
`46`	`46`	`.typography-h3 {`
`47`	`47`	`font-size: 32px;`
`48`	`48`	`}`
`@@ -51,7 +51,7 @@`
`51`	`51`	`.typography-body-lg {`
`52`	`52`	`font-size: 16px;`
`53`	`53`	`}`
`54`		`-@media (min-width: 768px) {`
	`54`	`+@media (min-width: 1024px) {`
`55`	`55`	`.typography-body-lg {`
`56`	`56`	`font-size: 20px;`
`57`	`57`	`}`
`@@ -60,7 +60,7 @@`
`60`	`60`	`.typography-body-md {`
`61`	`61`	`font-size: 14px;`
`62`	`62`	`}`
`63`		`-@media (min-width: 768px) {`
	`63`	`+@media (min-width: 1024px) {`
`64`	`64`	`.typography-body-md {`
`65`	`65`	`font-size: 16px;`
`66`	`66`	`}`
`@@ -69,7 +69,7 @@`
`69`	`69`	`.typography-body-sm {`
`70`	`70`	`font-size: 12px;`
`71`	`71`	`}`
`72`		`-@media (min-width: 768px) {`
	`72`	`+@media (min-width: 1024px) {`
`73`	`73`	`.typography-body-sm {`
`74`	`74`	`font-size: 14px;`
`75`	`75`	`}`
`@@ -78,7 +78,7 @@`
`78`	`78`	`.typography-body-xs {`
`79`	`79`	`font-size: 10px;`
`80`	`80`	`}`
`81`		`-@media (min-width: 768px) {`
	`81`	`+@media (min-width: 1024px) {`
`82`	`82`	`.typography-body-xs {`
`83`	`83`	`font-size: 12px;`
`84`	`84`	`}`