From a694d2324c77efd65e36793456a831063354f4f3 Mon Sep 17 00:00:00 2001 From: thisisobate Date: Thu, 3 Jul 2025 14:30:17 +0100 Subject: [PATCH 01/32] chore: change theme font to satoshi font Signed-off-by: thisisobate --- docs/stylesheets/extra.css | 62 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index df29f63b0bc..7e586922779 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,9 +1,71 @@ +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 400; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Regular.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 400; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Italic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 300; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Light.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 300; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-LightItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 500; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Medium.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 500; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-MediumItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 700; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Bold.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 700; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-BoldItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 900; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Black.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 900; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-BlackItalic.woff') format('woff'); +} + :root { --md-primary-fg-color: #f3f1f2; --md-primary-fg-color--dark: #0D4984; --md-primary-fg-color--light: #6593C8; --nav-item-color: #4d4d4d; --md-footer-bg-color: #081729; + --md-text-font: 'Satoshi'; } .md-clipboard { From 51e8c9815c32fcb73eb13a3b88f63017f4bf6e93 Mon Sep 17 00:00:00 2001 From: thisisobate Date: Thu, 3 Jul 2025 14:30:41 +0100 Subject: [PATCH 02/32] chore: create hero section Signed-off-by: thisisobate --- docs/images/home-images/hero-bg.svg | 65 +++++++++++++++++++++++++++ overrides/assets/stylesheets/home.css | 11 +++++ overrides/home.html | 36 +++++++++++++-- 3 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 docs/images/home-images/hero-bg.svg diff --git a/docs/images/home-images/hero-bg.svg b/docs/images/home-images/hero-bg.svg new file mode 100644 index 00000000000..b946d13469e --- /dev/null +++ b/docs/images/home-images/hero-bg.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index 30947655de2..dbcd9c3b24d 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -1,3 +1,13 @@ +.hero { + background-image: url("../../images/home-images/hero-bg.svg"); + background-repeat: no-repeat; + background-position: bottom; + background-size: cover; + background-color: #fff; + height: 25rem; + margin-top: -50px; +} + .md-main__inner { margin: 0; max-width: 100%; @@ -117,6 +127,7 @@ body { h2.secondary-headline, h3.trusted-by { color: black; font-weight: 700; + text-align: center; } .home-container h1 { diff --git a/overrides/home.html b/overrides/home.html index b039b238d5e..a10f60858e1 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -2,7 +2,7 @@
-
+ +
- +
+ --> +
+
+
+
+

+ Knative is an Open-Source Enterprise-level
+ solution to build Serverless and Event Driven Applications +

+

The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams

+

+ Try the tutorial + Install Knative on your cluster +

+
+
+
+
+

Trusted by

