diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
index ab4716a036..25c8bb2624 100644
--- a/themes/vue/source/css/_vueschool.styl
+++ b/themes/vue/source/css/_vueschool.styl
@@ -62,7 +62,11 @@ body.has-vs-banner
padding: 0 10px
min-height: $vs-banner-height-mobile
top: 0
+ background-image: url(/images/banners/vueschool_banner_mobile.png)
+ background-size: cover
+ background-repeat: no-repeat
@media (min-width: 680px)
+ background-image: none
justify-content: center
min-height: $vs-banner-height-desktop
@media (min-width: 900px)
@@ -78,8 +82,12 @@ body.has-vs-banner
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
.vs-core
- display: flex
- align-items: center
+ display: none
+ @media (min-width: 680px)
+ position: relative
+ z-index: 1
+ align-items: center
+ display: flex
.vs-slogan
font-family: Archivo
@@ -113,10 +121,15 @@ body.has-vs-banner
@media (min-width: 680px)
margin-right: 0
padding: 8px 24px
- margin-left: 32px
- @media (min-width: 680px)
+ margin-left: 20px
+ @media (min-width: 1024px)
margin-left: 69px
+ .vs-tag
+ margin-left: 10px
+ @media (min-width: 1024px)
+ margin-left: 30px
+
.vs-close
right: 6px
position: absolute
@@ -143,7 +156,7 @@ body.has-vs-banner
@media (min-width: 768px) {
.vs-blackfriday-coins {
- background-image: url(/images/banners/vueschool_blackfriday_background_tablet.svg);
+ background-image: url(/images/banners/vueschool_blackfriday_background_tablet_2.svg);
background-position: center;
background-size: cover;
}
@@ -174,7 +187,7 @@ body.has-vs-banner
.vs-blackfriday-coin.js {
width: 43px;
top: 32px;
- left: calc(50% - 341px);
+ left: calc(50% - 420px);
}
.vs-blackfriday-coin.ts {
diff --git a/themes/vue/source/images/banners/extended.svg b/themes/vue/source/images/banners/extended.svg
new file mode 100644
index 0000000000..192d76b2f9
--- /dev/null
+++ b/themes/vue/source/images/banners/extended.svg
@@ -0,0 +1,6 @@
+
diff --git a/themes/vue/source/images/banners/vueschool_banner_mobile.png b/themes/vue/source/images/banners/vueschool_banner_mobile.png
new file mode 100644
index 0000000000..590a15a4f3
Binary files /dev/null and b/themes/vue/source/images/banners/vueschool_banner_mobile.png differ
diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg b/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg
similarity index 82%
rename from themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg
rename to themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg
index 022da2d0a1..ed53dc0f14 100644
--- a/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg
+++ b/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg
@@ -113,18 +113,18 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -148,53 +148,53 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
