Skip to content

Commit 2e12128

Browse files
nicodevsnicodevs
authored
Add Vue School Free Weekend banner (#2939)
1 parent 8736949 commit 2e12128

15 files changed

+691
-4
lines changed

‎themes/vue/layout/index.ejs

+3-2
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,11 @@
165165
})
166166
167167
window.addEventListener('scroll', function () {
168-
if (window.pageYOffset > 165 && !topScrolled) {
168+
var offset = 20
169+
if (window.pageYOffset > offset && !topScrolled) {
169170
topScrolled = true
170171
document.getElementById('mobile-bar').classList.remove('top')
171-
} else if (window.pageYOffset <= 165 && topScrolled) {
172+
} else if (window.pageYOffset <= offset && topScrolled) {
172173
topScrolled = false
173174
document.getElementById('mobile-bar').classList.add('top')
174175
}

‎themes/vue/layout/layout.ejs

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<% var isIndex = page.path === 'index.html' %>
22
<% var isThemes = page.path === 'resources/themes.html' %>
3+
<% var hasVueSchoolBanner = true %>
34

45
<!DOCTYPE html>
56
<html lang="en" class="with-v3-banner">
@@ -54,7 +55,7 @@
5455
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
5556
<link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin>
5657

57-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet">
58+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto|Roboto Mono&display=swap" rel="stylesheet">
5859
<link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet">
5960

6061
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@@ -90,6 +91,11 @@
9091
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
9192
</head>
9293
<body class="<%- isIndex ? '' : 'docs' -%>" data-v3-url="<%- theme.redirects['/' + page.path] || '' -%>">
94+
95+
<% if (hasVueSchoolBanner) { %>
96+
<%- partial('partials/vueschool_banner') %>
97+
<% } %>
98+
9399
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
94100
<a class="menu-button"></a>
95101
<a class="logo" href="/"></a>

‎themes/vue/layout/partials/vueschool_banner.ejs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<a id="vs" class="vs-hidden" href="https://vueschool.io/free-weekend?friend=vuejs" target="_blank" rel="noreferrer">
2+
<div class="vs-iso">
3+
<img src="/images/banners/vs-iso.svg">
4+
</div>
5+
<div class="vs-logo">
6+
<img src="/images/banners/vs-logo.svg">
7+
</div>
8+
<div class="vs-core">
9+
<div class="vs-slogan">
10+
<div class="vs-slogan-up">
11+
VUE 3 MASTERCLASS - FREE WEEKEND
12+
</div>
13+
<div class="vs-slogan-down">
14+
Register at <strong>vueschool.io/free-weekend</strong>
15+
</div>
16+
</div>
17+
<div class="vs-button">
18+
<div class="vs-button-inside">
19+
<img src="/images/banners/free-access.svg" alt="Free Access">
20+
</div>
21+
</div>
22+
</div>
23+
<div id="vs-close" class="vs-close">
24+
<img src="/images/banners/close.svg" alt="Close">
25+
</div>
26+
</a>

‎themes/vue/source/css/_header.styl

+1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ body.docs
143143
display: none
144144
box-shadow: 0 0 2px rgba(0,0,0,.25)
145145
pointer-events: none
146+
transition: background-color 0.25s ease-in
146147
> *
147148
pointer-events: auto
148149
.menu-button

‎themes/vue/source/css/_vueschool.styl

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
@import "_settings"
2+
$mobile-bar-height = 40px
3+
$vs-banner-height-desktop = 80px
4+
$vs-banner-height-mobile = 50px
5+
$menu-height = 63px
6+
7+
body.has-vs-banner
8+
9+
#v3-banner
10+
margin-top: $vs-banner-height-mobile
11+
@media (min-width: 680px)
12+
margin-top: $vs-banner-height-desktop
13+
@media (min-width: 900px)
14+
margin-top: 0
15+
16+
#mobile-bar
17+
top: $vs-banner-height-mobile
18+
@media (min-width: 680px)
19+
top: $vs-banner-height-desktop
20+
21+
.sidebar
22+
top: $vs-banner-height-mobile + $mobile-bar-height
23+
@media (min-width: 680px)
24+
top: $vs-banner-height-desktop + $mobile-bar-height
25+
@media (min-width: 900px)
26+
top: $vs-banner-height-desktop + $menu-height
27+
28+
.content
29+
padding-top: 85px
30+
@media (min-width: 680px)
31+
padding-top: 125px
32+
@media (min-width: 900px)
33+
padding-top: 35px
34+
35+
&.docs
36+
@media (min-width: 900px)
37+
padding-top: 144px
38+
39+
#vs
40+
position: fixed
41+
42+
#header
43+
top: $vs-banner-height-mobile
44+
@media (min-width: 680px)
45+
top: $vs-banner-height-desktop
46+
47+
#sidebar-sponsors-platinum-right
48+
@media (min-width: 900px)
49+
top: 160px
50+
51+
#vs
52+
font-family "Roboto", sans-serif
53+
z-index: 8
54+
box-sizing: border-box
55+
color: #fff
56+
background-size: cover
57+
background-color: #1E204D
58+
background-repeat: no-repeat
59+
background-position: top right
60+
background-image: url(../images/banners/vueschool-banner-bg-mobile.svg)
61+
display: flex
62+
justify-content: center
63+
align-items: center
64+
position: fixed
65+
left: 0
66+
right: 0
67+
padding: 0 10px
68+
min-height: $vs-banner-height-mobile
69+
top: 0
70+
@media (min-width: 680px)
71+
min-height: $vs-banner-height-desktop
72+
background-image: url(../images/banners/vueschool-banner-bg-tablet.svg)
73+
@media (min-width: 900px)
74+
position: static
75+
background-image: url(../images/banners/vueschool-banner-bg-desktop.svg)
76+
77+
&.vs-hidden
78+
display: none
79+
80+
&:hover
81+
.vs-core
82+
.vs-button
83+
.vs-button-inside
84+
background: linear-gradient(#ed81eb, #d457d0)
85+
&.vs-button-alt
86+
.vs-button-inside
87+
background: linear-gradient(#ffea80, #ffba49)
88+
89+
.vs-iso
90+
position: absolute
91+
left: 20px
92+
height: 26px
93+
img
94+
height: 26px
95+
@media (min-width: 680px)
96+
left: 40px
97+
height: 40px
98+
img
99+
height: 40px
100+
@media (min-width: 900px)
101+
display: none
102+
103+
.vs-logo
104+
position: absolute
105+
display: none
106+
left: 40px
107+
@media (min-width: 900px)
108+
display: block
109+
110+
.vs-core
111+
display: flex
112+
align-items: center
113+
114+
.vs-slogan
115+
text-align: center
116+
117+
.vs-slogan-up
118+
color: #47b785
119+
font-size: 14px
120+
font-weight: bold
121+
@media (min-width: 680px)
122+
font-size: 18px
123+
124+
.vs-slogan-down
125+
color: #fff
126+
font-size: 12px
127+
@media (min-width: 680px)
128+
font-size: 16px
129+
strong
130+
color: #48a0ff
131+
132+
.vs-button
133+
margin-left: 43px
134+
color: #fff
135+
background: linear-gradient(to bottom, #b349b0, #dc61da)
136+
padding: 2px
137+
border-radius: 40px
138+
display: none
139+
@media (min-width: 680px)
140+
display: inline-block
141+
.vs-button-inside
142+
border-radius: 40px
143+
background: linear-gradient(#dc61da, #b349b0)
144+
transition: all .25s ease-in
145+
padding: 17px 27px
146+
line-height: 0
147+
@media (min-width: 680px)
148+
padding: 13px 24px
149+
&.vs-button-alt
150+
background: linear-gradient(to bottom, #ffcc38, #ffd13d)
151+
.vs-button-inside
152+
background: linear-gradient(to bottom, #ffe24f, #ffa40e)
153+
154+
.vs-close
155+
right: 10px
156+
position: absolute
157+
padding: 10px
158+
@media (min-width: 680px)
159+
right: 20px
160+
&:hover
161+
color: #56D8FF

‎themes/vue/source/css/index.styl

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "_sponsors-index"
55
@import "_modal"
66
@import "_themes"
7+
@import "_vueschool.styl"
78

89
$width = 900px
910
$space = 40px

‎themes/vue/source/css/page.styl

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@import "_scrimba"
1717
@import "_vue-mastery"
1818
@import "_themes"
19+
@import "_vueschool.styl"
1920

2021
#header
2122
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/images/banners/close.svg

+7
Loading

‎themes/vue/source/images/banners/free-access.svg

+7
Loading

‎themes/vue/source/images/banners/vs-iso.svg

+10
Loading

‎themes/vue/source/images/banners/vs-logo.svg

+13
Loading

0 commit comments

Comments
 (0)