+
+
+ +
+
+
+
+ +
+
+
From f70252231eca0fd19e74904a912dbf7ff8a294ef Mon Sep 17 00:00:00 2001 From: thisisobate Date: Mon, 7 Jul 2025 10:21:12 +0100 Subject: [PATCH 03/32] chore: improve hero and need to know more sections Signed-off-by: thisisobate --- overrides/assets/stylesheets/home.css | 56 ++++++++++++++++++++++----- overrides/home.html | 10 ++--- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index dbcd9c3b24d..ec6fe0a0079 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -60,8 +60,16 @@ text-align: center; } +.main-headline { + padding-top: 2rem; +} + +.headline-section p { + margin-top: 2rem; +} + .why-serverless-container, .need-to-know-more-container, -.knative-components-container, .trying-it-all-container, +.trying-it-all-container, .whats-next-container, .whats-next-container, .case-studies-container, .cncf-notice-container { text-align: center; @@ -110,6 +118,11 @@ body { margin-left: 0.5rem; } +.md-button--secondary { + background-color: var(--md-primary-fg-color--dark); + border: none !important; +} + .home-container .md-button, .need-to-know-more-container .md-button { background-color: var(--md-primary-fg-color--light); @@ -124,9 +137,19 @@ body { border-radius: 8px; } -h2.secondary-headline, h3.trusted-by { - color: black; +h3.trusted-by { + color: white; font-weight: 700; + font-size: 1.3rem; + text-align: center; +} + +h2.secondary-headline { + color: var(--nav-item-color); + font-weight: 500; + font-size: 1rem; + max-width: 70%; + margin: 0 auto; text-align: center; } @@ -182,6 +205,10 @@ h2.secondary-headline, h3.trusted-by { } } +.trusted-by-container { + margin-bottom: 40px; +} + .trusted-by-container #usedby { display: flex; justify-content: center; @@ -245,17 +272,21 @@ h2.secondary-headline, h3.trusted-by { /* need to know more section css */ .need-to-know-more-container, .knative-components-container, .whats-next-container { - background-color: var(--md-primary-fg-color--dark); - padding: 2rem 1rem; + background-color: white; + color: var(--nav-item-color); text-align: center; } +.need-to-know-more-container { + padding: 5em 1em 0em 1em; +} + .need-to-know-more-container h1, .whats-next-container h1 { - color: white; + color: var(--md-primary-fg-color--dark); font-size: 2em; } -.need-to-know-more-container .md-button { +/* .need-to-know-more-container .md-button { margin: 1em 0; color: white; border-radius: 0.5rem; @@ -265,7 +296,7 @@ h2.secondary-headline, h3.trusted-by { font-size: large; padding: 0.525em 1em; min-width: fit-content; -} +} */ @media screen and (max-width: 768px) { .need-to-know-more-container { @@ -314,9 +345,10 @@ h2.secondary-headline, h3.trusted-by { /* why serverless container css */ .why-serverless-container, .trying-it-all-container { + margin-top: -2px; background-color: white; color: var(--md-primary-fg-color--light); - padding: 2em 1em; + padding: 8em 1em; text-align: center; } @@ -448,7 +480,7 @@ h2.secondary-headline, h3.trusted-by { /* knative components container css */ .knative-components-container h1 { - color: white; + color: var(--md-primary-fg-color--dark); } .knative-components-container .text-table .normal-text { @@ -826,6 +858,10 @@ position: relative; gap: 50px; } +.md-typeset .md-button.black { + color: black; +} + .md-typeset .md-button.white { color: white; } diff --git a/overrides/home.html b/overrides/home.html index a10f60858e1..c6c42c7b717 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -39,10 +39,10 @@

Knative is an Open-Source Enterprise-level
solution to build Serverless and Event Driven Applications

-

The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams

+

The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams

- Try the tutorial - Install Knative on your cluster + Try the tutorial + Install Knative on your cluster

@@ -69,9 +69,7 @@

Need to know more?

Learn about how Knative works with Kubernetes and the underlying ideas behind containers
and serverless infrastructure.

- - Explore Knative - +
From 3da78b45eea48739b12a4fa75ea615783094f3da Mon Sep 17 00:00:00 2001 From: thisisobate Date: Mon, 7 Jul 2025 10:22:29 +0100 Subject: [PATCH 04/32] chore: rename need to know more to what is knative Signed-off-by: thisisobate --- overrides/home.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/overrides/home.html b/overrides/home.html index c6c42c7b717..e5328537edc 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -64,7 +64,7 @@

Trusted by

-

Need to know more?

+

What is Knative?

Learn about how Knative works with Kubernetes and the underlying ideas behind containers
and serverless infrastructure. From 7d2a5d68bf168aed7a4c32c9b867a0f3541714e2 Mon Sep 17 00:00:00 2001 From: thisisobate Date: Tue, 8 Jul 2025 21:22:37 +0100 Subject: [PATCH 05/32] chore: create why serverless section Signed-off-by: thisisobate --- overrides/assets/stylesheets/home.css | 44 ++- overrides/home.html | 423 +++++++++++++++++++++----- 2 files changed, 380 insertions(+), 87 deletions(-) diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index ec6fe0a0079..fc01013f2bc 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -344,6 +344,15 @@ h2.secondary-headline { } /* why serverless container css */ +.serverless-outer { + background-color: #fff; +} + +.why-serverless-container { + display: flex; + justify-content: space-between; +} + .why-serverless-container, .trying-it-all-container { margin-top: -2px; background-color: white; @@ -375,6 +384,28 @@ h2.secondary-headline { font-size: 1rem; } +.serverless-content-block { + flex: 1; + justify-content: space-between; +} + +.serverless-feature-block { + flex: 2; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + row-gap: 40px; +} + +.card { + width: 400px; + min-width: 40%; + max-width: 100%; + height: 300px; + background-color: #F3F3F3; + border-radius: 30px; +} + .img-table { margin: 1rem auto -1rem; } @@ -397,9 +428,8 @@ h2.secondary-headline { } .img-wrapper { - position: relative; - width: 120px; - height: 120px; + display: flex; + justify-content: end; } .reason-img img { @@ -428,6 +458,10 @@ h2.secondary-headline { } @media screen and (max-width: 768px) { + .why-serverless-container { + flex-direction: column; + } + .why-serverless-container h1 { font-size: 1.5em; } @@ -455,6 +489,10 @@ h2.secondary-headline { } @media screen and (max-width: 480px) { + .why-serverless-container { + flex-direction: column; + } + .why-serverless-container h1 { font-size: 1.2em; } diff --git a/overrides/home.html b/overrides/home.html index e5328537edc..ef821ac2fe2 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -36,13 +36,24 @@

Trusted by

- Knative is an Open-Source Enterprise-level
+ Knative is an Open-Source Enterprise-level
solution to build Serverless and Event Driven Applications

-

The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams

+

+ The easiest way to build and run serverless workloads on Kubernetes. + Built by the community, for modern cloud-native teams +

- Try the tutorial - Install Knative on your cluster + Try the tutorial + Install Knative on your cluster

@@ -50,14 +61,10 @@

The easiest way to build and run serverless workl

Trusted by

-
- -
+
-
- -
+

@@ -66,14 +73,24 @@

Trusted by

What is Knative?

- Learn about how Knative works with Kubernetes and the underlying ideas behind containers
+ Learn about how Knative works with Kubernetes and the underlying ideas + behind containers
and serverless infrastructure.

- +
-
+ +
+
+
+

Why serverless containers?

+

+ Serverless refers to running back-end programs and processes in the + cloud. Serverless works on an as-used basis, meaning that companies + only pay for what they use. Knative is a platform-agnostic solution + for running serverless deployments. +

+
+
+
+
+ +
+
+

Simpler Abstractions

+

Simplify your YAML with our custom CRDs

+
+
+
+
+ +
+
+

Autoscaling

+

Scale down to zero and up from zero

+
+
+
+
+ +
+
+

Progressive Rollouts

+

+ Choose your rollout strategy depending on your needs +

+
+
+
+
+ +
+
+

Event Integrations

+

Handle events from many sources

+
+
+
+
+ +
+
+

Handle Events

+

Trigger handlers from the event broker

+
+
+
+
+ +
+
+

Plugable

+

+ Kubernetes native to be integrated and extended +

+
+
+
+
- +

Knative Components

- Knative has two main components that empower teams working with Kubernetes. Serving and
+ Knative has two main components that empower teams working with + Kubernetes. Serving and
Eventing work together to automate and manage tasks and applications.

- +

- Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, - autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming - language. + Run serverless containers in Kubernetes with ease. Knative takes + care of the details of networking, autoscaling (even to zero), and + revision tracking. Teams can focus on core logic using any + programming language.

- Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data - stream with declarative event connectivity and developer friendly object models. + Universal subscription, delivery and management of events. Build + modern apps by attaching compute to a data stream with declarative + event connectivity and developer friendly object models.

-

Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking.

+

+ Run serverless containers in Kubernetes with ease. Knative takes care + of the details of networking, autoscaling (even to zero), and revision + tracking. +

- +
-

Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data stream with declarative event connectivity and developer-friendly object models.

+

+ Universal subscription, delivery and management of events. Build + modern apps by attaching compute to a data stream with declarative + event connectivity and developer-friendly object models. +

-
+
@@ -222,12 +357,16 @@

Trying it all together

- +

Developers focus on code

- From container to URL
+ From container to URL
with less YAML config

@@ -235,12 +374,16 @@

Developers focus on code

- +

Scale up and down

- Scale down to zero
+ Scale down to zero
based on traffic patterns

@@ -248,12 +391,16 @@

Scale up and down

- +

Cloud agnostic

- Control traffic shifting
+ Control traffic shifting
for smoother rollouts

@@ -275,87 +422,195 @@

-
+

- "Knative allowed the team to centralize their system, scale, audit, and - even select events while enforcing policies and simplifying the architecture"
+ "Knative allowed the team to centralize their system, scale, + audit, and even select events while enforcing policies and + simplifying the architecture"
-
+

- "The introduction of the ML training infrastructure using Knative Eventing - has enabled us to establish a well-defined operational boundary for the service teams."
+ "The introduction of the ML training infrastructure using Knative + Eventing has enabled us to establish a well-defined operational + boundary for the service teams."
-
+

- "The power of Knative’s eventing and serverless features allows PNC to bridge processes - between Apache Kafka and CI/CD toolchain events and achieve this automated state."
+ "The power of Knative’s eventing and serverless features allows + PNC to bridge processes between Apache Kafka and CI/CD toolchain + events and achieve this automated state."

-
-

Knative is a Cloud Native Computing Foundation incubation project

- +

+ Knative is a + Cloud Native Computing Foundation + incubation project +

+
-{% endblock %} - -{% block scripts %} -{{ super() }} +{% endblock %} {% block scripts %} {{ super() }}