@meduza/ui-kit-2 0.2.8 → 0.2.9-g

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/ui-kit-2.cjs.development.js +17 -12
  2. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  3. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  4. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  5. package/dist/ui-kit-2.esm.js +17 -12
  6. package/dist/ui-kit-2.esm.js.map +1 -1
  7. package/dist/ui-kit.css +3771 -3277
  8. package/package.json +1 -1
  9. package/src/AnnouncementInText/AnnouncementInText.module.css +11 -33
  10. package/src/AnnouncementInText/index.tsx +6 -6
  11. package/src/DonatesTeaser/DonatesTeaser.module.css +8 -46
  12. package/src/DonatesTeaser/index.tsx +8 -9
  13. package/src/vars.css +20 -8
  14. package/src/{vars_games.css → vars_.css} +8 -8
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.8",
2
+ "version": "0.2.9-g",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
package/src/AnnouncementInText/AnnouncementInText.module.css CHANGED
@@ -8,19 +8,18 @@
8
8
  overflow: hidden;
9
9
 
10
10
  margin: calc(15rem / 16) 0;
11
- padding: 55px 12px 12px;
11
+ padding: 25px 12px 22px;
12
12
 
13
13
  text-decoration: none;
14
14
 
15
- color: #000;
15
+ color: #fff;
16
16
  border-radius: 8px;
17
17
  outline-width: 0;
18
- background-color: #f7f7f7;
18
+ background-color: #000;
19
19
 
20
20
  font-family: $secondaryFont;
21
21
 
22
22
  @media $mobile {
23
- min-height: 302px;
24
23
  margin: 25px 0 20px;
25
24
  padding: 20px 35px 20px 20px;
26
25
  }
@@ -35,26 +34,6 @@
35
34
  background-repeat: no-repeat;
36
35
  }
37
36
 
38
- .root::before {
39
- z-index: 1;
40
- top: 0;
41
- right: 0;
42
-
43
- width: 133px;
44
- height: 94px;
45
-
46
- background-image: url('https://meduza.io/image/attachments/images/007/350/982/original/Rf-ceQIzOIuzPr1dkhgsyg.png');
47
- background-size: 133px 94px;
48
-
49
- @media $mobile {
50
- width: 178px;
51
- height: 66px;
52
-
53
- background-image: url('https://meduza.io/image/attachments/images/007/350/467/original/WaQIwXV75NXWXqWQFp_MGQ.png');
54
- background-size: 178px 66px;
55
- }
56
- }
57
-
58
37
  .root::after {
59
38
  z-index: -1;
60
39
  top: 0;
@@ -62,13 +41,12 @@
62
41
  bottom: 0;
63
42
  left: 0;
64
43
 
65
- background-image: url('https://meduza.io/image/attachments/images/007/351/482/original/Qm9dzko-_FjCOXoJJCjV2g.png');
66
- background-position: center bottom;
67
- background-size: 650px 170px;
44
+ background-image: url('https://meduza.io/image/attachments/images/007/392/866/original/UjFqeubutYUUyLZMZ157Lg.png');
45
+ background-position: center top;
46
+ background-size: 650px auto;
68
47
 
69
48
  @media $mobile {
70
- background-image: url('https://meduza.io/image/attachments/images/007/350/475/original/qs_KJfUrIyxzMx0mvk8-jg.png');
71
- background-size: 100% auto;
49
+ background-image: url('https://meduza.io/image/attachments/images/007/392/874/original/P_6ounOgg_NOpzxMrkjVuA.png');
72
50
  }
73
51
  }
74
52
 
@@ -80,7 +58,7 @@
80
58
  margin-bottom: 33px;
81
59
 
82
60
  @media $mobile {
83
- margin-bottom: 60px;
61
+ margin-bottom: 40px;
84
62
  }
85
63
  }
86
64
 
@@ -130,9 +108,9 @@
130
108
  letter-spacing: 1px;
131
109
  text-transform: uppercase;
132
110
 
133
- color: #fff;
111
+ color: #000;
134
112
  border-radius: 25px;
