From 58b6553845be91711bda4fec6a87a7904d4d98ad Mon Sep 17 00:00:00 2001 From: KZacharski Date: Wed, 5 Apr 2023 04:59:46 +0200 Subject: [PATCH] Made the banners less cut off on desktop, they look really low quality tho so I'll need to fix that --- src/views/BetterAperture.vue | 9 +++++++-- src/views/Blurry_Wallpapers.vue | 9 +++++++-- src/views/Duo.vue | 9 +++++++-- src/views/PufferIcons.vue | 13 ++++++++++--- src/views/PufferIcons_Filled.vue | 9 +++++++-- src/views/Puffercat_Apps.vue | 9 +++++++-- src/views/Shapes.vue | 9 +++++++-- src/views/WallCat.vue | 9 +++++++-- 8 files changed, 59 insertions(+), 17 deletions(-) diff --git a/src/views/BetterAperture.vue b/src/views/BetterAperture.vue index 0f51485..6722c49 100644 --- a/src/views/BetterAperture.vue +++ b/src/views/BetterAperture.vue @@ -185,13 +185,18 @@ Join the support group on Telegram: https:// } .aboutFrameworkLogo { width: 175px; } .bannerColumn { - height: 200px; + height: 500px; background-image: url("../assets/Banner_BetterAperture.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/Blurry_Wallpapers.vue b/src/views/Blurry_Wallpapers.vue index 7594020..a2790a7 100644 --- a/src/views/Blurry_Wallpapers.vue +++ b/src/views/Blurry_Wallpapers.vue @@ -173,13 +173,18 @@ Blurry wallpapers with and without grain. The collection will be frequently upda } .aboutFrameworkLogo { width: 175px; } .bannerColumn { - height: 200px; + height: 500px; background-image: url("../assets/Banner_Blurry_Wallpapers.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/Duo.vue b/src/views/Duo.vue index da355f4..69217a0 100644 --- a/src/views/Duo.vue +++ b/src/views/Duo.vue @@ -154,13 +154,18 @@ } .aboutFrameworkLogo { width: 175px; } .bannerColumn { - height: 200px; + height: 500px; background-image: url("../assets/Banner_Duo.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/PufferIcons.vue b/src/views/PufferIcons.vue index 672de04..c6e0331 100644 --- a/src/views/PufferIcons.vue +++ b/src/views/PufferIcons.vue @@ -164,14 +164,21 @@ Lawnicons is an add-on for adding themed icons to Lawnchair 12 Alpha 5 and above } } .aboutFrameworkLogo { width: 175px; - } .bannerColumn { - height: 200px; + } + .bannerColumn { + height: 500px; background-image: url("../assets/Banner_PufferIcons.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} + .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/PufferIcons_Filled.vue b/src/views/PufferIcons_Filled.vue index 7ac72a9..3fcfd21 100644 --- a/src/views/PufferIcons_Filled.vue +++ b/src/views/PufferIcons_Filled.vue @@ -155,13 +155,18 @@ PufferIcons Filled as well as Rkicons are filled while PufferIcons and Lawnicons } .aboutFrameworkLogo { width: 175px; } .bannerColumn { - height: 200px; + height: 500px; background-image: url("../assets/Banner_PufferIcons_Filled.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/Puffercat_Apps.vue b/src/views/Puffercat_Apps.vue index 0ce7226..33de091 100644 --- a/src/views/Puffercat_Apps.vue +++ b/src/views/Puffercat_Apps.vue @@ -203,13 +203,18 @@ The full catalog of apps created by Puffercat as well as ones currently in devel } .aboutFrameworkLogo { width: 175px; } .bannerColumn { - height: 200px; + height: 500px; background-image: url("../assets/Banner_Puffercat_Apps.png"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 25px; - } .column-standard2 { + } + @media screen and (max-width: 850px) { + .bannerColumn { + height: 200px; + } +} .column-standard2 { background-color: transparent; color: var(--ion-color-light-contrast); padding: 0px; diff --git a/src/views/Shapes.vue b/src/views/Shapes.vue index 1ec17df..f6cd614 100644 --- a/src/views/Shapes.vue +++ b/src/views/Shapes.vue @@ -179,13 +179,18 @@ Shapes is a collection of monet-compliant wallpapers available in many colors