Skip to content

Commit 1141bee

Browse files
nicodevsnicodevs
authored
Vueschool Free Weekend Banner (#1202)
* docs(docs): Vue School Free Weekend Banner * docs(docs): Update Free Weekend Banner * docs(docs): Restore video introduction link * docs(docs): Change Free Weekend copy * docs(docs): Fix link referrer
1 parent d2eff9d commit 1141bee

File tree

6 files changed

+495
-2
lines changed

6 files changed

+495
-2
lines changed

‎packages/docs/.vitepress/components/Banner.vue

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<template>
2+
<a
3+
id="vs"
4+
v-if="isVisible"
5+
href="https://vueschool.io/free-weekend?friend=pinia"
6+
target="_blank"
7+
rel="noreferrer"
8+
>
9+
<div class="vs-logo">
10+
<img src="/images/vueschool/vs-iso.svg" class="logo-small">
11+
<img src="/images/vueschool/vs-logo.svg" class="logo-big">
12+
</div>
13+
<div class="vs-core">
14+
<div class="vs-slogan">
15+
<div class="vs-slogan-subtitle">
16+
VUE 3 MASTERCLASS - FREE WEEKEND
17+
</div>
18+
<div class="vs-slogan-title">
19+
Register at <strong>vueschool.io/free-weekend</strong>
20+
</div>
21+
</div>
22+
<div class="vs-button">
23+
Free Access
24+
</div>
25+
</div>
26+
<div id="vs-close" class="vs-close" @click.stop.prevent="close">
27+
<img src="/images/vueschool/vs-close.svg" alt="Close">
28+
</div>
29+
</a>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data () {
35+
return {
36+
isVisible: false
37+
}
38+
},
39+
mounted () {
40+
this.isVisible = !localStorage.getItem('VS_FW_22')
41+
if (this.isVisible) document.body.classList.add('has-top-banner')
42+
},
43+
methods: {
44+
close () {
45+
this.isVisible = false
46+
document.body.classList.remove('has-top-banner')
47+
localStorage.setItem('VS_FW_22', 1)
48+
}
49+
}
50+
}
51+
</script>
52+
53+
<style>
54+
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
55+
56+
#vs {
57+
align-items: center;
58+
background-color: #000c19;
59+
box-sizing: border-box;
60+
color: #fff;
61+
display: flex;
62+
font-family: 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
63+
justify-content: center;
64+
position: fixed;
65+
padding: 0 10px;
66+
left: 0;
67+
right: 0;
68+
top: 0;
69+
z-index: 100;
70+
height: 5rem;
71+
line-height: 1;
72+
background-image: url(/images/vueschool/vs-fw-bg.svg);
73+
background-size: cover;
74+
background-repeat: no-repeat;
75+
}
76+
#vs:hover {
77+
text-decoration: none;
78+
}
79+
#vs .vs-logo {
80+
position: absolute;
81+
left: 20px;
82+
top: 20px;
83+
}
84+
#vs .vs-logo .logo-small {
85+
display: none;
86+
}
87+
#vs .vs-logo .logo-big {
88+
display: none;
89+
}
90+
@media (min-width: 768px) {
91+
#vs .vs-logo .logo-small {
92+
display: inline-block;
93+
}
94+
}
95+
@media (min-width: 1024px) {
96+
#vs .vs-logo .logo-small {
97+
display: none;
98+
}
99+
#vs .vs-logo .logo-big {
100+
display: inline-block;
101+
}
102+
}
103+
@media (min-width: 680px) {
104+
#vs {
105+
height: 5rem;
106+
}
107+
}
108+
#vs:hover .vs-core .vs-button {
109+
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
110+
border-color: #e61463;
111+
}
112+
@media (min-width: 680px) {
113+
#vs .vs-core {
114+
display: flex;
115+
align-items: center;
116+
}
117+
}
118+
#vs .vs-core .vs-slogan {
119+
font-family: Archivo;
120+
color: #fff;
121+
margin-left: 8px;
122+
text-align: center;
123+
}
124+
@media (min-width: 680px) {
125+
#vs .vs-core .vs-slogan {
126+
margin-left: 24px;
127+
}
128+
}
129+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
130+
font-size: 14px;
131+
color: #47b785;
132+
font-weight: bold;
133+
}
134+
@media (min-width: 680px) {
135+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
136+
font-size: 18px;
137+
}
138+
}
139+
#vs .vs-core .vs-slogan .vs-slogan-title {
140+
margin-top: 6px;
141+
font-size: 16px;
142+
}
143+
@media (min-width: 680px) {
144+
#vs .vs-core .vs-slogan .vs-slogan-title {
145+
font-size: 18px;
146+
}
147+
}
148+
#vs .vs-core .vs-slogan .vs-slogan-title strong {
149+
color: #48a0ff;
150+
font-weight: 400;
151+
}
152+
#vs .vs-core .vs-button {
153+
color: #fff;
154+
padding: 7px 10px;
155+
font-weight: 600;
156+
white-space: nowrap;
157+
margin-right: 18px;
158+
margin-left: 16px;
159+
font-family: 'Archivo', sans-serif;
160+
object-fit: contain;
161+
border-radius: 30px;
162+
border-style: solid;
163+
border-width: 2px;
164+
background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9);
165+
text-transform: uppercase;
166+
border-color: #B349B0;
167+
display: none;
168+
}
169+
@media (min-width: 680px) {
170+
#vs .vs-core .vs-button {
171+
display: inline-block;
172+
margin-right: 0;
173+
padding: 8px 24px;
174+
margin-left: 22px;
175+
}
176+
}
177+
@media (min-width: 1024px) {
178+
#vs .vs-core .vs-button {
179+
margin-left: 69px;
180+
}
181+
}
182+
.vs-tag {
183+
margin-left: 10px
184+
}
185+
@media (min-width: 1024px) {
186+
.vs-tag {
187+
margin-left: 30px
188+
}
189+
}
190+
#vs .vs-close {
191+
right: 6px;
192+
position: absolute;
193+
}
194+
@media (min-width: 680px) {
195+
#vs .vs-close {
196+
padding: 10px;
197+
right: 20px;
198+
}
199+
}
200+
#vs .vs-close:hover {
201+
color: #56d8ff;
202+
}
203+
204+
/********************************************/
205+
206+
.has-top-banner .theme {
207+
margin-top: 80px;
208+
}
209+
210+
.has-top-banner .theme .nav-bar {
211+
margin-top: 80px;
212+
}
213+
214+
.has-top-banner .theme .sidebar {
215+
margin-top: 80px;
216+
}
217+
218+
.has-top-banner .theme .page {
219+
margin-top: 80px;
220+
}
221+
222+
@media (min-width: 680px) {
223+
.has-top-banner .theme {
224+
margin-top: 80px;
225+
}
226+
227+
.has-top-banner .theme .nav-bar {
228+
margin-top: 80px;
229+
}
230+
231+
.has-top-banner .theme .sidebar {
232+
margin-top: 80px;
233+
}
234+
235+
.has-top-banner .theme .page {
236+
margin-top: 80px;
237+
}
238+
}
239+
240+
</style>

‎packages/docs/.vitepress/theme/Layout.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import sponsors from '../components/sponsors.json'
44
import './sponsors.css'
55
import { darkStorageConfig } from '../theme/dark-theme'
66
import { useDark } from '@vueuse/core'
7+
import Banner from '../components/Banner.vue'
78

89
export const Layout = defineComponent({
910
name: 'CustomLayout',
@@ -16,7 +17,8 @@ export const Layout = defineComponent({
1617
Theme.Layout,
1718
{},
1819
{
19-
'home-hero': () =>
20+
'home-hero': () => h('div', {}, [
21+
h(Banner),
2022
h(
2123
'div',
2224
{
@@ -33,7 +35,9 @@ export const Layout = defineComponent({
3335
[h('span', 'Watch Video Introduction')]
3436
),
3537
]
36-
),
38+
)
39+
]),
40+
'page-top': () => h(Banner),
3741
'sidebar-top': () =>
3842
h('div', { class: 'sponsors sponsors-top' }, [
3943
h('span', 'Platinum Sponsors'),

‎packages/docs/public/images/vueschool/vs-close.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)