diff --git a/src/images/background-bubbles-vuemastery.svg b/src/images/background-bubbles-vuemastery.svg new file mode 100644 index 0000000000..8f5ec7e888 --- /dev/null +++ b/src/images/background-bubbles-vuemastery.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/background-vuemastery.svg b/src/images/background-vuemastery.svg new file mode 100644 index 0000000000..fdb8488e2c --- /dev/null +++ b/src/images/background-vuemastery.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/lock-vuemastery.svg b/src/images/lock-vuemastery.svg new file mode 100644 index 0000000000..c9583a1a0b --- /dev/null +++ b/src/images/lock-vuemastery.svg @@ -0,0 +1,230 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logo-vuemastery.svg b/src/images/logo-vuemastery.svg new file mode 100644 index 0000000000..b4ce163d48 --- /dev/null +++ b/src/images/logo-vuemastery.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/unlock-vuemastery.svg b/src/images/unlock-vuemastery.svg new file mode 100644 index 0000000000..917b2bd2ae --- /dev/null +++ b/src/images/unlock-vuemastery.svg @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml index cf85ae282e..91dcb44e3e 100644 --- a/themes/vue/_config.yml +++ b/themes/vue/_config.yml @@ -45,6 +45,10 @@ platinum: - name: CodeDict url: https://code-dict.com img: codedict.svg + - name: vuejs.de Conf + url: >- + https://conf.vuejs.de/?utm_source=vuejs-vite&utm_medium=referral&utm_campaign=sponsoring + img: vuejs_de_conf.svg platinum_china: - name: HBuilder url: https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci= @@ -134,6 +138,9 @@ gold: - name: Handsontable - JavaScript Data Grid url: https://handsontable.com/ img: handsontable___javascript_data_grid.svg + - name: 1Tool + url: https://www.1tool.com + img: 1tool.png silver: - name: Draxlr url: https://www.draxlr.com @@ -163,6 +170,9 @@ silver: - name: AddWeb Solution url: http://addwebsolution.com/ img: addweb_solution.png + - name: 1394TA + url: https://1394ta.org + img: 1394ta.png bronze: - name: Derek Pollard url: https://polyglotengineer.com/derek.pollard diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs index 0054cd1911..bc9f12210e 100644 --- a/themes/vue/layout/layout.ejs +++ b/themes/vue/layout/layout.ejs @@ -1,6 +1,6 @@ <% var isIndex = page.path === 'index.html' %> <% var isThemes = page.path === 'resources/themes.html' %> -<% var hasVueSchoolBanner = true %> +<% var hasVueMasteryBanner = true %> @@ -90,12 +90,11 @@ - - <% if (hasVueSchoolBanner) { %> - <%- partial('partials/vueschool_banner') %> + + <% if (hasVueMasteryBanner) { %> + <%- partial('partials/vuemastery_banner') %> <% } %> -
> diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs new file mode 100644 index 0000000000..6ba1ac581d --- /dev/null +++ b/themes/vue/layout/partials/vuemastery_banner.ejs @@ -0,0 +1,100 @@ + + + diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl new file mode 100644 index 0000000000..c2cb4f4ee4 --- /dev/null +++ b/themes/vue/source/css/_vuemastery-banner.styl @@ -0,0 +1,254 @@ +.vuemastery-banner + display none + background: url(../images/background-vuemastery.svg) center center no-repeat + background-size 100% auto + overflow hidden + position relative + transition all .3s ease-out .1s + + &:before + content '' + background: url(../images/background-bubbles-vuemastery.svg) left center no-repeat + background-size cover + position absolute + top 0 + bottom 0 + left 0 + right 0 + transition all .3s ease-out .1s + transform: scale(1.1) + + &:after + content: '' + background: url(../images/lock-vuemastery.svg) right center no-repeat + background-size: auto 100% + position: absolute + width: 100% + height: 100% + top: 0 + left: 0 + pointer-events: none + + &:hover + background-size 150% auto + + &:before + transform: scale(1) + + &:after + background-image url(../images/unlock-vuemastery.svg) + + a + display flex + height 80px + justify-content center + +.vuemastery-banner--wrapper + display flex + height 100% + align-items center + width: 100% + justify-content: center + position relative + + &:before + content '' + pointer-events none + position absolute + top 0 + bottom 0 + left 0 + width 0 + transition width .3s ease-out + + &:hover + + .vuemastery-banner--close + &:before, + &:after + transform-origin 100% + + p + margin -3px 50px 0 20px + font-size 1rem + color #fff + position relative + transition-delay .15s + + span + font-size 1.17rem + font-weight 600 + display block + color #BEFF74 + background -webkit-linear-gradient(#41E281, #BEFF74) + -webkit-background-clip text + -webkit-text-fill-color transparent + +.vuemastery-banner--logo + height 102% + margin-top: -1px + margin-left -200px + position relative + z-index 2 + +.vuemastery-banner--close + position absolute + top 20px + right 25px + height 40px + width 40px + -webkit-tap-highlight-color transparent + border-radius 50% + cursor pointer + + &:before, + &:after + content '' + position absolute + top 19px + left 14px + width 25px + height 2px + background-color #fff + transform-origin 50% + transform rotate(-45deg) + transition all .2s ease-out + + &:after + transform rotate(45deg) + +.vuemastery-button + display: inline-flex; + background: linear-gradient(to top right,#3d2c61,#835ec2); + height: 38px; + margin: .5em 0; + line-height: 38px; + padding: 0 30px; + color: #fff; + text-decoration: none; + align-items: center; + justify-content: center; + outline: 0; + text-transform: uppercase; + border: none; + border-radius: 36px; + font-weight: bold; + font-size: 12px; + cursor: pointer; + position: relative + overflow hidden + + &:before, + &:after + background: linear-gradient(to top right,transparent,#fff); + content: ""; + height: 150px; + left: -175px; + opacity: .1; + position: absolute; + top: -50px; + transform: rotate(35deg); + width: 100px; + +.vuemastery-weekend-promo + #mobile-bar, + #mobile-bar.top + position relative + background-color #fff + + &.docs:not(.vuemastery-menu-fixed) + padding-top 0 + #header + position relative + width auto + + &.vuemastery-menu-fixed + #mobile-bar + position fixed + +@media screen and (min-width: 901px) + .vuemastery-weekend-promo + &.docs:not(.vuemastery-menu-fixed) + #main.fix-sidebar .sidebar + position absolute + top 141px + + #sidebar-sponsors-platinum-right + position absolute + top: 170px; + + &.vuemastery-menu-fixed.docs + .vuemastery-banner + margin-bottom 0 + .vuemastery-banner--wrapper span + display block + +@media screen and (max-width: 1200px) + .vuemastery-banner + &, + &:hover + background-size cover + + &:before + transform: scale(1) + + &:hover:before + transform: scale(1) + +@media screen and (max-width: 1100px) + .vuemastery-button + display none + +@media screen and (max-width: 900px) + .vuemastery-weekend-promo + &.vuemastery-menu-fixed + .vuemastery-banner + margin-bottom 40px + + .vuemastery-banner:after + background-position right -6rem center + + +@media screen and (max-width: 700px) + .vuemastery-banner + a + height 40px + overflow hidden + + &:after + background-position right -3rem center + + .vuemastery-banner--logo + margin-left 0 + justify-content flex-start + + p, span + font-size .8rem + color #fff + max-width: 13rem; + + .vuemastery-banner--close + top 0px + right 0px + + &:before, + &:after + top 19px + left 14px + width 15px + height 2px + +@media screen and (max-width: 465px) + .vuemastery-banner + &:after + display: none + p + max-width 185px +@media screen and (max-width 330px) + .vuemastery-banner p + font-size 0.6rem + margin -3px 28px 0 0px + max-width 140px + +@media print + .vuemastery-banner + display none \ No newline at end of file diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl index bec2ecd6f2..1d776228b8 100644 --- a/themes/vue/source/css/index.styl +++ b/themes/vue/source/css/index.styl @@ -3,6 +3,7 @@ @import "_sidebar" @import "_sponsors-index" @import "_modal" +@import "_vuemastery-banner" @import "_themes" @import "_vueschool.styl" diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index e8b6b94cdc..07f0378b85 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -14,6 +14,7 @@ @import "_style-guide" @import "_modal" @import "_scrimba" +@import "_vuemastery-banner" @import "_vue-mastery" @import "_themes" @import "_vueschool.styl"