Skip to content

Commit 2f4da82

Browse files
rahaugrahaug
authored
add vue school back to school banners (#2688)
1 parent f34669b commit 2f4da82

32 files changed

+37374
-62
lines changed

‎themes/vue/layout/layout.ejs

Lines changed: 3 additions & 5 deletions
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 hasBtsBanner = true %>
34

45
<!DOCTYPE html>
56
<html lang="en">
@@ -91,13 +92,10 @@
9192
</head>
9293
<body class="<%- isIndex ? '' : 'docs' -%>">
9394
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
94-
<a class="menu-button<%- isIndex ? ' blm' : '' %>"></a>
95+
<a class="menu-button"></a>
9596
<a class="logo" href="/"></a>
96-
<% if (isIndex) { %>
97-
<a class="blm-mobile" href="/#">#BlackLivesMatter</a>
98-
<% } %>
9997
</div>
100-
<%- partial('partials/header') %>
98+
<%- partial('partials/header', { hasBtsBanner }) %>
10199
<% if (!isIndex) { %>
102100
<div id="main" class="fix-sidebar">
103101
<%- body %>

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
<div>
2-
<% if (page.path === 'index.html') { %>
3-
<div id="blm">
4-
<span id="blm-hashtag">#B<span>lack</span>L<span>ives</span>M<span>atter</span></span>
5-
<a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank" rel="noreferrer" id="blm-link">Support the Equal Justice Initiative.</a>
6-
</div>
2+
<% if (hasBtsBanner) { %>
3+
<a id="bts" class="bts-hidden" href="https://vueschool.io/sales/back-to-school?friend=vuejs" target="_blank" rel="noreferrer">
4+
<div class="bts-backpack">
5+
<img src="/images/banners/bts-backpack.svg">
6+
</div>
7+
<div class="bts-slogan">
8+
<div class="bts-title">
9+
Master Vue.js with Vue School<span class="bts-dot">.</span>
10+
<span class="bts-title-offer">3 months only <span class="bts-title-green">$49!</span> <span class="bts-title-grey">$75</span></span>
11+
</div>
12+
<div class="bts-subtitle">
13+
Offer expires 13th September 2020
14+
</div>
15+
</div>
16+
<div>
17+
<div class="bts-button">GET 30% OFF</div>
18+
</div>
19+
<div id="bts-close" class="bts-close">
20+
&times;
21+
</div>
22+
</a>
723
<% } %>
824

925
<header id="header">

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import "_settings"
2+
$bts-banner-height = 80px
3+
4+
body.has-bts-banner
5+
6+
&.docs
7+
@media (min-width: 900px)
8+
padding-top: 161px
9+
#bts
10+
position: fixed
11+
top: 0
12+
width: 100%
13+
@media screen and (max-width: 900px)
14+
display: none
15+
#header
16+
top: $bts-banner-height
17+
18+
#mobile-bar
19+
&.top
20+
.menu-button
21+
top: 27px
22+
.menu-button
23+
transition: top 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28)
24+
background: url(../images/menu-bts.png) center center no-repeat
25+
background-size: 24px
26+
27+
#sidebar-sponsors-platinum-right
28+
top: 90px + $bts-banner-height
29+
30+
.sidebar
31+
@media (min-width: 900px)
32+
top: $header-height + $bts-banner-height
33+
34+
#bts
35+
font-family "CircularStd"
36+
min-height: 80px
37+
z-index: $z-header - 1
38+
box-sizing: border-box
39+
color: #fff
40+
background-size: cover
41+
background-color: #1E204D
42+
background-repeat: no-repeat
43+
background-position: top right
44+
background-image: url(../images/banners/bts-mobile.svg)
45+
display: flex
46+
align-items: center
47+
padding: 0 0 0 50px
48+
&.bts-hidden
49+
display: none
50+
@media (min-width: 680px)
51+
justify-content: center
52+
background-image: url(../images/banners/bts-tablet.svg)
53+
padding: 0 20px 0 40px
54+
@media (min-width: 900px)
55+
background-image: url(../images/banners/bts-desktop.svg)
56+
background-position: top right
57+
&:hover
58+
.bts-button
59+
background-color: #38a1f3
60+
@media (min-width: 1600px)
61+
background-position: top right
62+
.bts-backpack
63+
img
64+
display: inline-block
65+
height: 50px
66+
width: 50px
67+
margin-right: 10px
68+
@media (min-width: 680px)
69+
margin-right: 0
70+
height: 70px
71+
width: 70px
72+
.bts-slogan
73+
@media (min-width: 680px)
74+
padding-left: 20px
75+
padding-left: 12px
76+
padding-right: 10px
77+
@media (min-width: 900px)
78+
padding-right: 60px
79+
padding-left: 20px
80+
.bts-title
81+
color: #FFF
82+
font-size: 16px
83+
font-weight: bold
84+
width: 253px
85+
@media (min-width: 680px)
86+
font-size: 17px
87+
width: auto
88+
margin-bottom: 8px
89+
@media (min-width: 900px)
90+
margin-bottom: 0
91+
font-size: 22px
92+
.bts-dot
93+
display: none
94+
@media (min-width: 680px)
95+
display: inline
96+
.bts-title-offer
97+
display: block
98+
@media (min-width: 680px)
99+
display: inline
100+
.bts-title-grey
101+
color: #b3b1dc
102+
text-decoration: line-through
103+
.bts-title-green
104+
color: #1fdb69
105+
.bts-subtitle
106+
display: none
107+
@media (min-width: 680px)
108+
color: #c5c2f4
109+
font-size: 16px
110+
display: inline-block
111+
.bts-button
112+
color: #fff
113+
background-color: #667dff
114+
border-radius: 40px
115+
font-size: 16px
116+
font-weight: 500
117+
transition: all .25s ease-in
118+
display: none
119+
white-space: nowrap
120+
padding: 17px 27px
121+
@media (min-width: 680px)
122+
display: inline-block
123+
.bts-close
124+
color: #fff;
125+
font-size: 28px
126+
position: absolute
127+
z-index: 9999
128+
right: 10px
129+
line-height: 1
130+
&:hover
131+
color: #56D8FF
132+
@media (min-width: 1600px)
133+
padding: 10px

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@font-face
2+
font-family "CircularStd"
3+
src url("../fonts/circular/CircularStd-Bold.eot")
4+
src url("../fonts/circular/CircularStd-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Bold.woff") format("woff"), url("../fonts/circular/CircularStd-Bold.ttf") format("truetype"), url("../fonts/circular/CircularStd-Bold.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
5+
font-weight 600
6+
font-style normal
7+
font-display swap
8+
9+
@font-face
10+
font-family "CircularStd"
11+
src url("../fonts/circular/CircularStd-Medium.eot")
12+
src url("../fonts/circular/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Medium.woff") format("woff"), url("../fonts/circular/CircularStd-Medium.ttf") format("truetype"), url("../fonts/circular/CircularStd-Medium.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
13+
font-weight 500
14+
font-style normal
15+
font-display swap
16+
17+
@font-face
18+
font-family "CircularStd"
19+
src url("../fonts/circular/CircularStd-Book.eot")
20+
src url("../fonts/circular/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Book.woff") format("woff"), url("../fonts/circular/CircularStd-Book.ttf") format("truetype"), url("../fonts/circular/CircularStd-Book.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
21+
font-weight 400
22+
font-style normal
23+
font-display swap

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

Lines changed: 4 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "_settings"
12
$header-height = 40px
23

34
red-dot-before(leftPos = -8px)
@@ -12,60 +13,23 @@ red-dot-before(leftPos = -8px)
1213

1314
#header
1415
background-color: #fff
15-
height: $header-height
16-
padding: $heading-padding-vertical 60px
16+
padding: $heading-padding-vertical 30px $heading-padding-vertical 60px
1717
position: relative
1818
z-index: $z-header
19-
20-
#blm
21-
background-color: #000
22-
min-height: $blm-height
23-
padding: $heading-padding-vertical 60px
24-
z-index: $z-header - 1
19+
display: flex
20+
justify-content: space-between
2521
box-sizing: border-box
26-
text-align: center
27-
color: #fff
28-
29-
#blm-hashtag
30-
font-weight: bold
31-
margin-right: 4px
32-
33-
#blm-hashtag span
34-
display: none
35-
36-
@media (min-width: 470px)
37-
#blm-hashtag span
38-
display: inline
39-
40-
#blm-link
41-
color: $green
42-
white-space: nowrap
4322

4423
body.docs
45-
#blm
46-
position: fixed
47-
top: 0
48-
width: 100%
4924
#header
5025
position: fixed
5126
width: 100%
5227
top: 0
53-
#nav
54-
position: fixed
55-
top: $heading-padding-vertical
56-
57-
@media screen and (max-width: 900px)
58-
body.docs #blm
59-
display: none
6028

6129
#nav
6230
list-style-type: none
6331
margin: 0
6432
padding: 0
65-
position: absolute
66-
right: 30px
67-
top: $heading-padding-vertical
68-
height: $header-height
6933
line-height: $header-height
7034
.break
7135
display: none
@@ -171,9 +135,6 @@ body.docs
171135
left: 12px
172136
background: url(../images/menu.png) center center no-repeat
173137
background-size: 24px
174-
&.blm
175-
background: url(../images/menu-blm.png) center center no-repeat
176-
background-size: 24px
177138
.logo
178139
position: absolute
179140
width: 30px
@@ -183,11 +144,6 @@ body.docs
183144
left: 50%
184145
margin-left: -15px
185146
background-size: 30px
186-
.blm-mobile
187-
position: absolute
188-
right: 12px
189-
line-height: 40px
190-
font-weight: bold
191147

192148
@media print
193149
#header

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,3 @@ $z-sidebar = 10
3737
$z-header = 20
3838
$z-overlay = 30
3939
$z-modal = 40
40-
41-
$blm-height = 40px

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@import "_sponsors-index"
55
@import "_modal"
66
@import "_themes"
7+
@import "_fonts"
8+
@import "_banners"
79

810
$width = 900px
911
$space = 40px
@@ -25,8 +27,7 @@ body
2527
background-color: transparent
2628
box-shadow: none
2729
z-index: ($z-sidebar - 1)
28-
.logo,
29-
.blm-mobile
30+
.logo
3031
display: none
3132

3233
#hero,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
@import "_scrimba"
1717
@import "_vue-mastery"
1818
@import "_themes"
19+
@import "_fonts"
20+
@import "_banners"
1921

2022
#header
2123
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/fonts/circular/CircularStd-Bold.eot

84.6 KB
Binary file not shown.

‎themes/vue/source/fonts/circular/CircularStd-Bold.otf

77.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)