135
- background-color: #000;
113
+ background-color: #fff;
136
114
 
137
115
  font-size: 12px;
138
116
  font-weight: 600;
@@ -144,7 +122,7 @@
144
122
  }
145
123
 
146
124
  .button:hover {
147
- background-color: #8064e2;
125
+ opacity: 0.75;
148
126
  }
149
127
 
150
128
  .button::after {
package/src/AnnouncementInText/index.tsx CHANGED
@@ -20,18 +20,18 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
20
20
 
21
21
  const data = {
22
22
  ru: {
23
- title: 'Подарите себе «Медузу»',
23
+ title: '&laquo;Медузе&raquo; нужна ваша помощь. Прямо сейчас',
24
24
  text:
25
- 'В&nbsp;2021 году &laquo;Медуза&raquo; смогла выжить&nbsp;&mdash; благодаря читателям. Но&nbsp;нам по-прежнему нужна поддержка. Один раз или регулярно, маленькая сумма или большая&nbsp;&mdash; любая помощь критически важна. В&nbsp;2022-м наша редакция может рассчитывать только на&nbsp;вас. А&nbsp;вы&nbsp;знаете, что делать.',
26
- button: 'О да, я знаю!',
25
+ 'Каждый день наша редакция продолжает работать&nbsp;&mdash; вопреки давлению государства и&nbsp;только благодаря вам. Спасибо вам огромное! Это очень воодушевляет. &laquo;Медузе&raquo; по-прежнему нужна ваша помощь. Пожалуйста, поддержите нас.',
26
+ button: 'Жму на кнопку!',
27
27
  href: 'https://mdza.io/FNtRa28cc1o'
28
28
  },
29
29
 
30
30
  en: {
31
- title: 'This holiday season, make Meduza your gift to&nbsp;yourself',
31
+ title: 'Meduza needs your help — right now.',
32
32
  text:
33
- 'Meduza survived 2021 thanks to readers like&nbsp;you. To make it through another year, we need your continued support. One-time contributions and especially recurring donations will sustain Meduza’s work in 2022. Whatever you can give, your help is critical. The future of our newsroom is in your hands. You know what to do.',
34
- button: 'Let’s do this!',
33
+ 'To sustain our newsroom in the face of government pressure, we have relied on readers like you. Thank you very much! Your support inspires us, and we need it still! Please consider a contribution to Meduza.',
34
+ button: 'I’ll pitch in!',
35
35
  href: 'https://mdza.io/c-m1LRBgwEA'
36
36
  }
37
37
  }
package/src/DonatesTeaser/DonatesTeaser.module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  display: block;
8
8
 
9
9
  margin: calc(15rem / 16) -20px;
10
- padding: 67px 20px 70px;
10
+ padding: 42px 20px 50px;
11
11
  overflow: hidden;
12
12
 
13
13
  font-family: $secondaryFont;
@@ -20,7 +20,7 @@
20
20
 
21
21
  @media $mobile {
22
22
  margin: 25px 0 20px;
23
- padding: 59px 30px 73px;
23
+ padding: 48px 30px;
24
24
 
25
25
  border-radius: 8px;
26
26
  }
@@ -47,27 +47,6 @@
47
47
  }
48
48
  }
49
49
 
50
- .title::after {
51
- display: inline-block;
52
-
53
- width: 21px;
54
- height: 21px;
55
-
56
- vertical-align: text-top;
57
-
58
- background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.735c1.089 3.09 5.133 9.759 7.467 10.247C12.397 23.593 21.133 8.832 23 2' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
59
- background-size: 21px;
60
-
61
- content: '';
62
-
63
- @media $mobile {
64
- width: 25px;
65
- height: 25px;
66
-
67
- background-size: 25px;
68
- }
69
- }
70
-
71
50
  .text {
72
51
  display: block;
73
52
 
@@ -91,19 +70,13 @@
91
70
  align-items: center;
92
71
  justify-content: center;
93
72
 
94
- margin-top: 35px;
95
-
96
- transition: opacity 350ms ease;
73
+ margin-top: 45px;
97
74
 
98
75
  @media $mobile {
99
- margin-top: 33px;
76
+ margin-top: 40px;
100
77
  }
101
78
  }
