Skip to content

Commit 2ab8150

Browse files
nicodevsnicodevs
committed
Add Vue School Free Weekend 22 banners
1 parent 11ae1e2 commit 2ab8150

File tree

6 files changed

+459
-1
lines changed

6 files changed

+459
-1
lines changed

‎.vitepress/theme/components/VueSchoolBanner.vue

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<template>
2+
<a
3+
v-if="isVisible"
4+
id="vs"
5+
href="https://vueschool.io/free-weekend?friend=vuejs"
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 setup>
33+
import { ref, onMounted } from 'vue'
34+
35+
const isVisible = ref(false)
36+
37+
onMounted(() => {
38+
isVisible.value = !localStorage.getItem('VS_FW_22')
39+
if (isVisible.value) document.body.classList.add('has-top-banner')
40+
})
41+
42+
function close () {
43+
isVisible.value = false
44+
document.body.classList.remove('has-top-banner')
45+
localStorage.setItem('VS_FW_22', 1)
46+
}
47+
</script>
48+
49+
<style>
50+
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
51+
52+
#vs {
53+
align-items: center;
54+
background-color: #000c19;
55+
box-sizing: border-box;
56+
color: #fff;
57+
display: flex;
58+
font-family: 'Archivo', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
59+
justify-content: center;
60+
position: fixed;
61+
padding: 0 10px;
62+
left: 0;
63+
right: 0;
64+
top: 0;
65+
z-index: 100;
66+
height: 5rem;
67+
line-height: 1;
68+
background-image: url(/images/vueschool/vs-fw-bg.svg);
69+
background-size: cover;
70+
background-repeat: no-repeat;
71+
}
72+
73+
#vs:hover {
74+
text-decoration: none;
75+
}
76+
77+
#vs .vs-logo {
78+
position: absolute;
79+
left: 20px;
80+
top: 20px;
81+
}
82+
83+
#vs .vs-logo .logo-small {
84+
display: none;
85+
}
86+
87+
#vs .vs-logo .logo-big {
88+
display: none;
89+
}
90+
91+
#vs:hover .vs-core .vs-button {
92+
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
93+
border-color: #e61463;
94+
}
95+
96+
#vs .vs-core .vs-slogan {
97+
color: #fff;
98+
margin-left: 8px;
99+
text-align: center;
100+
}
101+
102+
#vs .vs-core {
103+
align-items: center;
104+
display: flex;
105+
justify-content: center;
106+
}
107+
108+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
109+
font-size: 14px;
110+
color: #47b785;
111+
font-weight: bold;
112+
}
113+
114+
#vs .vs-core .vs-slogan .vs-slogan-title {
115+
margin-top: 6px;
116+
font-size: 16px;
117+
}
118+
119+
#vs .vs-core .vs-slogan .vs-slogan-title strong {
120+
color: #48a0ff;
121+
font-weight: 400;
122+
}
123+
124+
#vs .vs-core .vs-button {
125+
color: #fff;
126+
padding: 7px 10px;
127+
font-weight: 600;
128+
white-space: nowrap;
129+
margin-right: 18px;
130+
margin-left: 16px;
131+
object-fit: contain;
132+
border-radius: 30px;
133+
border-style: solid;
134+
border-width: 2px;
135+
background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9);
136+
text-transform: uppercase;
137+
border-color: #B349B0;
138+
display: none;
139+
}
140+
141+
#vs .vs-close {
142+
right: 6px;
143+
position: absolute;
144+
}
145+
146+
#vs .vs-close:hover {
147+
color: #56d8ff;
148+
}
149+
150+
.has-top-banner {
151+
--vt-banner-height: 104px;
152+
}
153+
154+
.has-top-banner .banner {
155+
height: 24px;
156+
line-height: 24px;
157+
top: 80px;
158+
}
159+
160+
@media (min-width: 680px) {
161+
#vs .vs-core .vs-slogan {
162+
margin-left: 24px;
163+
}
164+
165+
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
166+
font-size: 18px;
167+
}
168+
169+
#vs .vs-core .vs-slogan .vs-slogan-title {
170+
font-size: 18px;
171+
}
172+
173+
#vs .vs-core .vs-button {
174+
display: inline-block;
175+
margin-right: 0;
176+
padding: 8px 24px;
177+
margin-left: 22px;
178+
}
179+
180+
#vs .vs-close {
181+
padding: 10px;
182+
right: 20px;
183+
}
184+
}
185+
186+
@media (min-width: 768px) {
187+
#vs .vs-logo .logo-small {
188+
display: inline-block;
189+
}
190+
}
191+
192+
@media (min-width: 1024px) {
193+
#vs .vs-logo .logo-small {
194+
display: none;
195+
}
196+
197+
#vs .vs-logo .logo-big {
198+
display: inline-block;
199+
}
200+
201+
#vs .vs-core .vs-button {
202+
margin-left: 69px;
203+
}
204+
}
205+
</style>

‎.vitepress/theme/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { VPTheme } from '@vue/theme'
44
import Banner from './components/Banner.vue'
55
import PreferenceSwitch from './components/PreferenceSwitch.vue'
66
import VueSchoolLink from './components/VueSchoolLink.vue'
7+
import VueSchoolBanner from './components/VueSchoolBanner.vue'
78
import {
89
preferComposition,
910
preferSFC,
@@ -16,7 +17,10 @@ export default Object.assign({}, VPTheme, {
1617
Layout: () => {
1718
// @ts-ignore
1819
return h(VPTheme.Layout, null, {
19-
banner: () => h(Banner),
20+
banner: () => h('div', {}, [
21+
h(VueSchoolBanner),
22+
h(Banner)
23+
]),
2024
'sidebar-top': () => h(PreferenceSwitch),
2125
'aside-mid': () => h(SponsorsAside),
2226
'aside-bottom': () => h(VueJobs)

‎src/public/images/vueschool/vs-close.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)