Skip to content

Commit b7c517e

Browse files
lmktfylmktfy
committed
Switch video used on landing page
Replace the (really dated) video used on our landing page with something more up to date.
1 parent 2a0dbcb commit b7c517e

File tree

9 files changed

+135
-99
lines changed

9 files changed

+135
-99
lines changed

‎assets/images/site-blocks/video_banner_homepage_XNZvGHlpJ_4.jpeg‎

129 KB
Loading

‎assets/scss/_base.scss‎

Lines changed: 16 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -312,21 +312,15 @@ $ocean-nodes-h3-margin-bottom: 30px;
312312

313313
// Video thingy
314314
#video {
315-
width: 100%;
315+
width: 100vw;
316316
position: relative;
317317
overflow: hidden;
318-
background-position: center center;
319-
background-size: cover;
320318

321-
& > .light-text {
322-
display: none;
323-
// position: absolute;
324-
// top: 50%;
325-
// left: 75%;
326-
width: 500px;
319+
& > .video-text-optional {
320+
width: 30vw;
327321
padding-top: 2rem;
328-
// transform: translate(-50%, -50%);
329322
color: white;
323+
margin-right: 70vw;
330324
}
331325

332326
h2 {
@@ -366,59 +360,22 @@ $ocean-nodes-h3-margin-bottom: 30px;
366360
}
367361

368362
#desktopShowVideoButton {
369-
position: relative;
370-
font-size: 24px;
363+
font-size: 1.8rem;
371364
background-color: white;
372365
border-radius: 8px;
373-
color: $primary;
374-
padding: 15px 30px 15px 80px;
375-
margin-bottom: 35px;
376-
377-
&:before {
378-
content: "";
379-
position: absolute;
380-
@include pureCenter(40px);
381-
width: 0;
382-
height: 0;
383-
border-style: solid;
384-
border-width: 10px 0 10px 20px;
385-
border-color: transparent transparent transparent $primary;
386-
}
366+
color: $secondary;
367+
padding: 1.5rem;
368+
margin-bottom: 1rem;
387369

388370
&:hover::before {
389371
border-color: transparent transparent transparent $dark-grey;
390372
}
391373
}
392374

393375
#desktopShowVideoButton:hover{
394-
color: $dark-grey;
376+
color: $primary;
395377
transition: 150ms;
396378
}
397-
398-
#mobileShowVideoButton {
399-
@include pureCenter;
400-
width: 80px;
401-
height: 80px;
402-
border-radius: 50%;
403-
background-color: transparent;
404-
border: 5px solid rgba(255, 255, 255, 0.2);
405-
overflow: visible;
406-
407-
&:after {
408-
@include pureCenter;
409-
left: 40px;
410-
content: "";
411-
width: 0;
412-
height: 0;
413-
border-style: solid;
414-
border-width: 20px 0 20px 30px;
415-
border-color: transparent transparent transparent #ffffff;
416-
}
417-
}
418-
}
419-
420-
#video:has(#desktopKCButton) {
421-
height: 580px;
422379
}
423380

424381
#videoPlayer {
@@ -427,8 +384,13 @@ $ocean-nodes-h3-margin-bottom: 30px;
427384
display: none;
428385

429386
iframe {
430-
@include pureCenter;
431-
@include maintain-aspect-ratio;
387+
width: 100%;
388+
max-height: 100vh;
389+
aspect-ratio: 16 / 9;
390+
position: fixed;
391+
top: 50%;
392+
left:50%;
393+
transform: translate(-50%, -50%);
432394
}
433395

434396
#closeButton {

‎assets/scss/_custom.scss‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,31 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
9696
}
9797
}
9898

99+
section#upcoming-events {
100+
color: $white;
101+
background: $secondary;
102+
text-align: center;
103+
padding-top: 4rem;
104+
padding-bottom: 2rem;
105+
h2, h3, h4, h5, h6 {
106+
font-weight: bold;
107+
}
108+
> div {
109+
margin: 1.5em;
110+
padding: 0.5em 0 0.5em 0;
111+
a, a:hover {
112+
color: $white;
113+
background: transparent;
114+
font-size: 1.5rem;
115+
text-decoration: underline;
116+
strong {
117+
color: $white;
118+
background: transparent;
119+
}
120+
}
121+
}
122+
}
123+
99124
.section-feature#kubeweekly {
100125

