diff --git a/src/.vuepress/public/images/vueschool/extended.svg b/src/.vuepress/public/images/vueschool/extended.svg new file mode 100644 index 0000000000..192d76b2f9 --- /dev/null +++ b/src/.vuepress/public/images/vueschool/extended.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/.vuepress/public/images/vueschool/vueschool_banner_mobile.png b/src/.vuepress/public/images/vueschool/vueschool_banner_mobile.png new file mode 100644 index 0000000000..590a15a4f3 Binary files /dev/null and b/src/.vuepress/public/images/vueschool/vueschool_banner_mobile.png differ diff --git a/src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet.svg b/src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet_2.svg similarity index 82% rename from src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet.svg rename to src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet_2.svg index 022da2d0a1..ed53dc0f14 100644 --- a/src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet.svg +++ b/src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet_2.svg @@ -113,18 +113,18 @@ - - - - - - - - - - - - + + + + + + + + + + + + @@ -148,53 +148,53 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + diff --git a/src/.vuepress/theme/components/BannerCoins.vue b/src/.vuepress/theme/components/BannerCoins.vue index 55cee2204e..108cd95556 100644 --- a/src/.vuepress/theme/components/BannerCoins.vue +++ b/src/.vuepress/theme/components/BannerCoins.vue @@ -68,7 +68,7 @@ export default { @media (min-width: 768px) { .vs-blackfriday-coins { - background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet.svg); + background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet_2.svg); background-position: center; background-size: cover; } @@ -99,7 +99,7 @@ export default { .vs-blackfriday-coin.js { width: 43px; top: 32px; - left: calc(50% - 341px); + left: calc(50% - 436px); } .vs-blackfriday-coin.ts { @@ -125,7 +125,7 @@ export default { .vs-blackfriday-coin.nuxt { top: 10px; width: 48px; - left: calc(50% - 474px); + left: calc(50% - 494px); } } diff --git a/src/.vuepress/theme/components/BannerTop.vue b/src/.vuepress/theme/components/BannerTop.vue index 87c0f0684d..6e3e1a9eba 100644 --- a/src/.vuepress/theme/components/BannerTop.vue +++ b/src/.vuepress/theme/components/BannerTop.vue @@ -10,12 +10,13 @@ Access to all Vue Courses at Vue School
- Black Friday 40% OFF + Cyber Monday 40% OFF - Closes Soon
Get Discount
+ Extended
Close @@ -55,7 +56,11 @@ $topBannerHeightMobile ?= 5rem z-index: 100 line-height: 1 height: $topBannerHeightMobile + background-image: url(/images/vueschool/vueschool_banner_mobile.png) + background-size: cover + background-repeat: no-repeat @media (min-width: 680px) + background-image: none height: $topBannerHeight justify-content: center @@ -65,8 +70,10 @@ $topBannerHeightMobile ?= 5rem background: linear-gradient(261deg, #e61463 100%, #db5248 3%) .vs-core - display: flex - align-items: center + display: none + @media (min-width: 680px) + align-items: center + display: flex .vs-slogan font-family: Archivo @@ -100,13 +107,19 @@ $topBannerHeightMobile ?= 5rem @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 + z-index: 10 @media (min-width: 680px) padding: 10px right: 20px