102
79
 
103
- .cta:hover {
104
- opacity: 0.75;
105
- }
106
-
107
80
  .cta a {
108
81
  display: block;
109
82
 
@@ -118,11 +91,8 @@
118
91
  text-transform: uppercase;
119
92
  text-decoration: none;
120
93
 
94
+ background-color: #000;
121
95
  border-radius: 30px;
122
-
123
- @media $mobile {
124
- font-size: 14px;
125
- }
126
96
  }
127
97
 
128
98
  .cta a::after {
@@ -151,20 +121,12 @@
151
121
  left: 50%;
152
122
  z-index: -1;
153
123
 
154
- width: 602px;
155
- height: 81px;
156
-
157
- background-image: url("data:image/svg+xml,%3Csvg width='602' height='81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M182.424 30h237.153c12.262 1.63 12.262 19.37 0 21H182.424c-12.262-1.63-12.262-19.37 0-21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M456.062 53H145.938c-12.648-1.286-12.648-19.714 0-21h310.124c12.648 1.286 12.648 19.714 0 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M176.905 36h248.19L568 41.5 425.095 47h-248.19L34 41.5 176.905 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='214.245' y='23' width='173.508' height='35' rx='17.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='134.578' y1='40.956' x2='475.16' y2='40.67' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='518.63' y1='42.044' x2='73.253' y2='42.534' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='73.191' y1='41.5' x2='536.402' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='226.979' y1='40.5' x2='377.486' y2='40.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='150.228' y='7' width='301.546' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='c' x='113.452' y='9' width='375.096' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='2' width='602' height='79' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='g' x='191.245' y='0' width='219.508' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
124
+ width: 278px;
125
+ height: 130px;
126
+ background-image: url("data:image/svg+xml,%3Csvg width='278' height='130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='0' y='0' width='278' height='130' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='22' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3Cfilter id='c' x='15' y='15' width='248' height='100' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='14.5' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
158
127
  transform: translate(-50%, -50%);
159
128
 
160
129
  content: '';
161
-
162
- @media $mobile {
163
- width: 650px;
164
- height: 83px;
165
-
166
- background-image: url("data:image/svg+xml,%3Csvg width='650' height='83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M174.448 30h301.105c13.675 1.569 13.675 21.431 0 23H174.448c-13.675-1.569-13.675-21.431 0-23Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M521.876 53H128.124c-14.047-1.232-14.047-21.768 0-23h393.752c14.047 1.232 14.047 21.768 0 23Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M167.441 36h315.118L664 42.5 482.559 49H167.441L-14 42.5 167.441 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='215.675' y='23' width='218.65' height='37' rx='18.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='113.699' y1='42' x2='546.124' y2='41.578' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='601.316' y1='41' x2='35.839' y2='41.722' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='35.76' y1='42.5' x2='623.881' y2='42.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='231.722' y1='41.5' x2='421.387' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='141.192' y='7' width='367.617' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='c' x='94.588' y='7' width='460.823' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='e' x='-48' y='2' width='746' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='g' x='192.675' y='0' width='264.65' height='83' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
167
- }
168
130
  }
169
131
 
170
132
  .center {
package/src/DonatesTeaser/index.tsx CHANGED
@@ -17,16 +17,15 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
17
17
 
18
18
  const data = {
19
19
  ru: {
20
- title: 'Успеть сделать важное дело:<br/>Поддержать «Медузу» — ',
21
- // subtitle: 'Нам нужна ваша поддержка',
22
- button: 'Бегу!',
20
+ title: '«Медуза» работает для вас',
21
+ subtitle: 'Нам нужна ваша поддержка',
22
+ button: 'Да!',
23
23
  href: 'https://support.meduza.io'
24
24
  },
25
25
  en: {
26
- title:
27
- 'There’s still time for a good deed&nbsp;in&nbsp;2021!<br/>Support Meduza ',
28
- // subtitle: 'And we need your support',
29
- button: 'Donate',
26
+ title: 'Meduza is working for you',
27
+ subtitle: 'And we need your support',
28
+ button: 'Okay!',
30
29
  href: 'https://support.meduza.io/en'
31
30
  }
32
31
  }
@@ -36,11 +35,11 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
36
35
  <div className={styles.main}>
37
36
  <h3 className={styles.title}>
38
37
  <span dangerouslySetInnerHTML={{ __html: data[lang].title }} />
39
- {/* {` `}
38
+ {` `}
40
39
  <span
41
40
  className={styles.text}
42
41
  dangerouslySetInnerHTML={{ __html: data[lang].subtitle }}
43
- /> */}
42
+ />
44
43
  </h3>
45
44
  </div>
46
45
 
package/src/vars.css CHANGED
@@ -27,15 +27,27 @@ $gapMedium: 15px;
27
27
  $gapSmall: 12px;
28
28
 
29
29
  /* Media */
30
- $mobile: only screen and (min-width: 32em); /* 512 */
31
- $contentWidth: only screen and (min-width: 40.625em); /* 650 */
32
- $portraitTablet: only screen and (min-width: 48em); /* 768 */
33
- $landscapeTablet: only screen and (min-width: 64em); /* 1024 */
34
- $desktop: only screen and (min-width: 63.125em); /* 1010 */
35
- $wideDesktop: only screen and (min-width: 75em); /* 1200 */
30
+ $mobile: only screen and
31
+ (
32
+ min-width: 32em
33
+ ); /* 512 */
34
+ $contentWidth: only screen and
35
+ (
36
+ min-width: 40.625em
37
+ ); /* 650 */
38
+ $portraitTablet: $contentWidth;
39
+ $landscapeTablet: $contentWidth;
40
+ $desktop: $contentWidth;
41
+ $wideDesktop: $contentWidth;
36
42
 
37
- $mobileMax: only screen and (max-width: 32.1875em); /* 511 */
38
- $landscapeTabletMax: only screen and (max-width: 63.9375em); /* 1023 */
43
+ $mobileMax: only screen and
44
+ (
45
+ max-width: 32.1875em
46
+ ); /* 511 */
47
+ $landscapeTabletMax: only screen and
48
+ (
49
+ max-width: 40.5625em
50
+ ); /* 649 */
39
51
 
40
52
  /* Zindex */
41
53
  $zIndex-1: 100;
package/src/{vars_games.css → vars_.css} RENAMED
@@ -27,15 +27,15 @@ $gapMedium: 15px;
27
27
  $gapSmall: 12px;
28
28
 
29
29
  /* Media */
30
- $mobile: only screen and (min-device-width: 32em); /* 512 */
31
- $contentWidth: only screen and (min-device-width: 40.625em); /* 650 */
32
- $portraitTablet: only screen and (min-device-width: 48em); /* 768 */
33
- $landscapeTablet: only screen and (min-device-width: 64em); /* 1024 */
34
- $desktop: only screen and (min-device-width: 63.125em); /* 1010 */
35
- $wideDesktop: only screen and (min-device-width: 75em); /* 1200 */
30
+ $mobile: only screen and (min-width: 32em); /* 512 */
31
+ $contentWidth: only screen and (min-width: 40.625em); /* 650 */
32
+ $portraitTablet: only screen and (min-width: 48em); /* 768 */
33
+ $landscapeTablet: only screen and (min-width: 64em); /* 1024 */
34
+ $desktop: only screen and (min-width: 63.125em); /* 1010 */
35
+ $wideDesktop: only screen and (min-width: 75em); /* 1200 */
36
36
 
37
- $mobileMax: only screen and (max-device-width: 32.1875em); /* 511 */
38
- $landscapeTabletMax: only screen and (max-device-width: 63.9375em); /* 1023 */
37
+ $mobileMax: only screen and (max-width: 32.1875em); /* 511 */
38
+ $landscapeTabletMax: only screen and (max-width: 63.9375em); /* 1023 */
39
39
 
40
40
  /* Zindex */
41
41
  $zIndex-1: 100;