101126
a.kubeweekly-signup, a.kubeweekly-signup:hover {
@@ -400,6 +425,68 @@ footer {
400425
}
401426
}
402427

428+
.td-home section#video {
429+
display: block;
430+
clear: both;
431+
min-height: 24rem;
432+
}
433+
434+
435+
.td-home section#video.section-with-bgimage {
436+
background: #13110f; // match video
437+
background-position: 65% center, left center;
438+
background-repeat: no-repeat, repeat;
439+
background-size: auto 100%, cover;
440+
.video-text-optional {
441+
padding-left: calc(max(10vw, 5rem));
442+
443+
button::before, button::after {
444+
color: $secondary;
445+
padding-left: 0.5rem;
446+
padding-right: 0.5rem;
447+
}
448+
button:dir(ltr)::before {
449+
content: "▶︎ ";
450+
}
451+
button:dir(rtl)::after {
452+
content: " ▶︎";
453+
}
454+
455+
h2, h3, h4, h5, h6, p {
456+
visibility: hidden; // the background has the same works
457+
font-size: inherit;
458+
}
459+
}
460+
}
461+
462+
@media only screen and (max-width: 1024px) {
463+
.td-home section#video.section-with-bgimage {
464+
background-size: contain, cover;
465+
.video-text-optional {
466+
padding: 0.5rem;
467+
padding-top: 40%;
468+
width: 100%;
469+
}
470+
button {
471+
min-width: calc(min(90vw,20rem));
472+
font-size: 1.2rem;
473+
margin-bottom: 3em;
474+
}
475+
}
476+
}
477+
478+
@media (max-width: 10cm) {
479+
.td-home section#video {
480+
display: none;
481+
}
482+
}
483+
484+
@media only screen and (max-width: 640px) and (orientation: portrait) {
485+
.td-home section#video {
486+
display: none;
487+
}
488+
}
489+
403490
/* COMMUNITY */
404491

405492
body.cid-community {

‎assets/scss/_reset.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,6 @@
2929
height: 100vh;
3030
}
3131

32-
@mixin pureCenter($left: 50%, $top: 50%) {
33-
position: absolute;
34-
top: $top;
35-
left: $left;
36-
transform: translate(-50%, -50%);
37-
}
38-
3932
@mixin maintain-aspect-ratio(
4033
$width-factor: 16,
4134
$height-factor: 9,

‎assets/scss/_tablet.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -118,21 +118,6 @@ $vendor-strip-font-size: 16px;
118118
}
119119
}
120120

121-
#video {
122-
display: block;
123-
124-
& > .light-text {
125-
display: block;
126-
float: right;
127-
text-align: left;
128-
margin: 0 5% 15px 0;
129-
}
130-
131-
&:dir(rtl) > .light-text {
132-
text-align: right;
133-
}
134-
}
135-
136121
#mobileShowVideoButton {
137122
display: none;
138123
}

‎content/en/_index.html‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,27 @@
3838

3939
{{< /blocks/section >}}
4040

41-
{{< blocks/section id="video" background-image="kub_video_banner_homepage" >}}
42-
<div class="light-text">
43-
<h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
44-
<p>By Sarah Wells, Technical Director for Operations and Reliability, Financial Times</p>
45-
<button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
46-
47-
<h3>Attend upcoming KubeCon + CloudNativeCon events</h3>
48-
<a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-india/" class="desktopKCButton"><strong>India</strong> (Hyderabad, Aug 6-7)</a>
49-
<a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/" class="desktopKCButton"><strong>North America</strong> (Atlanta, Nov 10-13)</a>
50-
<a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-europe-2026/" class="desktopKCButton"><strong>Europe</strong> (Amsterdam, Mar 23-26, 2026)</a>
41+
{{< blocks/section id="video" background-image="video_banner_homepage_XNZvGHlpJ_4" >}}
42+
<div class="video-text-optional">
43+
<h2>The Absolute Beginner's Guide To Cloud Native</h2>
44+
<p class="presenter-byline">by Kyle Penfound, Dagger &amp; Cortney Nickerson, Kubeshop</p>
45+
<button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
5146
</div>
5247
<div id="videoPlayer">
53-
<iframe data-url="https://www.youtube.com/embed/H06qrNmGqyE?autoplay=1" frameborder="0" allowfullscreen></iframe>
48+
<iframe data-url="https://www.youtube.com/embed/XNZvGHlpJ_4?autoplay=1" frameborder="0" allowfullscreen></iframe>
5449
<button id="closeButton"></button>
5550
</div>
5651
{{< /blocks/section >}}
52+
{{< blocks/section id="upcoming-events" >}}
53+
<h2>Attend upcoming KubeCon + CloudNativeCon events</h3>
54+
<!-- TODO: change this to a shortcode that auto-updates from a schedule -->
55+
<div>
56+
<a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/" class="desktopKCButton"><strong>North America</strong> (Atlanta, Nov 10-13)</a>
57+
</div>
58+
<div>
59+
<a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-europe-2026/" class="desktopKCButton"><strong>Europe</strong> (Amsterdam, Mar 23-26, 2026)</a>
60+
</div>
61+
{{< /blocks/section >}}
5762

