boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Tweaked the card sizes a bit more to make them bigger on large displays

Browse Source
This commit is contained in:
lscambo13
2025-08-07 07:12:47 -07:00
parent 8fe01cb54c
commit f4f78a1bb7
1 changed files with 91 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
Theme/ElegantFin-theme-nightly.css
View File

@@ -479,88 +479,36 @@ html {
} }
/* if the window width is equal to or more than (at minimum) 300em then the code in the query will trigger */ /* if the window width is equal to or more than (at minimum) 300em then the code in the query will trigger */
/* 21 posters, 19 thumbs */ /* 16 posters, 12 thumbs */
@media (min-width: 300em) { @media (min-width: 300em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
--cardCount: 21; --cardCount: 16;
} }
.overflowPortraitCard, .overflowPortraitCard,
.overflowSquareCard { .overflowSquareCard {
--cardCount: 20; --cardCount: 15;
} }
.squareCard:has(.cardFooter) { .squareCard:has(.cardFooter) {
--cardCount: 19; --cardCount: 12;
} }
.backdropCard { .backdropCard {
--cardCount: 19; --cardCount: 12;
} }
.overflowBackdropCard { .overflowBackdropCard {
--cardCount: 18; --cardCount: 11;
} }
} }
/* if the window width is equal to or less than (at maximum) 300em then the code in the query will trigger */ /* if the window width is equal to or less than (at maximum) 300em then the code in the query will trigger */
/* 19 posters, 17 thumbs */ /* 15 posters, 11 thumbs */
@media (max-width: 300em) { @media (max-width: 300em) {
.portraitCard,
.squareCard {
--cardCount: 19;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 18;
}
.squareCard:has(.cardFooter) {
--cardCount: 17;
}
.backdropCard {
--cardCount: 17;
}
.overflowBackdropCard {
--cardCount: 16;
}
}
/* 17 posters, 15 thumbs */
@media (max-width: 270em) {
.portraitCard,
.squareCard {
--cardCount: 17;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 16;
}
.squareCard:has(.cardFooter) {
--cardCount: 15;
}
.backdropCard {
--cardCount: 15;
}
.overflowBackdropCard {
--cardCount: 14;
}
}
/* 15 posters, 13 thumbs */
@media (max-width: 240em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
--cardCount: 15; --cardCount: 15;
@@ -571,32 +519,6 @@ html {
--cardCount: 14; --cardCount: 14;
} }
.squareCard:has(.cardFooter) {
--cardCount: 13;
}
.backdropCard {
--cardCount: 13;
}
.overflowBackdropCard {
--cardCount: 12;
}
}
/* 13 posters, 11 thumbs, 4K*/
@media (max-width: 220em) {
.portraitCard,
.squareCard {
--cardCount: 13;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 12;
}
.squareCard:has(.cardFooter) { .squareCard:has(.cardFooter) {
--cardCount: 11; --cardCount: 11;
} }
@@ -610,17 +532,17 @@ html {
} }
} }
/* 12 posters, 10 thumbs */ /* 14 posters, 10 thumbs */
@media (max-width: 200em) { @media (max-width: 270em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
--cardCount: 12; --cardCount: 14;
} }
.overflowPortraitCard, .overflowPortraitCard,
.overflowSquareCard { .overflowSquareCard {
--cardCount: 11; --cardCount: 13;
} }
.squareCard:has(.cardFooter) { .squareCard:has(.cardFooter) {
@@ -636,6 +558,84 @@ html {
} }
} }
/* 13 posters, 10 thumbs */
@media (max-width: 240em) {
.portraitCard,
.squareCard {
--cardCount: 13;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 12;
}
.squareCard:has(.cardFooter) {
--cardCount: 10;
}
.backdropCard {
--cardCount: 10;
}
.overflowBackdropCard {
--cardCount: 9;
}
}
/* 12 posters, 9 thumbs, 4K*/
@media (max-width: 220em) {
.portraitCard,
.squareCard {
--cardCount: 12;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 11;
}
.squareCard:has(.cardFooter) {
--cardCount: 9;
}
.backdropCard {
--cardCount: 9;
}
.overflowBackdropCard {
--cardCount: 8;
}
}
/* 11 posters, 9 thumbs */
@media (max-width: 200em) {
.portraitCard,
.squareCard {
--cardCount: 11;
}
.overflowPortraitCard,
.overflowSquareCard {
--cardCount: 10;
}
.squareCard:has(.cardFooter) {
--cardCount: 9;
}
.backdropCard {
--cardCount: 9;
}
.overflowBackdropCard {
--cardCount: 8;
}
}
/* 10 posters, 8 thumbs */ /* 10 posters, 8 thumbs */
@media (max-width: 170em) { @media (max-width: 170em) {
@@ -720,9 +720,7 @@ html {
.portraitCard, .portraitCard,
.squareCard, .squareCard,
.overflowPortraitCard, .overflowPortraitCard,
.overflowSquareCard, .overflowSquareCard {
.squareCard:has(.cardFooter),
.backdropCard {
--cardCount: 7; --cardCount: 7;
} }
@@ -755,7 +753,7 @@ html {
.overflowBackdropCard, .overflowBackdropCard,
.backdropCard { .backdropCard {
--cardCount: 5; --cardCount: 4;
} }
} }