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/_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/content/en/_index.html b/content/en/_index.html index 82e6f1231f..f6db6268b4 100644 --- a/content/en/_index.html +++ b/content/en/_index.html @@ -8,6 +8,7 @@ sitemap: {{< site-searchbar >}} + {{< 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. 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
index 96592cb81e..c790eeaa12 100644
--- a/layouts/partials/kubernetes-overview.html
+++ b/layouts/partials/kubernetes-overview.html
@@ -1,3 +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 -}}
+