From 909d0123d52671ccccd33faf761a17f60438e53d Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 26 Nov 2019 10:29:15 +0100 Subject: [PATCH 1/2] refactor: make banner stand out --- .../vue/layout/partials/vueschool_banner.ejs | 1 + themes/vue/source/css/_vueschool.styl | 79 +++++++++---------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index 182e25f75c..00c87597e4 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -3,6 +3,7 @@

Black Friday 40% OFF at Vue SchoolLearn Vue.js through video courses.

+
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index 54259726d1..a17ed24018 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -4,33 +4,17 @@ .vueschool-banner display none - background #4fc08d - background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%) + background #ffd046 overflow hidden position relative - &:before - content '' - background #35495E - background-image linear-gradient(to right, #4fc08d, #4fc08d 80%, #35495E 100%) - position absolute - top 0 - bottom 0 - left 0 - width 0 - transition width .15s ease-out .1s - &:hover &:before transition width .15s ease-in width 50% p transition-delay 0 - color #fff - .vueschool-banner--wrapper::before - width 100vw - transition width .15s ease-in .10s a display flex @@ -44,34 +28,24 @@ display flex height 100% align-items center - background #4fc08d + background #ffd046 margin-left -50px padding-left 50px position relative - &:before - content '' - pointer-events none - background #35495E - background-image linear-gradient(to right, #35495E, #35495E 80%, #4fc08d 100%) - position absolute - top 0 - bottom 0 - left 0 - width 0 - transition width .15s ease-out &:hover + .vueschool-banner--close &:before, &:after transform-origin 100% + background #0d0751 p margin -3px 50px 0 20px font-size 1.17rem font-weight 600 - color #2c3e50 + color #0d0751 position relative transition-delay .15s @@ -80,6 +54,22 @@ display block color #fff + button + cursor pointer + font-weight 600 + text-transform uppercase + padding 16px 32px + border-radius 32px + background #0d0751 + border none + color #ffd046 + font-size 16px + margin: 0 auto + + &:hover + color white + + .vueschool-banner--logo height 102% margin-top: -1px @@ -141,24 +131,32 @@ #main.fix-sidebar .sidebar .sidebar-inner padding-top 110px + #sidebar-sponsors-platinum-right + position absolute + top: 170px; + @media screen and (min-width: 415px) and (max-width: 900px) .vueschool-weekend-promo.docs:not(.vueschool-menu-fixed) - #main.fix-sidebar .sidebar .sidebar-inner - padding-top 140px + #main.fix-sidebar .sidebar .sidebar-inner + padding-top 140px - #sidebar-sponsors-platinum-right - position absolute - top: 170px; + #sidebar-sponsors-platinum-right + position absolute + top: 170px; - &.vueschool-menu-fixed.docs - .vueschool-banner - margin-bottom 0 + &.vueschool-menu-fixed.docs + .vueschool-banner + margin-bottom 0 + + .vueschool-banner + button + display none @media screen and (max-width: 414px) // Docs menu .vueschool-weekend-promo.docs:not(.vueschool-menu-fixed) #main.fix-sidebar .sidebar .sidebar-inner - padding-top 100px + padding-top 100px .vueschool-banner .vueschool-banner--logo @@ -182,7 +180,6 @@ p, span font-size .8rem - color #fff .vueschool-banner--close top 0px @@ -201,6 +198,8 @@ max-width 200px span display none + button + display none @media screen and (max-width 286px) .vueschool-banner p From 0db4776322cd7c30aa2fb869bf2032ee44dc2a01 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 26 Nov 2019 19:27:52 +0100 Subject: [PATCH 2/2] refactor: change banner style --- themes/vue/source/css/_vueschool.styl | 19 ++-- .../images/vueschool_banner_background.jpg | Bin 0 -> 4670 bytes themes/vue/source/images/vueschool_logo.svg | 84 +++++++----------- 3 files changed, 41 insertions(+), 62 deletions(-) create mode 100644 themes/vue/source/images/vueschool_banner_background.jpg diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index a17ed24018..ba08c82d11 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -4,9 +4,13 @@ .vueschool-banner display none - background #ffd046 + background #0d0751 overflow hidden position relative + background-image: url(/images/vueschool_banner_background.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; &:hover &:before @@ -25,10 +29,11 @@ display none .vueschool-banner--wrapper + color: #FFF display flex height 100% align-items center - background #ffd046 + background #0d0751 margin-left -50px padding-left 50px position relative @@ -39,13 +44,12 @@ &:before, &:after transform-origin 100% - background #0d0751 + background #fff p margin -3px 50px 0 20px font-size 1.17rem font-weight 600 - color #0d0751 position relative transition-delay .15s @@ -60,9 +64,9 @@ text-transform uppercase padding 16px 32px border-radius 32px - background #0d0751 + background #ff49c6 border none - color #ffd046 + color #FFF font-size 16px margin: 0 auto @@ -71,9 +75,6 @@ .vueschool-banner--logo - height 102% - margin-top: -1px - margin-left 125px position relative z-index 2 diff --git a/themes/vue/source/images/vueschool_banner_background.jpg b/themes/vue/source/images/vueschool_banner_background.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c6a78a2ae7821ad0555688f1f5bb3582c70e6680 GIT binary patch literal 4670 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 N5it${cUJTGe*hO+8QTB= literal 0 HcmV?d00001 diff --git a/themes/vue/source/images/vueschool_logo.svg b/themes/vue/source/images/vueschool_logo.svg index 885ad1c5bd..d0b1ee4f34 100644 --- a/themes/vue/source/images/vueschool_logo.svg +++ b/themes/vue/source/images/vueschool_logo.svg @@ -1,54 +1,32 @@ - - - - -existing_color -Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +