diff --git a/assets/images/k8s-10th-birthday.svg b/assets/images/k8s-10th-birthday.svg new file mode 100644 index 0000000000..e77831e9e3 --- /dev/null +++ b/assets/images/k8s-10th-birthday.svg @@ -0,0 +1,676 @@ + + diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 64e84295ff..b5176c9a1f 100644 --- a/assets/scss/_base.scss +++ b/assets/scss/_base.scss @@ -477,7 +477,8 @@ section#cncf { } // OCEAN NODES -#oceanNodes { +#oceanNodes, .td-home .k8s-overview { + padding-top: $ocean-nodes-padding-Y; padding-bottom: $ocean-nodes-padding-Y; diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index cebb62033d..aedf1c6764 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -1413,4 +1413,101 @@ div.alert > em.javascript-required { cursor: pointer; text-align: right; padding: 0.2rem; +} + +// Special style for Kubernetes' 10th birthday +section.k8s-birthday-override { + background: #dae9f9; // Kubernetes light blue + + > .k8s-birthday-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + align-content: flex-end; + gap: 2rem; + + img.birthday-banner { + max-height: 20rem; + max-width: 100vw; + margin-left: auto; + margin-right: auto; + aspect-ratio: 1; + flex-grow: 1; + } + p { + flex-grow: 4; + text-align: center; + color: $blue; + font-size: 2.5em; + padding-bottom: 2.5rem; + margin: 1em; + } + } + + div.k8s-birthday-override.revert-to-previous { + form { + display: block; + max-width: clamp(20rem, 30%, 100vw); + margin-left: auto; + padding-bottom: 0.5rem; + } + text-align: right; + label { + color: $blue; + padding-left: 1.2em; + padding-right: 1.2em; + text-decoration: underline; + font-size: 1.5rem; + } + input { + accent-color: $blue; + border-color: $blue; + visibility: hidden; + } + } + + div.k8s-birthday-override.revert-to-previous:has(input:not(:checked)) { + display: initial; + } + + &:has(input:checked) { + display: none; + } +} + +@media screen and (max-width: 900px) { + section.k8s-birthday-override > .k8s-birthday-wrapper { + flex-wrap: wrap; + } +} + +@media screen and (max-width: 900px) { + section.k8s-birthday-override > .k8s-birthday-wrapper { + gap: 0.2rem; + align-content: center; + p { + font-size: initial; + min-width: 80vw; + } + img.birthday-banner { + min-height: initial; + } + label { + font-size: 1.2rem; + } + } +} +@media screen and (max-aspect-ratio: 9/15) { + gap: 0.4rem; +} + +@media screen and (min-width: 1281px) { + img.birthday-banner { + min-height: clamp(480px, 25rem, 100vh); + } +} +section.k8s-birthday-override:has(div.k8s-birthday-override.revert-to-previous input:not(:checked)) + section { + display: none; + visibility: hidden; } \ No newline at end of file diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss index abff764d2f..101faca5af 100644 --- a/assets/scss/_desktop.scss +++ b/assets/scss/_desktop.scss @@ -23,7 +23,7 @@ $video-section-height: 550px; } } - #oceanNodes { + #oceanNodes, .td-home .k8s-overview { .main-section { position: relative; diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss index 58149a7dc2..03d18bd910 100644 --- a/assets/scss/_tablet.scss +++ b/assets/scss/_tablet.scss @@ -66,7 +66,7 @@ $feature-box-div-width: 45%; } } - #oceanNodes { + #oceanNodes, .td-home .k8s-overview { h3 { text-align: left; margin-bottom: 18px; diff --git a/content/en/_index.html b/content/en/_index.html index 55575df201..16ca5813c6 100644 --- a/content/en/_index.html +++ b/content/en/_index.html @@ -8,8 +8,9 @@ sitemap: {{< site-searchbar >}} -{{< blocks/section id="oceanNodes" >}} -{{% blocks/feature image="flower" %}} + +{{< blocks/section class="k8s-overview" >}} +{{% blocks/feature image="flower" id="feature-primary" %}} [Kubernetes]({{< relref "/docs/concepts/overview/" >}}), also known as K8s, is an open source system for automating deployment, scaling, and management of containerized applications. It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds upon [15 years of experience of running production workloads at Google](http://queue.acm.org/detail.cfm?id=2898444), combined with best-of-breed ideas and practices from the community. diff --git a/content/en/community/special/kubernetes-10th-birthday.md b/content/en/community/special/kubernetes-10th-birthday.md new file mode 100644 index 0000000000..10ad6a07a1 --- /dev/null +++ b/content/en/community/special/kubernetes-10th-birthday.md @@ -0,0 +1,13 @@ +--- +title: Kubernetes' 10th birthday +content_type: special + +display_date_start: 2024-06-06 +display_date_end: 2024-06-15 + +# Only ever included, not rendered as a page in its own right +_build: + list: never + render: false +--- +Kubernetes 10 Years diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml index b16e8b6e04..a17986d897 100644 --- a/data/i18n/en/en.toml +++ b/data/i18n/en/en.toml @@ -209,6 +209,9 @@ other = "email address" [javascript_required] other = "JavaScript must be [enabled](https://www.enable-javascript.com/) to view this content" +[k8s_birthday_show_original_content] +other = "Show original content…" + [katacoda_message] other = """
The interactive tutorials on this website are being shut down. The Kubernetes
diff --git a/layouts/partials/kubernetes-overview.html b/layouts/partials/kubernetes-overview.html
new file mode 100644
index 0000000000..c790eeaa12
--- /dev/null
+++ b/layouts/partials/kubernetes-overview.html
@@ -0,0 +1,31 @@
+{{- $shouldShowBirthdayBanner := false -}}
+{{- $now := time.Now -}}
+{{- with site.GetPage "page" "community/special/kubernetes-10th-birthday" -}}
+ {{- if and (lt ( (.Param "display_date_start") | time.AsTime ) $now ) (gt ( (.Param "display_date_end") | time.AsTime ) ( $now.AddDate 0 0 1 ) ) -}}
+ {{- $shouldShowBirthdayBanner = true -}}
+ {{- warnf "%s" "It's Kubernetes' birthday, fingers crossed this renders OK" -}}
+ {{- with resources.Get "images/k8s-10th-birthday.svg" -}}
+ {{- else -}}
+ {{- errorf "%s" "Birthday banner image missing" -}}
+ {{- end -}}
+ {{ end }}
+{{- end -}}
+{{- if $shouldShowBirthdayBanner -}}
+ {{ "2014-06-06" | time.AsTime | time.Format ":date_long" }} {{ printf "%s-06-06" ( time.Format "2006" $now ) | time.AsTime | time.Format ":date_long" }}
+ {{- else -}}
+ {{- errorf "%s" "10th Birthday content missing" -}}
+ {{- end -}}
+