5863
{{< blocks/kubernetes-features >}}
5964

‎layouts/shortcodes/blocks/__common.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
{{/* This file contains some common template definitions used in the blocks shortcodes.
22
The reasoning behind the long and hard-to-remember template names is that these templates are global. */}}
33
{{ define "shortcodes-blocks_getimage" }}
4-
{{- $cr := site.GetPage "/_common-resources" -}}
5-
{{- with $cr -}}
6-
{{- $image := $cr.Resources.GetMatch (printf "images/**%s*" $.name ) -}}
7-
{{- with $image -}}
8-
{{- $.ctx.Scratch.Set $.target $image -}}
4+
{{- with resources.Get (printf "images/site-blocks/%s.jpeg" $.name ) -}}
5+
{{- $.ctx.Scratch.Set $.target . -}}
96
{{- else -}}
10-
{{- errorf "Image matching %q not found _common-resources" $.name -}}
11-
{{- end -}}
12-
{{- else -}}
13-
{{ errorf "[%s] No resource bundle found. Create an empty headless bundle; create content/%s/_common-resources/index.md with \"headless: true\" in front matter. See https://gohugo.io/content-management/page-bundles/#headless-bundle" $.ctx.Page.Lang $.ctx.Page.Lang }}
14-
{{- end -}}
7+
{{- $cr := site.GetPage "/_common-resources" -}}
8+
{{- with $cr -}}
9+
{{- $legacyImage := $cr.Resources.GetMatch (printf "images/**%s*" $.name ) -}}
10+
{{- with $legacyImage -}}
11+
{{- $.ctx.Scratch.Set $.target $legacyImage -}}
12+
{{- else -}}
13+
{{- errorf "Image matching %q not found _common-resources" $.name -}}
14+
{{- end -}}
15+
{{- else -}}
16+
{{ errorf "[%s] No resource bundle found. Create an empty headless bundle; create content/%s/_common-resources/index.md with \"headless: true\" in front matter. See https://gohugo.io/content-management/page-bundles/#headless-bundle" $.ctx.Page.Lang $.ctx.Page.Lang }}
17+
{{- end -}}
18+
{{- end -}}
1519
{{- end -}}

‎layouts/shortcodes/blocks/feature.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{/*
22
This shortcode renders a main feature as seen on the top of the Kubernetes home page.
33

4-
It can be given a "image" parameter with a name partially matching a file in the images folder of the _common-resources bundle.
4+
It can be given a "image" parameter with a name partially matching a file in the assets folder
55

66
*/}}
77
{{- $imageName := $.Get "image" | default "flower" -}}

‎layouts/shortcodes/blocks/section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{{ template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
1111
{{- end -}}
1212
{{- $image := $.Scratch.Get "bg" -}}
13-
<section id="{{ $id }}"{{ with $class }} class="{{ . }}"{{ end }} style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
13+
<section id="{{ $id }}" class="{{ with $image }}section-with-bgimage{{end}} {{ with $class }}{{ . }}{{ end }}" style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
1414
{{ $.Inner }}
1515
</section>
1616
{{- end -}}

0 commit comments

Comments
 (0)