@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.
Files changed (66) hide show
  1. package/.github/workflows/node.js.yml +12 -13
  2. package/.nvmrc +1 -1
  3. package/CHANGELOG.md +44 -1
  4. package/kibble.json +4 -3
  5. package/package.json +16 -7
  6. package/rollup.config.js +10 -4
  7. package/site/ar_LB.all.json +8 -5
  8. package/site/ca_ES.all.json +3 -0
  9. package/site/da_DK.all.json +3 -0
  10. package/site/de_DE.all.json +4 -1
  11. package/site/el_EL.all.json +3 -0
  12. package/site/en_AU.all.json +3 -0
  13. package/site/es_ES.all.json +6 -3
  14. package/site/es_MX.all.json +6 -3
  15. package/site/et_ET.all.json +4 -1
  16. package/site/fi_FI.all.json +5 -2
  17. package/site/fr_FR.all.json +4 -1
  18. package/site/hr_HR.all.json +4 -1
  19. package/site/hu_HU.all.json +4 -1
  20. package/site/it_IT.all.json +8 -5
  21. package/site/ja_JP.all.json +8 -5
  22. package/site/lt_LT.all.json +3 -0
  23. package/site/nl_BE.all.json +4 -1
  24. package/site/no_NO.all.json +4 -1
  25. package/site/pl_PL.all.json +5 -2
  26. package/site/pt_BR.all.json +4 -1
  27. package/site/pt_PT.all.json +4 -1
  28. package/site/ru_RU.all.json +6 -3
  29. package/site/sr_SR.all.json +4 -1
  30. package/site/static/js/comments.js +9 -0
  31. package/site/static/js/detail-player/detail-player-iframe.component.js +24 -0
  32. package/site/static/js/detail-player/detail-player-placeholder.component.js +161 -0
  33. package/site/static/js/detail-player/detail-player.component.js +54 -0
  34. package/site/static/js/detail-player/icons.js +31 -0
  35. package/site/static/js/main.js +10 -0
  36. package/site/styles/_carousel.scss +10 -0
  37. package/site/styles/_collections.scss +7 -1
  38. package/site/styles/_detail-player.scss +182 -0
  39. package/site/styles/_forms.scss +3 -1
  40. package/site/styles/_globals.scss +11 -0
  41. package/site/styles/_legacy.scss +57 -55
  42. package/site/styles/_meta-detail-creator.scss +82 -0
  43. package/site/styles/_meta-detail.scss +19 -2
  44. package/site/styles/_meta-item-tagline.scss +7 -0
  45. package/site/styles/_meta-item-title.scss +1 -1
  46. package/site/styles/_meta-item.scss +3 -0
  47. package/site/styles/_nav.scss +1 -0
  48. package/site/styles/_poster.scss +29 -0
  49. package/site/styles/_search.scss +2 -0
  50. package/site/styles/_slider.scss +4 -4
  51. package/site/styles/_swiper.scss +17 -0
  52. package/site/styles/_typography.scss +6 -3
  53. package/site/styles/_variables.scss +33 -2
  54. package/site/styles/main.scss +2 -0
  55. package/site/templates/application/application.jet +8 -2
  56. package/site/templates/application/footer/social-media-buttons.jet +13 -2
  57. package/site/templates/application/google.jet +3 -1
  58. package/site/templates/application/head/seo.jet +3 -0
  59. package/site/templates/application/pixel.jet +1 -1
  60. package/site/templates/collection/carousel/item/video.jet +3 -3
  61. package/site/templates/common/cta_buttons.jet +3 -1
  62. package/site/templates/film/item.jet +15 -3
  63. package/site/templates/film/title.jet +3 -3
  64. package/site/tr_TR.all.json +7 -4
  65. package/site/uk_UA.all.json +4 -1
  66. package/site/zh_TW.all.json +9 -6
@@ -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% / 3);
22
- max-width: (100% / 3);
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% / 4);
25
- max-width: (100% / 4);
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% / 5);
29
- max-width: (100% / 5);
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% / 6);
34
+ max-width: math.div(100%, 6);
33
35
  }
