|
1 |
| - |
2 | 1 | <template>
|
3 | 2 | <md-content class="ad-manager" id="ad-manager" md-theme="default">
|
4 | 3 | <div id="code-sponsor" class="code-sponsor">
|
|
16 | 15 |
|
17 | 16 | <script>
|
18 | 17 | const isProd = process.env.NODE_ENV === 'production'
|
19 |
| - const token = 'bb9dade0-0207-4ab0-8c86-d00502d952f5' |
| 18 | + const token = '0989e0dbf1919e50f5b34ab00c81fa6f' |
| 19 | +
|
20 | 20 | export default {
|
21 | 21 | name: 'AdManager',
|
22 | 22 | computed: {
|
23 | 23 | linkHref () {
|
24 | 24 | if (isProd) {
|
25 |
| - return `https://cs.berry.sh/c/${token}` |
| 25 | + return `https://codesponsor.io/t/c/${token}` |
26 | 26 | }
|
| 27 | +
|
| 28 | + return false |
27 | 29 | },
|
28 | 30 | pixelHref () {
|
29 | 31 | if (isProd) {
|
30 |
| - return `https://cs.berry.sh/l/${token}/pixel.png` |
| 32 | + return `https://codesponsor.io/t/l/${token}/pixel.png` |
31 | 33 | }
|
| 34 | +
|
| 35 | + return false |
32 | 36 | }
|
33 | 37 | }
|
34 | 38 | }
|
35 | 39 | </script>
|
36 | 40 |
|
37 | 41 | <style lang="scss" scoped>
|
38 | 42 | @import "~vue-material/theme/engine";
|
| 43 | +
|
39 | 44 | $ad-responsive-big: 1690px;
|
40 | 45 | $ad-responsive-small: 768px;
|
| 46 | +
|
41 | 47 | @mixin ad-theme ($hue, $color) {
|
42 | 48 | .code-sponsor {
|
43 | 49 | background: md-get-palette-color(grey, $hue);
|
44 | 50 | .code-sponsor-header {
|
45 | 51 | color: rgba($color, .54);
|
46 | 52 | }
|
47 | 53 | }
|
| 54 | +
|
48 | 55 | .code-sponsor-content {
|
49 | 56 | color: rgba($color, .7);
|
50 | 57 | &:hover {
|
51 | 58 | color: $color;
|
52 | 59 | }
|
53 | 60 | }
|
54 | 61 | }
|
| 62 | +
|
55 | 63 | .ad-manager {
|
56 | 64 | width: calc(100% + 32px);
|
57 | 65 | margin: 0 -16px -16px;
|
| 66 | +
|
58 | 67 | @media (max-width: $ad-responsive-small) {
|
59 | 68 | display: flex;
|
60 | 69 | }
|
61 | 70 | }
|
| 71 | +
|
62 | 72 | .code-sponsor {
|
63 | 73 | max-width: 175px;
|
64 | 74 | margin: 7px 16px 24px 16px;
|
|
70 | 80 | z-index: 10;
|
71 | 81 | font-size: 12px;
|
72 | 82 | line-height: 1.5em;
|
| 83 | +
|
73 | 84 | @media (min-width: $ad-responsive-big) {
|
74 | 85 | margin: 0;
|
75 | 86 | position: fixed;
|
76 | 87 | right: 16px;
|
77 | 88 | bottom: 16px;
|
78 | 89 | }
|
| 90 | +
|
79 | 91 | @media (max-width: $ad-responsive-small) {
|
80 | 92 | max-width: none;
|
81 | 93 | margin-bottom: 16px;
|
82 | 94 | float: none;
|
83 | 95 | }
|
| 96 | +
|
84 | 97 | .splash-container & {
|
85 | 98 | @media (max-width: $ad-responsive-big) {
|
86 | 99 | max-width: 530px;
|
|
91 | 104 | }
|
92 | 105 | }
|
93 | 106 | }
|
| 107 | +
|
94 | 108 | .code-sponsor-header {
|
95 | 109 | font-size: 11px;
|
96 | 110 | line-height: 1.3em;
|
97 | 111 | }
|
| 112 | +
|
98 | 113 | .code-sponsor-content {
|
99 | 114 | margin-top: 1em;
|
100 | 115 | &:hover {
|
101 | 116 | text-decoration: none;
|
102 | 117 | }
|
103 | 118 | }
|
| 119 | +
|
104 | 120 | .code-sponsor-name,
|
105 | 121 | .code-sponsor-description {
|
106 | 122 | &:hover {
|
107 | 123 | text-decoration: underline;
|
108 | 124 | }
|
109 | 125 | }
|
| 126 | +
|
110 | 127 | .code-sponsor-name {
|
111 | 128 | margin-bottom: .5em;
|
112 | 129 | display: block;
|
113 | 130 | font-weight: 600;
|
114 | 131 | }
|
| 132 | +
|
115 | 133 | .code-sponsor-pixel {
|
116 | 134 | width: 1px;
|
117 | 135 | height: 1px;
|
|
122 | 140 | clip: rect(0 0 0 0);
|
123 | 141 | border: 0;
|
124 | 142 | }
|
| 143 | +
|
125 | 144 | .main-container {
|
126 | 145 | @include ad-theme(200, #000);
|
127 | 146 | }
|
| 147 | +
|
128 | 148 | .splash-container {
|
129 | 149 | @media (min-width: $ad-responsive-big) {
|
130 | 150 | @include ad-theme(800, #fff);
|
|
0 commit comments