boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-12-27 22:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Added responsive Episode card grid to get rid of the media queries

Browse Source
This commit is contained in:
lscambo13
2025-11-15 21:31:16 +05:30
parent 81a118e86e
commit 86a1e1c74e
1 changed files with 4 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,6 +95,7 @@
--primaryItemPageNegativeSpace: 14vh; --primaryItemPageNegativeSpace: 14vh;
--secondaryItemPageNegativeSpace: 60vh; --secondaryItemPageNegativeSpace: 60vh;
--clearLogoBottomSpace: 11em; --clearLogoBottomSpace: 11em;
--minEpisodeCardWidth: 26em;
--blurSmallest: blur(2px); --blurSmallest: blur(2px);
--blurDefault: blur(5px); --blurDefault: blur(5px);
@@ -511,18 +512,11 @@ html {
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list, .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list { .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
gap: var(--itemColumnGap); gap: var(--itemColumnGap);
} }
@media (max-width: 100em) { /* @media (max-width: 64em) {
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 64em) {
.layout-desktop .listItemImage-large { .layout-desktop .listItemImage-large {
width: 100%; width: 100%;
} }
@@ -530,14 +524,7 @@ html {
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list { .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} } */
@media (max-width: 40em) {
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(1, 1fr);
}
}
.layout-desktop .listItem-largeImage { .layout-desktop .listItem-largeImage {
display: grid; display: grid;