34
36
  @include media-breakpoint-up(xxxl) {
35
- max-width: (100% / 8);
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% / 3);
48
- max-width: (100% / 3);
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% / 4);
52
- max-width: (100% / 4);
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% / 5);
57
+ max-width: (100% * 0.2);
56
58
  }
57
59
  @include media-breakpoint-up(xxxl) {
58
- max-width: (100% / 6);
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% / 3);
73
- max-width: (100% / 3);
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% / 3);
77
- max-width: (100% / 3);
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% / 4);
82
+ max-width: (100% * 0.25);
81
83
  }
82
84
  @include media-breakpoint-up(xxxl) {
83
- max-width: (100% / 5);
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% / 3);
96
- max-width: (100% / 3);
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% / 3);
100
- max-width: (100% / 3);
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% / 4);
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% / 2);
125
- max-width: (100% / 2);
126
+ flex-basis: (100% * 0.5);
127
+ max-width: (100% * 0.5);
126
128
  @include media-breakpoint-up(md) {
127
- flex-basis: (100% / 3);
128
- max-width: (100% / 3);
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% / 3);
132
- max-width: (100% / 3);
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% / 4);
136
- max-width: (100% / 4);
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% / 4);
140
- max-width: (100% / 4);
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% / 2);
151
- max-width: (100% / 2);
152
+ flex-basis: (100% * 0.5);
153
+ max-width: (100% * 0.5);
152
154
  @include media-breakpoint-up(md) {
153
- flex-basis: (100% / 3);
154
- max-width: (100% / 3);
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% / 3);
158
- max-width: (100% / 3);
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% / 4);
162
- max-width: (100% / 4);
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% / 4);
166
- max-width: (100% / 4);
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% / 2);
177
- max-width: (100% / 2);
178
+ flex-basis: (100% * 0.5);
179
+ max-width: (100% * 0.5);
178
180
  @include media-breakpoint-up(md) {
179
- flex-basis: (100% / 3);
180
- max-width: (100% / 3);
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% / 3);
184
- max-width: (100% / 3);
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% / 4);
188
- max-width: (100% / 4);
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% / 4);
192
- max-width: (100% / 4);
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) 20px 0 20px;
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) 50px 0 50px;
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
+ }
@@ -1,6 +1,6 @@
1
1
  .item-title-image {
2
- max-height: var(--title-image-max-height);
3
2
  margin-left: var(--title-image-left-margin);
3
+ max-height: var(--title-image-max-height);
4
4
  object-fit: contain;
5
5
  object-position: left;
6
6
  width: var(--title-image-width);
@@ -1,4 +1,7 @@
1
1
  .meta-item {
2
+ display: flex;
3
+ flex-direction: column;
4
+
2
5
  a {
3
6
  display: inline-block;
4
7
  }
@@ -881,6 +881,7 @@ s72-dropdown,
881
881
  z-index: 10;
882
882
  .header-banner-message {
883
883
  font-size: 12px;
884
+ font-weight: 400;
884
885
  margin-bottom: 0;
885
886
  @include media-breakpoint-up(sm) {
886
887
  font-size: 14px;
@@ -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
  }
@@ -29,6 +29,8 @@
29
29
 
30
30
  .partial {
31
31
  @extend .slider-item;
32
+ display: flex;
33
+ flex-direction: column;
32
34
  }
33
35
  }
34
36
  }
@@ -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 / 2;
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 / 2;
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) / 2 - ($slider-control-height / 2);
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) / 2 - ($slider-control-height / 2);
46
+ top: ($child-width * $poster-portrait-size-ratio) * 0.5 - ($slider-control-height * 0.5);
47
47
  }
48
48
  }
49
49
  }
@@ -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: $font-weight-normal,
123
- $line-height: 18px
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: 0px;
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
 
@@ -30,6 +30,8 @@
30
30
  @import '_poster';
31
31
 
32
32
  @import '_meta-detail';
33
+ @import '_meta-detail-creator';
34
+ @import '_detail-player';
33
35
  @import '_footer';
34
36
 
35
37
  @import '_shopping';
@@ -5,8 +5,8 @@
5
5
  {{import "./pixel.jet"}}
6
6
  {{import "./footer/footer.jet" }}
7
7
 
8
- {{useLocalDevRelish := false }}
9
- {{useLocalDevCheckout := false}}
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}}