diff --git a/components/filters/filters.vue b/components/filters/filters.vue index 78ddbeb..d7bb8bd 100644 --- a/components/filters/filters.vue +++ b/components/filters/filters.vue @@ -304,6 +304,12 @@ function toggleFilters(state) { line-height: 1.25; font-size: .9rem; } + +@media (--compact) { + .filter { + border-right: solid 1px var(--shadow-weak-30); + } +} diff --git a/pages/entities/+Page.vue b/pages/entities/+Page.vue index 8ded46b..b2f9548 100644 --- a/pages/entities/+Page.vue +++ b/pages/entities/+Page.vue @@ -122,4 +122,16 @@ const sections = [ width: 100%; object-fit: contain; } + +@media(--small-30) { + .networks { + grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); + } +} + +@media(--small-50) { + .networks { + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + } +} diff --git a/pages/movies/+Page.vue b/pages/movies/+Page.vue index 1174d6e..f1a53cb 100644 --- a/pages/movies/+Page.vue +++ b/pages/movies/+Page.vue @@ -461,4 +461,10 @@ function updateFilter(prop, value, reload = true) { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } } + +@media(--small-50) { + .movies { + grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); + } +}