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