@shift72/core-template 1.9.24 → 1.9.26
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.
- package/.github/workflows/node.js.yml +12 -13
- package/.nvmrc +1 -1
- package/CHANGELOG.md +44 -1
- package/kibble.json +4 -3
- package/package.json +16 -7
- package/rollup.config.js +10 -4
- package/site/ar_LB.all.json +8 -5
- package/site/ca_ES.all.json +3 -0
- package/site/da_DK.all.json +3 -0
- package/site/de_DE.all.json +4 -1
- package/site/el_EL.all.json +3 -0
- package/site/en_AU.all.json +3 -0
- package/site/es_ES.all.json +6 -3
- package/site/es_MX.all.json +6 -3
- package/site/et_ET.all.json +4 -1
- package/site/fi_FI.all.json +5 -2
- package/site/fr_FR.all.json +4 -1
- package/site/hr_HR.all.json +4 -1
- package/site/hu_HU.all.json +4 -1
- package/site/it_IT.all.json +8 -5
- package/site/ja_JP.all.json +8 -5
- package/site/lt_LT.all.json +3 -0
- package/site/nl_BE.all.json +4 -1
- package/site/no_NO.all.json +4 -1
- package/site/pl_PL.all.json +5 -2
- package/site/pt_BR.all.json +4 -1
- package/site/pt_PT.all.json +4 -1
- package/site/ru_RU.all.json +6 -3
- package/site/sr_SR.all.json +4 -1
- package/site/static/js/comments.js +9 -0
- package/site/static/js/detail-player/detail-player-iframe.component.js +24 -0
- package/site/static/js/detail-player/detail-player-placeholder.component.js +161 -0
- package/site/static/js/detail-player/detail-player.component.js +54 -0
- package/site/static/js/detail-player/icons.js +31 -0
- package/site/static/js/main.js +10 -0
- package/site/styles/_carousel.scss +10 -0
- package/site/styles/_collections.scss +7 -1
- package/site/styles/_detail-player.scss +182 -0
- package/site/styles/_forms.scss +3 -1
- package/site/styles/_globals.scss +11 -0
- package/site/styles/_legacy.scss +57 -55
- package/site/styles/_meta-detail-creator.scss +82 -0
- package/site/styles/_meta-detail.scss +19 -2
- package/site/styles/_meta-item-tagline.scss +7 -0
- package/site/styles/_meta-item-title.scss +1 -1
- package/site/styles/_meta-item.scss +3 -0
- package/site/styles/_nav.scss +1 -0
- package/site/styles/_poster.scss +29 -0
- package/site/styles/_search.scss +2 -0
- package/site/styles/_slider.scss +4 -4
- package/site/styles/_swiper.scss +17 -0
- package/site/styles/_typography.scss +6 -3
- package/site/styles/_variables.scss +33 -2
- package/site/styles/main.scss +2 -0
- package/site/templates/application/application.jet +8 -2
- package/site/templates/application/footer/social-media-buttons.jet +13 -2
- package/site/templates/application/google.jet +3 -1
- package/site/templates/application/head/seo.jet +3 -0
- package/site/templates/application/pixel.jet +1 -1
- package/site/templates/collection/carousel/item/video.jet +3 -3
- package/site/templates/common/cta_buttons.jet +3 -1
- package/site/templates/film/item.jet +15 -3
- package/site/templates/film/title.jet +3 -3
- package/site/tr_TR.all.json +7 -4
- package/site/uk_UA.all.json +4 -1
- package/site/zh_TW.all.json +9 -6
package/site/styles/_legacy.scss
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
@use "sass:math";
|
2
|
+
|
1
3
|
html {
|
2
4
|
height: 100%;
|
3
5
|
}
|
@@ -18,21 +20,21 @@ body {
|
|
18
20
|
.page-collection-items {
|
19
21
|
.page-collection-list-item-portrait {
|
20
22
|
&.page-collection-item-6 {
|
21
|
-
flex-basis: (100
|
22
|
-
max-width: (100
|
23
|
+
flex-basis: math.div(100%, 3);
|
24
|
+
max-width: math.div(100%, 3);
|
23
25
|
@include media-breakpoint-up(sm) {
|
24
|
-
flex-basis: (100%
|
25
|
-
max-width: (100%
|
26
|
+
flex-basis: (100% * 0.25);
|
27
|
+
max-width: (100% * 0.25);
|
26
28
|
}
|
27
29
|
@include media-breakpoint-up(lg) {
|
28
|
-
flex-basis: (100%
|
29
|
-
max-width: (100%
|
30
|
+
flex-basis: (100% * 0.2);
|
31
|
+
max-width: (100% * 0.2);
|
30
32
|
}
|
31
33
|
@include media-breakpoint-up(xl) {
|
32
|
-
max-width: (100
|
34
|
+
max-width: math.div(100%, 6);
|
33
35
|
}
|
34
36
|
@include media-breakpoint-up(xxxl) {
|
35
|
-
max-width: (100%
|
37
|
+
max-width: (100% * 0.125);
|
36
38
|
}
|
37
39
|
|
38
40
|
.meta-item-link {
|
@@ -44,18 +46,18 @@ body {
|
|
44
46
|
flex-basis: 50%;
|
45
47
|
max-width: 50%;
|
46
48
|
@include media-breakpoint-up(sm) {
|
47
|
-
flex-basis: (100
|
48
|
-
max-width: (100
|
49
|
+
flex-basis: math.div(100%, 3);
|
50
|
+
max-width: math.div(100%, 3);
|
49
51
|
}
|
50
52
|
@include media-breakpoint-up(lg) {
|
51
|
-
flex-basis: (100%
|
52
|
-
max-width: (100%
|
53
|
+
flex-basis: (100% * 0.25);
|
54
|
+
max-width: (100% * 0.25);
|
53
55
|
}
|
54
56
|
@include media-breakpoint-up(xl) {
|
55
|
-
max-width: (100%
|
57
|
+
max-width: (100% * 0.2);
|
56
58
|
}
|
57
59
|
@include media-breakpoint-up(xxxl) {
|
58
|
-
max-width: (100
|
60
|
+
max-width: math.div(100%, 6);
|
59
61
|
}
|
60
62
|
|
61
63
|
.meta-item-link {
|
@@ -69,18 +71,18 @@ body {
|
|
69
71
|
flex-basis: 50%;
|
70
72
|
max-width: 50%;
|
71
73
|
@include media-breakpoint-up(sm) {
|
72
|
-
flex-basis: (100
|
73
|
-
max-width: (100
|
74
|
+
flex-basis: math.div(100%, 3);
|
75
|
+
max-width: math.div(100%, 3);
|
74
76
|
}
|
75
77
|
@include media-breakpoint-up(lg) {
|
76
|
-
flex-basis: (100
|
77
|
-
max-width: (100
|
78
|
+
flex-basis: math.div(100%, 3);
|
79
|
+
max-width: math.div(100%, 3);
|
78
80
|
}
|
79
81
|
@include media-breakpoint-up(xl) {
|
80
|
-
max-width: (100%
|
82
|
+
max-width: (100% * 0.25);
|
81
83
|
}
|
82
84
|
@include media-breakpoint-up(xxxl) {
|
83
|
-
max-width: (100%
|
85
|
+
max-width: (100% * 0.2);
|
84
86
|
}
|
85
87
|
|
86
88
|
.meta-item-link {
|
@@ -92,15 +94,15 @@ body {
|
|
92
94
|
flex-basis: 50%;
|
93
95
|
max-width: 50%;
|
94
96
|
@include media-breakpoint-up(lg) {
|
95
|
-
flex-basis: (100
|
96
|
-
max-width: (100
|
97
|
+
flex-basis: math.div(100%, 3);
|
98
|
+
max-width: math.div(100%, 3);
|
97
99
|
}
|
98
100
|
@include media-breakpoint-up(xl) {
|
99
|
-
flex-basis: (100
|
100
|
-
max-width: (100
|
101
|
+
flex-basis: math.div(100%, 3);
|
102
|
+
max-width: math.div(100%, 3);
|
101
103
|
}
|
102
104
|
@include media-breakpoint-up(xxxl) {
|
103
|
-
max-width: (100%
|
105
|
+
max-width: (100% * 0.25);
|
104
106
|
}
|
105
107
|
|
106
108
|
.meta-item-link {
|
@@ -121,23 +123,23 @@ s72-classification-label {
|
|
121
123
|
flex-wrap: wrap;
|
122
124
|
|
123
125
|
.partial {
|
124
|
-
flex-basis: (100%
|
125
|
-
max-width: (100%
|
126
|
+
flex-basis: (100% * 0.5);
|
127
|
+
max-width: (100% * 0.5);
|
126
128
|
@include media-breakpoint-up(md) {
|
127
|
-
flex-basis: (100
|
128
|
-
max-width: (100
|
129
|
+
flex-basis: math.div(100%, 3);
|
130
|
+
max-width: math.div(100%, 3);
|
129
131
|
}
|
130
132
|
@include media-breakpoint-up(lg) {
|
131
|
-
flex-basis: (100
|
132
|
-
max-width: (100
|
133
|
+
flex-basis: math.div(100%, 3);
|
134
|
+
max-width: math.div(100%, 3);
|
133
135
|
}
|
134
136
|
@include media-breakpoint-up(xl) {
|
135
|
-
flex-basis: (100%
|
136
|
-
max-width: (100%
|
137
|
+
flex-basis: (100% * 0.25);
|
138
|
+
max-width: (100% * 0.25);
|
137
139
|
}
|
138
140
|
@include media-breakpoint-up(xxxl) {
|
139
|
-
flex-basis: (100%
|
140
|
-
max-width: (100%
|
141
|
+
flex-basis: (100% * 0.25);
|
142
|
+
max-width: (100% * 0.25);
|
141
143
|
}
|
142
144
|
}
|
143
145
|
}
|
@@ -147,23 +149,23 @@ s72-classification-label {
|
|
147
149
|
flex-wrap: wrap;
|
148
150
|
|
149
151
|
.partial {
|
150
|
-
flex-basis: (100%
|
151
|
-
max-width: (100%
|
152
|
+
flex-basis: (100% * 0.5);
|
153
|
+
max-width: (100% * 0.5);
|
152
154
|
@include media-breakpoint-up(md) {
|
153
|
-
flex-basis: (100
|
154
|
-
max-width: (100
|
155
|
+
flex-basis: math.div(100%, 3);
|
156
|
+
max-width: math.div(100%, 3);
|
155
157
|
}
|
156
158
|
@include media-breakpoint-up(lg) {
|
157
|
-
flex-basis: (100
|
158
|
-
max-width: (100
|
159
|
+
flex-basis: math.div(100%, 3);
|
160
|
+
max-width: math.div(100%, 3);
|
159
161
|
}
|
160
162
|
@include media-breakpoint-up(xl) {
|
161
|
-
flex-basis: (100%
|
162
|
-
max-width: (100%
|
163
|
+
flex-basis: (100% * 0.25);
|
164
|
+
max-width: (100% * 0.25);
|
163
165
|
}
|
164
166
|
@include media-breakpoint-up(xxxl) {
|
165
|
-
flex-basis: (100%
|
166
|
-
max-width: (100%
|
167
|
+
flex-basis: (100% * 0.25);
|
168
|
+
max-width: (100% * 0.25);
|
167
169
|
}
|
168
170
|
}
|
169
171
|
}
|
@@ -173,23 +175,23 @@ s72-classification-label {
|
|
173
175
|
flex-wrap: wrap;
|
174
176
|
|
175
177
|
.partial {
|
176
|
-
flex-basis: (100%
|
177
|
-
max-width: (100%
|
178
|
+
flex-basis: (100% * 0.5);
|
179
|
+
max-width: (100% * 0.5);
|
178
180
|
@include media-breakpoint-up(md) {
|
179
|
-
flex-basis: (100
|
180
|
-
max-width: (100
|
181
|
+
flex-basis: math.div(100%, 3);
|
182
|
+
max-width: math.div(100%, 3);
|
181
183
|
}
|
182
184
|
@include media-breakpoint-up(lg) {
|
183
|
-
flex-basis: (100
|
184
|
-
max-width: (100
|
185
|
+
flex-basis: math.div(100%, 3);
|
186
|
+
max-width: math.div(100%, 3);
|
185
187
|
}
|
186
188
|
@include media-breakpoint-up(xl) {
|
187
|
-
flex-basis: (100%
|
188
|
-
max-width: (100%
|
189
|
+
flex-basis: (100% * 0.25);
|
190
|
+
max-width: (100% * 0.25);
|
189
191
|
}
|
190
192
|
@include media-breakpoint-up(xxxl) {
|
191
|
-
flex-basis: (100%
|
192
|
-
max-width: (100%
|
193
|
+
flex-basis: (100% * 0.25);
|
194
|
+
max-width: (100% * 0.25);
|
193
195
|
}
|
194
196
|
}
|
195
197
|
}
|
@@ -0,0 +1,82 @@
|
|
1
|
+
.meta-detail-creator {
|
2
|
+
.meta-detail-bg {
|
3
|
+
filter: blur(50px) saturate(1.4) opacity(0.4);
|
4
|
+
max-height: unset;
|
5
|
+
opacity: 1;
|
6
|
+
transition: 0.5s;
|
7
|
+
|
8
|
+
@include media-breakpoint-down(md) {
|
9
|
+
opacity: 0;
|
10
|
+
}
|
11
|
+
|
12
|
+
&--lights-out {
|
13
|
+
opacity: 0;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
.meta-detail-main {
|
18
|
+
padding-top: 0;
|
19
|
+
.poster-wrapper {
|
20
|
+
@include media-breakpoint-down(md) {
|
21
|
+
display: none;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.detail-player-container {
|
28
|
+
padding: var(--page-detail-player-padding-top) var(--page-detail-padding-hz)
|
29
|
+
var(--page-detail-player-padding-bottom) var(--page-detail-padding-hz);
|
30
|
+
transition: 0.5s;
|
31
|
+
width: 100%;
|
32
|
+
|
33
|
+
@include media-breakpoint-down(md) {
|
34
|
+
padding: var(--page-detail-player-padding-top) 0
|
35
|
+
var(--page-detail-player-padding-bottom-theatre) 0;
|
36
|
+
}
|
37
|
+
|
38
|
+
@include media-breakpoint-up(lg) {
|
39
|
+
padding: var(--page-detail-player-padding-top-lg) var(--page-detail-padding-hz-lg)
|
40
|
+
var(--page-detail-player-padding-bottom) var(--page-detail-padding-hz-lg);
|
41
|
+
}
|
42
|
+
|
43
|
+
&.detail-player-theatre-mode {
|
44
|
+
padding: var(--page-detail-player-padding-top) 0
|
45
|
+
var(--page-detail-player-padding-bottom-theatre) 0;
|
46
|
+
|
47
|
+
@include media-breakpoint-up(lg) {
|
48
|
+
padding: var(--page-detail-player-padding-top-lg) 0
|
49
|
+
var(--page-detail-player-padding-bottom-theatre) 0;
|
50
|
+
}
|
51
|
+
|
52
|
+
detail-player {
|
53
|
+
border-radius: 0;
|
54
|
+
@include media-breakpoint-up(lg) {
|
55
|
+
height: calc(100vh - 105px);
|
56
|
+
max-width: 100%;
|
57
|
+
width: 100%;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
detail-player {
|
64
|
+
aspect-ratio: 16 / 9;
|
65
|
+
border: solid 1px #ffffff20;
|
66
|
+
border-radius: 12px;
|
67
|
+
display: block;
|
68
|
+
max-width: 100%;
|
69
|
+
overflow: hidden;
|
70
|
+
transition: 0.5s;
|
71
|
+
width: 100%;
|
72
|
+
|
73
|
+
@include media-breakpoint-down(md) {
|
74
|
+
border-radius: 0;
|
75
|
+
height: 100%;
|
76
|
+
}
|
77
|
+
|
78
|
+
@include media-breakpoint-up(lg) {
|
79
|
+
max-width: 1700px;
|
80
|
+
width: 65%;
|
81
|
+
}
|
82
|
+
}
|
@@ -103,7 +103,8 @@
|
|
103
103
|
|
104
104
|
.meta-detail-main {
|
105
105
|
display: grid;
|
106
|
-
padding: var(--page-detail-padding-top)
|
106
|
+
padding: var(--page-detail-padding-top) var(--page-detail-padding-hz) 0
|
107
|
+
var(--page-detail-padding-hz);
|
107
108
|
|
108
109
|
@include media-breakpoint-up(xs) {
|
109
110
|
padding-top: var(--page-detail-padding-top-md);
|
@@ -111,7 +112,8 @@
|
|
111
112
|
|
112
113
|
@include media-breakpoint-up(lg) {
|
113
114
|
grid-template-columns: auto 1fr;
|
114
|
-
padding: var(--page-detail-padding-top-lg)
|
115
|
+
padding: var(--page-detail-padding-top-lg) var(--page-detail-padding-hz-lg) 0
|
116
|
+
var(--page-detail-padding-hz-lg);
|
115
117
|
padding-bottom: 0;
|
116
118
|
}
|
117
119
|
|
@@ -481,3 +483,18 @@ s72-element-switcher {
|
|
481
483
|
@include caption-1-style;
|
482
484
|
}
|
483
485
|
}
|
486
|
+
|
487
|
+
|
488
|
+
comment-section {
|
489
|
+
display: block;
|
490
|
+
margin-bottom: 3rem;
|
491
|
+
|
492
|
+
padding-left: var(--page-detail-padding-hz);
|
493
|
+
padding-right: var(--page-detail-padding-hz);
|
494
|
+
|
495
|
+
@include media-breakpoint-up(lg) {
|
496
|
+
padding-left: var(--page-detail-padding-hz-lg);
|
497
|
+
padding-right: var(--page-detail-padding-hz-lg);
|
498
|
+
}
|
499
|
+
|
500
|
+
}
|
@@ -54,3 +54,10 @@
|
|
54
54
|
display: flex !important;
|
55
55
|
padding: 5px 0 16px;
|
56
56
|
}
|
57
|
+
|
58
|
+
.caption .meta-item-tagline {
|
59
|
+
opacity: var(--collection-item-tagline-opacity);
|
60
|
+
font-size: var(--collection-item-tagline-font-size);
|
61
|
+
line-height: var(--collection-item-tagline-line-height);
|
62
|
+
letter-spacing: var(--collection-item-tagline-letter-spacing);
|
63
|
+
}
|
package/site/styles/_nav.scss
CHANGED
package/site/styles/_poster.scss
CHANGED
@@ -6,6 +6,8 @@
|
|
6
6
|
width: 100%;
|
7
7
|
z-index: 1;
|
8
8
|
|
9
|
+
background-color: var(--poster-skeleton-background-color);
|
10
|
+
|
9
11
|
s72-availability-status,
|
10
12
|
s72-plan-label {
|
11
13
|
color: $button-text-color;
|
@@ -41,4 +43,31 @@
|
|
41
43
|
max-width: 100%;
|
42
44
|
position: relative;
|
43
45
|
width: 100%;
|
46
|
+
|
47
|
+
// setting aspect ratios for posters helps prevent layout shift as images load
|
48
|
+
// in and improves the effectiveness of image lazy-loading because the images
|
49
|
+
// don't all collapse down to zero height.
|
50
|
+
&.poster-image-portrait {
|
51
|
+
aspect-ratio: var(--poster-portrait-aspect-ratio);
|
52
|
+
}
|
53
|
+
|
54
|
+
&.poster-image-landscape {
|
55
|
+
aspect-ratio: var(--poster-landscape-aspect-ratio);
|
56
|
+
}
|
57
|
+
|
58
|
+
&.s72-image--loaded {
|
59
|
+
// once poster images load in, let them be their intrinsic dimensions. This
|
60
|
+
// handles cases where the actual image size doesn't match the configured
|
61
|
+
// size in the css a bit better, while still keeping layouts stable in nor
|
62
|
+
aspect-ratio: unset;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
s72-image .poster-image {
|
67
|
+
opacity: 0;
|
68
|
+
transition: opacity 0.25s ease;
|
69
|
+
|
70
|
+
&.s72-image--loaded {
|
71
|
+
opacity: 1;
|
72
|
+
}
|
44
73
|
}
|
package/site/styles/_search.scss
CHANGED
package/site/styles/_slider.scss
CHANGED
@@ -5,14 +5,14 @@ s72-userwishlist .s72-slider-control {
|
|
5
5
|
border-radius: 50%;
|
6
6
|
font-family: $font-family-base;
|
7
7
|
height: $slider-control-height;
|
8
|
-
left: -$slider-control-width
|
8
|
+
left: -$slider-control-width * 0.5;
|
9
9
|
margin-top: 0;
|
10
10
|
width: $slider-control-width;
|
11
11
|
z-index: 10;
|
12
12
|
|
13
13
|
&.right {
|
14
14
|
left: auto;
|
15
|
-
right: -$slider-control-width
|
15
|
+
right: -$slider-control-width * 0.5;
|
16
16
|
}
|
17
17
|
|
18
18
|
.s72-icon {
|
@@ -39,11 +39,11 @@ s72-userwishlist .s72-slider-control {
|
|
39
39
|
$child-width: $width - ($page-collection-item-padding-horizontal * 2);
|
40
40
|
.slider-#{$i} {
|
41
41
|
&.slider-landscape .s72-slider-control {
|
42
|
-
top: ($child-width * $poster-landscape-size-ratio)
|
42
|
+
top: ($child-width * $poster-landscape-size-ratio) * 0.5 - ($slider-control-height * 0.5);
|
43
43
|
}
|
44
44
|
|
45
45
|
&.slider-portrait .s72-slider-control {
|
46
|
-
top: ($child-width * $poster-portrait-size-ratio)
|
46
|
+
top: ($child-width * $poster-portrait-size-ratio) * 0.5 - ($slider-control-height * 0.5);
|
47
47
|
}
|
48
48
|
}
|
49
49
|
}
|
package/site/styles/_swiper.scss
CHANGED
@@ -68,3 +68,20 @@
|
|
68
68
|
padding-left: 25px;
|
69
69
|
}
|
70
70
|
}
|
71
|
+
|
72
|
+
// this helps to cover up wonky layouts before the Swiper components are
|
73
|
+
// mounted. Items get sized dynamically and this can mean poster images
|
74
|
+
// momentarily become huge
|
75
|
+
.swiper-container {
|
76
|
+
opacity: 1;
|
77
|
+
transition: opacity 0.1s ease;
|
78
|
+
|
79
|
+
&:not(.swiper-container-initialized) {
|
80
|
+
opacity: 0;
|
81
|
+
pointer-events: none;
|
82
|
+
|
83
|
+
// bit of a hack to keep the length of the page from getting mad during init
|
84
|
+
// this isn't accurate
|
85
|
+
max-height: 500px;
|
86
|
+
}
|
87
|
+
}
|
@@ -4,7 +4,8 @@
|
|
4
4
|
$font-weight: null,
|
5
5
|
$margin-bottom: null,
|
6
6
|
$font-color: null,
|
7
|
-
$line-height: null
|
7
|
+
$line-height: null,
|
8
|
+
$opacity: null
|
8
9
|
) {
|
9
10
|
color: $font-color;
|
10
11
|
font-size: $font-size;
|
@@ -12,6 +13,7 @@
|
|
12
13
|
letter-spacing: $letter-spacing;
|
13
14
|
line-height: $line-height;
|
14
15
|
margin-bottom: $margin-bottom;
|
16
|
+
opacity: $opacity;
|
15
17
|
}
|
16
18
|
|
17
19
|
@mixin heading-1-style() {
|
@@ -119,8 +121,9 @@
|
|
119
121
|
@include typography-style(
|
120
122
|
$font-size: var(--overline-style-font-size),
|
121
123
|
$letter-spacing: var(--overline-style-letter-spacing),
|
122
|
-
$font-weight:
|
123
|
-
$
|
124
|
+
$font-weight: var(--overline-style-font-weight),
|
125
|
+
$opacity: var(--overline-style-opacity),
|
126
|
+
$line-height: var(--overline-style-line-height)
|
124
127
|
);
|
125
128
|
}
|
126
129
|
|
@@ -126,7 +126,7 @@
|
|
126
126
|
--title-image-width-sm: 350px;
|
127
127
|
--title-image-width-lg: 400px;
|
128
128
|
--title-image-max-height: 180px;
|
129
|
-
--title-image-left-margin:
|
129
|
+
--title-image-left-margin: 0;
|
130
130
|
|
131
131
|
// Pages
|
132
132
|
--collection-padding-bottom: 40px;
|
@@ -137,6 +137,8 @@
|
|
137
137
|
--page-detail-padding-top: 160px;
|
138
138
|
--page-detail-padding-top-md: 248px;
|
139
139
|
--page-detail-padding-top-lg: 400px;
|
140
|
+
--page-detail-padding-hz: 20px;
|
141
|
+
--page-detail-padding-hz-lg: 50px;
|
140
142
|
|
141
143
|
--heading-1-style-letter-spacing: normal;
|
142
144
|
--heading-2-style-letter-spacing: normal;
|
@@ -148,7 +150,6 @@
|
|
148
150
|
--subtitle-1-style-letter-spacing: normal;
|
149
151
|
--subtitle-2-style-letter-spacing: normal;
|
150
152
|
--caption-1-style-letter-spacing: normal;
|
151
|
-
--overline-style-letter-spacing: normal;
|
152
153
|
|
153
154
|
--heading-1-style-font-size: 32px;
|
154
155
|
--heading-1-style-font-size-xs: 46px;
|
@@ -163,7 +164,37 @@
|
|
163
164
|
--subtitle-1-style-font-size: 16px;
|
164
165
|
--subtitle-2-style-font-size: 14px;
|
165
166
|
--caption-1-style-font-size: 16px;
|
167
|
+
|
166
168
|
--overline-style-font-size: 14px;
|
169
|
+
--overline-style-font-weight: 400;
|
170
|
+
--overline-style-line-height: 18px;
|
171
|
+
--overline-style-letter-spacing: 0;
|
172
|
+
--overline-style-opacity: 0.8;
|
173
|
+
|
174
|
+
--collection-item-tagline-opacity: 0.6;
|
175
|
+
--collection-item-tagline-font-size: 13px;
|
176
|
+
--collection-item-tagline-line-height: 1.2;
|
177
|
+
--collection-item-tagline-letter-spacing: -0.2px;
|
178
|
+
|
179
|
+
// Posters
|
180
|
+
--poster-portrait-aspect-ratio: 282 / 422;
|
181
|
+
--poster-landscape-aspect-ratio: 585 / 330;
|
182
|
+
|
183
|
+
--poster-skeleton-background-color: #3335;
|
184
|
+
|
185
|
+
// Detail player
|
186
|
+
--page-detail-player-padding-top: 140px;
|
187
|
+
--page-detail-player-padding-top-lg: 200px;
|
188
|
+
--page-detail-player-padding-bottom: 30px;
|
189
|
+
--page-detail-player-padding-bottom-theatre: 15px;
|
190
|
+
|
191
|
+
--detail-player-fallback-color: var(--body-bg-accent);
|
192
|
+
--detail-player-overlay-color: rgba(var(--body-bg-rgb), 0);
|
193
|
+
--detail-player-message-font-size: 20px;
|
194
|
+
--detail-player-messsage-bg-color: var(--body-bg-rgb);
|
195
|
+
--detail-player-messsage-font-color: var(--body-color);
|
196
|
+
--detail-player-lock-icon-color: var(--body-color);
|
197
|
+
--detail-player-play-icon-color: var(--body-color);
|
167
198
|
|
168
199
|
/* Alert component dark theme colours */
|
169
200
|
|
package/site/styles/main.scss
CHANGED
@@ -5,8 +5,8 @@
|
|
5
5
|
{{import "./pixel.jet"}}
|
6
6
|
{{import "./footer/footer.jet" }}
|
7
7
|
|
8
|
-
{{useLocalDevRelish := false
|
9
|
-
{{useLocalDevCheckout :=
|
8
|
+
{{useLocalDevRelish := false}}
|
9
|
+
{{useLocalDevCheckout := false}}
|
10
10
|
|
11
11
|
{{CDN := useLocalDevRelish ? "//localhost:3000" : "//cdn.shift72.com/" + config("s72_web_version", "1.4")}}
|
12
12
|
|
@@ -58,6 +58,12 @@
|
|
58
58
|
|
59
59
|
<script src="{{CDN}}/s72.transactional.js" defer></script>
|
60
60
|
|
61
|
+
{{if isEnabled("commenting")}}
|
62
|
+
{{commentLibVersion := config("comments_version", "test")}}
|
63
|
+
<script src="//cdn.shift72.com/comments/{{commentLibVersion}}/s72.comments.js" defer></script>
|
64
|
+
<link rel="stylesheet" href="//cdn.shift72.com/comments/{{commentLibVersion}}/s72.comments.css">
|
65
|
+
{{end}}
|
66
|
+
|
61
67
|
<script src="https://js.stripe.com/v3/" defer></script>
|
62
68
|
|
63
69
|
{* get default language from site record or kibble.json depening on if db translations is enabled *}
|
@@ -5,8 +5,9 @@
|
|
5
5
|
{{ social_link_twitter := config("social_link_twitter") }}
|
6
6
|
{{ social_link_letterboxd := config("social_link_letterboxd") }}
|
7
7
|
{{ social_link_linkedin := config("social_link_linkedin") }}
|
8
|
+
{{ social_link_bluesky := config("social_link_bluesky") }}
|
8
9
|
|
9
|
-
{{ if social_link_instagram != "" || social_link_youtube != "" || social_link_facebook != "" || social_link_twitter != "" || social_link_letterboxd != "" || social_link_linkedin != "" }}
|
10
|
+
{{ if social_link_instagram != "" || social_link_youtube != "" || social_link_facebook != "" || social_link_twitter != "" || social_link_letterboxd != "" || social_link_linkedin != "" || social_link_bluesky != ""}}
|
10
11
|
<div class="footer-social-media-icons">
|
11
12
|
{{ yield footerSocialMediaIcon(link=social_link_instagram, iconClass="instagram", titleKey="wcag_aria_label_social_instagram") }}
|
12
13
|
{{ yield footerSocialMediaIcon(link=social_link_youtube, iconClass="youtube", titleKey="wcag_aria_label_social_youtube") }}
|
@@ -14,6 +15,7 @@
|
|
14
15
|
{{ yield footerSocialMediaIcon(link=social_link_twitter, iconClass="twitter", titleKey="wcag_aria_label_social_twitter") }}
|
15
16
|
{{ yield footerSocialMediaIcon(link=social_link_letterboxd, iconClass="letterboxd", titleKey="wcag_aria_label_social_letterboxd") }}
|
16
17
|
{{ yield footerSocialMediaIcon(link=social_link_linkedin, iconClass="linkedin", titleKey="wcag_aria_label_social_linkedin") }}
|
18
|
+
{{ yield footerSocialMediaIcon(link=social_link_bluesky, iconClass="bluesky", titleKey="wcag_aria_label_social_bluesky") }}
|
17
19
|
</div>
|
18
20
|
{{ end }}
|
19
21
|
{{ end }}
|
@@ -46,7 +48,10 @@
|
|
46
48
|
{{ if iconClass == "linkedin" }}
|
47
49
|
{{ yield linkedinIcon() }}
|
48
50
|
{{ end }}
|
49
|
-
|
51
|
+
|
52
|
+
{{ if iconClass == "bluesky" }}
|
53
|
+
{{ yield blueskyIcon() }}
|
54
|
+
{{ end }}
|
50
55
|
</div>
|
51
56
|
</a>
|
52
57
|
{{ end }}
|
@@ -94,3 +99,9 @@
|
|
94
99
|
<path d="M5.385 8.016c1.222 0 1.987-.808 1.977-1.817C7.35 5.167 6.607 4.38 5.406 4.38c-1.19 0-1.977.786-1.977 1.818 0 1.01.754 1.817 1.934 1.817h.021zm7.185 11.969v-5.878c0-.32.032-.627.117-.861.255-.627.829-1.276 1.796-1.276 1.265 0 1.775.967 1.775 2.381v5.634h3.497v-6.038c0-3.231-1.722-4.74-4.028-4.74-1.813 0-2.65.966-3.12 1.683l-.037.058V9.45H9.073V9.477l.001.023c.004.134.012.598.016 1.96V11.898l.001.494v1.861c-.002 1.443-.007 3.313-.018 5.733h3.497zm-5.432 0V9.45H3.631v10.534h3.507z" fill="currentColor"/>
|
95
100
|
</svg>
|
96
101
|
{{ end }}
|
102
|
+
|
103
|
+
{{ block blueskyIcon() }}
|
104
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 568 501" fill="none">
|
105
|
+
<path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" fill="currentColor"/>
|
106
|
+
</svg>
|
107
|
+
{{ end }}
|
@@ -1,4 +1,6 @@
|
|
1
1
|
{{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
|
2
|
+
|
3
|
+
{{useGoogleDebugMode := site.Toggles["google_analytics_debug"] || false}}
|
2
4
|
<!-- Google integration scripts -->
|
3
5
|
|
4
6
|
{{if len(tagManagerId) > 0}}
|
@@ -19,7 +21,7 @@
|
|
19
21
|
window.dataLayer = window.dataLayer || [];
|
20
22
|
window.gtag = function(){dataLayer.push(arguments);}
|
21
23
|
window.gtag('js', new Date());
|
22
|
-
window.gtag('config', '{{analyticsId}}');
|
24
|
+
window.gtag('config', '{{analyticsId}}', {'debug_mode':{{useGoogleDebugMode}}});
|
23
25
|
|
24
26
|
(function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
|
25
27
|
s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);
|
@@ -56,6 +56,9 @@
|
|
56
56
|
<meta name="keywords" content="{{.Seo.Keywords}}">
|
57
57
|
{{end}}
|
58
58
|
|
59
|
+
|
60
|
+
{* override default setting allowing search robots to index the page if seo_meta_robots_no_index is set for private sites *}
|
61
|
+
{{index := site.Toggles["seo_meta_robots_no_index"] ? false : index}}
|
59
62
|
{{if !index}}
|
60
63
|
<meta name="robots" content="noindex, nofollow">
|
61
64
|
{{end}}
|