@@ -22,30 +22,16 @@ function dismiss() {
22
22
23
23
<template >
24
24
<div class =" banner" v-if =" open" >
25
- <p class =" vt-banner-text" >
26
- <span class =" vt-text-primary" >VueConf Toronto</span >
27
- <span class =" vt-tagline" > - Join the premier Vue.js conference</span >
28
- | 9-10 Nov 2023 <span class =" vt-place" > - Toronto, Canada</span >
29
- <a
30
- target =" _blank"
31
- class =" vt-primary-action"
32
- href =" https://vuetoronto.com?utm_source=vuejs&utm_content=top_banner"
33
- >Register <span class =" vt-time-now" >Now</span ></a
34
- >
35
- </p >
25
+ <a target =" _blank" ></a >
36
26
<button @click =" dismiss" >
37
27
<VTIconPlus class =" close" />
38
28
</button >
39
- <p class =" vt-banner-text vt-coupon" >
40
- <span class =" vt-text-primary" >Use code</span > VUEJS
41
- <span class =" vt-text-primary" >to get 15% off</span >
42
- </p >
43
29
</div >
44
30
</template >
45
31
46
32
<style >
47
33
html :not (.banner-dismissed ) {
48
- --vt-banner-height : 60 px ;
34
+ --vt-banner-height : 30 px ;
49
35
}
50
36
</style >
51
37
@@ -64,10 +50,12 @@ html:not(.banner-dismissed) {
64
50
font-weight : 600 ;
65
51
color : #fff ;
66
52
background-color : var (--vt-c-green );
67
- background : #11252b ;
68
- display : flex ;
69
- justify-content : center ;
70
- align-items : center ;
53
+ background : linear-gradient (
54
+ 90deg ,
55
+ rgba (66 , 184 , 131 , 1 ) 0% ,
56
+ rgba (39 , 179 , 137 , 1 ) 19% ,
57
+ rgba (100 , 126 , 255 , 1 ) 100%
58
+ );
71
59
}
72
60
73
61
.banner-dismissed .banner {
@@ -82,7 +70,7 @@ button {
82
70
position : absolute ;
83
71
right : 0 ;
84
72
top : 0 ;
85
- padding : 20 px 10 px ;
73
+ padding : 5 px ;
86
74
}
87
75
88
76
.close {
@@ -91,59 +79,10 @@ button {
91
79
fill : #fff ;
92
80
transform : rotate (45deg );
93
81
}
94
-
95
- .vt-banner-text {
96
- color : #fff ;
97
- font-size : 16px ;
98
- }
99
-
100
- .vt-text-primary {
101
- color : #75c05e ;
102
- }
103
-
104
- .vt-primary-action {
105
- background : #75c05e ;
106
- color : #121c1a ;
107
- padding : 8px 15px ;
108
- border-radius : 5px ;
109
- font-size : 14px ;
110
- text-decoration : none ;
111
- margin : 0 20px ;
112
- font-weight : bold ;
113
- }
114
- .vt-primary-action :hover {
115
- text-decoration : none ;
116
- background : #5a9f45 ;
117
- }
118
-
119
- @media (max-width : 1280px ) {
120
- .banner .vt-banner-text {
121
- font-size : 14px ;
122
- }
123
- .vt-tagline {
124
- display : none ;
125
- }
126
- }
127
-
128
- @media (max-width : 780px ) {
129
- .vt-tagline {
130
- display : none ;
131
- }
132
- .vt-coupon {
133
- display : none ;
134
- }
135
- .vt-primary-action {
136
- margin : 0 10px ;
137
- padding : 7px 10px ;
138
- }
139
- .vt-time-now {
140
- display : none ;
141
- }
142
- }
143
-
144
- @media (max-width : 560px ) {
145
- .vt-place {
82
+ /*
83
+ @media (max-width: 720px) {
84
+ a > span {
146
85
display: none;
147
86
}
148
- }
87
+ } */
149
88
</style >
0 commit comments