Skip to content

Vue School Back to School banner #2688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 7, 2020
Merged

Vue School Back to School banner #2688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions themes/vue/layout/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<% var isIndex = page.path === 'index.html' %>
<% var isThemes = page.path === 'resources/themes.html' %>
<% var hasBtsBanner = true %>

<!DOCTYPE html>
<html lang="en">
Expand Down Expand Up @@ -91,13 +92,10 @@
</head>
<body class="<%- isIndex ? '' : 'docs' -%>">
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
<a class="menu-button<%- isIndex ? ' blm' : '' %>"></a>
<a class="menu-button"></a>
<a class="logo" href="/"></a>
<% if (isIndex) { %>
<a class="blm-mobile" href="/#">#BlackLivesMatter</a>
<% } %>
</div>
<%- partial('partials/header') %>
<%- partial('partials/header', { hasBtsBanner }) %>
<% if (!isIndex) { %>
<div id="main" class="fix-sidebar">
<%- body %>
Expand Down
26 changes: 21 additions & 5 deletions themes/vue/layout/partials/header.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
<div>
<% if (page.path === 'index.html') { %>
<div id="blm">
<span id="blm-hashtag">#B<span>lack</span>L<span>ives</span>M<span>atter</span></span>
<a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank" rel="noreferrer" id="blm-link">Support the Equal Justice Initiative.</a>
</div>
<% if (hasBtsBanner) { %>
<a id="bts" class="bts-hidden" href="https://vueschool.io/sales/back-to-school?friend=vuejs" target="_blank" rel="noreferrer">
<div class="bts-backpack">
<img src="/images/banners/bts-backpack.svg">
</div>
<div class="bts-slogan">
<div class="bts-title">
Master Vue.js with Vue School<span class="bts-dot">.</span>
<span class="bts-title-offer">3 months only <span class="bts-title-green">$49!</span> <span class="bts-title-grey">$75</span></span>
</div>
<div class="bts-subtitle">
Offer expires 13th September 2020
</div>
</div>
<div>
<div class="bts-button">GET 30% OFF</div>
</div>
<div id="bts-close" class="bts-close">
&times;
</div>
</a>
<% } %>

<header id="header">
Expand Down
133 changes: 133 additions & 0 deletions themes/vue/source/css/_banners.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
@import "_settings"
$bts-banner-height = 80px

body.has-bts-banner

&.docs
@media (min-width: 900px)
padding-top: 161px
#bts
position: fixed
top: 0
width: 100%
@media screen and (max-width: 900px)
display: none
#header
top: $bts-banner-height

#mobile-bar
&.top
.menu-button
top: 27px
.menu-button
transition: top 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28)
background: url(../images/menu-bts.png) center center no-repeat
background-size: 24px

#sidebar-sponsors-platinum-right
top: 90px + $bts-banner-height

.sidebar
@media (min-width: 900px)
top: $header-height + $bts-banner-height

#bts
font-family "CircularStd"
min-height: 80px
z-index: $z-header - 1
box-sizing: border-box
color: #fff
background-size: cover
background-color: #1E204D
background-repeat: no-repeat
background-position: top right
background-image: url(../images/banners/bts-mobile.svg)
display: flex
align-items: center
padding: 0 0 0 50px
&.bts-hidden
display: none
@media (min-width: 680px)
justify-content: center
background-image: url(../images/banners/bts-tablet.svg)
padding: 0 20px 0 40px
@media (min-width: 900px)
background-image: url(../images/banners/bts-desktop.svg)
background-position: top right
&:hover
.bts-button
background-color: #38a1f3
@media (min-width: 1600px)
background-position: top right
.bts-backpack
img
display: inline-block
height: 50px
width: 50px
margin-right: 10px
@media (min-width: 680px)
margin-right: 0
height: 70px
width: 70px
.bts-slogan
@media (min-width: 680px)
padding-left: 20px
padding-left: 12px
padding-right: 10px
@media (min-width: 900px)
padding-right: 60px
padding-left: 20px
.bts-title
color: #FFF
font-size: 16px
font-weight: bold
width: 253px
@media (min-width: 680px)
font-size: 17px
width: auto
margin-bottom: 8px
@media (min-width: 900px)
margin-bottom: 0
font-size: 22px
.bts-dot
display: none
@media (min-width: 680px)
display: inline
.bts-title-offer
display: block
@media (min-width: 680px)
display: inline
.bts-title-grey
color: #b3b1dc
text-decoration: line-through
.bts-title-green
color: #1fdb69
.bts-subtitle
display: none
@media (min-width: 680px)
color: #c5c2f4
font-size: 16px
display: inline-block
.bts-button
color: #fff
background-color: #667dff
border-radius: 40px
font-size: 16px
font-weight: 500
transition: all .25s ease-in
display: none
white-space: nowrap
padding: 17px 27px
@media (min-width: 680px)
display: inline-block
.bts-close
color: #fff;
font-size: 28px
position: absolute
z-index: 9999
right: 10px
line-height: 1
&:hover
color: #56D8FF
@media (min-width: 1600px)
padding: 10px
23 changes: 23 additions & 0 deletions themes/vue/source/css/_fonts.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@font-face
font-family "CircularStd"
src url("../fonts/circular/CircularStd-Bold.eot")
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")
font-weight 600
font-style normal
font-display swap

@font-face
font-family "CircularStd"
src url("../fonts/circular/CircularStd-Medium.eot")
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")
font-weight 500
font-style normal
font-display swap

@font-face
font-family "CircularStd"
src url("../fonts/circular/CircularStd-Book.eot")
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")
font-weight 400
font-style normal
font-display swap
52 changes: 4 additions & 48 deletions themes/vue/source/css/_header.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import "_settings"
$header-height = 40px

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

#header
background-color: #fff
height: $header-height
padding: $heading-padding-vertical 60px
padding: $heading-padding-vertical 30px $heading-padding-vertical 60px
position: relative
z-index: $z-header

#blm
background-color: #000
min-height: $blm-height
padding: $heading-padding-vertical 60px
z-index: $z-header - 1
display: flex
justify-content: space-between
box-sizing: border-box
text-align: center
color: #fff

#blm-hashtag
font-weight: bold
margin-right: 4px

#blm-hashtag span
display: none

@media (min-width: 470px)
#blm-hashtag span
display: inline

#blm-link
color: $green
white-space: nowrap

body.docs
#blm
position: fixed
top: 0
width: 100%
#header
position: fixed
width: 100%
top: 0
#nav
position: fixed
top: $heading-padding-vertical

@media screen and (max-width: 900px)
body.docs #blm
display: none

#nav
list-style-type: none
margin: 0
padding: 0
position: absolute
right: 30px
top: $heading-padding-vertical
height: $header-height
line-height: $header-height
.break
display: none
Expand Down Expand Up @@ -171,9 +135,6 @@ body.docs
left: 12px
background: url(../images/menu.png) center center no-repeat
background-size: 24px
&.blm
background: url(../images/menu-blm.png) center center no-repeat
background-size: 24px
.logo
position: absolute
width: 30px
Expand All @@ -183,11 +144,6 @@ body.docs
left: 50%
margin-left: -15px
background-size: 30px
.blm-mobile
position: absolute
right: 12px
line-height: 40px
font-weight: bold

@media print
#header
Expand Down
2 changes: 0 additions & 2 deletions themes/vue/source/css/_settings.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,3 @@ $z-sidebar = 10
$z-header = 20
$z-overlay = 30
$z-modal = 40

$blm-height = 40px
5 changes: 3 additions & 2 deletions themes/vue/source/css/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
@import "_sponsors-index"
@import "_modal"
@import "_themes"
@import "_fonts"
@import "_banners"

$width = 900px
$space = 40px
Expand All @@ -25,8 +27,7 @@ body
background-color: transparent
box-shadow: none
z-index: ($z-sidebar - 1)
.logo,
.blm-mobile
.logo
display: none

#hero,
Expand Down
2 changes: 2 additions & 0 deletions themes/vue/source/css/page.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
@import "_scrimba"
@import "_vue-mastery"
@import "_themes"
@import "_fonts"
@import "_banners"

#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
Expand Down
Binary file added themes/vue/source/fonts/circular/CircularStd-Bold.eot
View file
Open in desktop
Binary file not shown.
Binary file added themes/vue/source/fonts/circular/CircularStd-Bold.otf
View file
Open in desktop
Binary file not shown.
Loading