Fix theme images loading (getzola#2517)

FireIsGood · berdandy · commit 609994ba29cd · 2024-09-17T11:32:10.000-04:00
* chore: format themes file

* feat: add aspect ratio to theme images
diff --git a/docs/sass/_themes.scss b/docs/sass/_themes.scss
@@ -1,4 +1,3 @@
-
 .themes-container {
   padding: 3rem;
   width: 80%;
@@ -9,7 +8,7 @@
   }
 }
 
-@media only screen and (max-width: 1000px)  {
+@media only screen and (max-width: 1000px) {
   .themes-container {
     width: 100%;
     margin: 0 1rem;
@@ -32,6 +31,7 @@
 
     img {
       width: 100%;
+      aspect-ratio: 16 / 9;
       height: 90%;
       object-fit: cover;
     }
@@ -54,21 +54,21 @@
     margin-right: 2rem;
   }
 
-  h1, p {
+  h1,
+  p {
     margin: 0;
   }
 
   padding: 1rem;
 }
 
-
-@media only screen and (max-width: 1000px)  {
+@media only screen and (max-width: 1000px) {
   .themes .theme {
     width: 100%;
   }
 }
 
-@media only screen and (max-width: 1000px)  {
+@media only screen and (max-width: 1000px) {
   .theme-info {
     flex-direction: column;
     align-items: center;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-`
`2`	`1`	`.themes-container {`
`3`	`2`	`padding: 3rem;`
`4`	`3`	`width: 80%;`
`@@ -9,7 +8,7 @@`
`9`	`8`	`}`
`10`	`9`	`}`
`11`	`10`
`12`		`-@media only screen and (max-width: 1000px) {`
	`11`	`+@media only screen and (max-width: 1000px) {`
`13`	`12`	`.themes-container {`
`14`	`13`	`width: 100%;`
`15`	`14`	`margin: 0 1rem;`
`@@ -32,6 +31,7 @@`
`32`	`31`
`33`	`32`	`img {`
`34`	`33`	`width: 100%;`
	`34`	`+ aspect-ratio: 16 / 9;`
`35`	`35`	`height: 90%;`
`36`	`36`	`object-fit: cover;`
`37`	`37`	`}`
`@@ -54,21 +54,21 @@`
`54`	`54`	`margin-right: 2rem;`
`55`	`55`	`}`
`56`	`56`
`57`		`- h1, p {`
	`57`	`+ h1,`
	`58`	`+ p {`
`58`	`59`	`margin: 0;`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`padding: 1rem;`
`62`	`63`	`}`
`63`	`64`
`64`		`-`
`65`		`-@media only screen and (max-width: 1000px) {`
	`65`	`+@media only screen and (max-width: 1000px) {`
`66`	`66`	`.themes .theme {`
`67`	`67`	`width: 100%;`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`
`71`		`-@media only screen and (max-width: 1000px) {`
	`71`	`+@media only screen and (max-width: 1000px) {`
`72`	`72`	`.theme-info {`
`73`	`73`	`flex-direction: column;`
`74`	`74`	`align-items: center;`