Skip to content

Commit 7730a2a

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #51836 from lmktfy/20250807_update_main_page_video
Update the video we use on our main page
2 parents 8b1e4a4 + b7c517e commit 7730a2a

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)