From eb8c8960004b8c69b329450969960d3c05aa6ff5 Mon Sep 17 00:00:00 2001 From: nafisreza Date: Wed, 22 May 2024 06:31:22 +0600 Subject: [PATCH 1/2] Homepage design issues fixed --- .../home-images/blue_autoscaling_icon.svg | 2 +- .../blue_event_intergrations_icon.svg | 2 +- .../home-images/blue_handle_events_icon.svg | 2 +- .../images/home-images/blue_plugable_icon.svg | 2 +- .../blue_progressive_rollouts_icon.svg | 2 +- .../blue_simple_abstractions_icon.svg | 2 +- .../home-images/cloud_agnostic_icon.svg | 2 +- .../home-images/dev_focus_code_icon.svg | 2 +- docs/images/home-images/dkblue_scale_icon.svg | 2 +- docs/stylesheets/extra.css | 45 +++++++++-- overrides/assets/stylesheets/home.css | 79 +++++++++++++++---- overrides/home.html | 19 ++--- 12 files changed, 117 insertions(+), 44 deletions(-) diff --git a/docs/images/home-images/blue_autoscaling_icon.svg b/docs/images/home-images/blue_autoscaling_icon.svg index 473e9e08ce..5e951fc9ba 100644 --- a/docs/images/home-images/blue_autoscaling_icon.svg +++ b/docs/images/home-images/blue_autoscaling_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133.37 133.67" style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/blue_event_intergrations_icon.svg b/docs/images/home-images/blue_event_intergrations_icon.svg index dba904682c..a45d375614 100644 --- a/docs/images/home-images/blue_event_intergrations_icon.svg +++ b/docs/images/home-images/blue_event_intergrations_icon.svg @@ -15,7 +15,7 @@ style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/blue_handle_events_icon.svg b/docs/images/home-images/blue_handle_events_icon.svg index 08ae50b57e..5922ebb486 100644 --- a/docs/images/home-images/blue_handle_events_icon.svg +++ b/docs/images/home-images/blue_handle_events_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133.37 133.67" style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/blue_plugable_icon.svg b/docs/images/home-images/blue_plugable_icon.svg index d56eec5ced..6964f7041d 100644 --- a/docs/images/home-images/blue_plugable_icon.svg +++ b/docs/images/home-images/blue_plugable_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133.37 133.67" style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/blue_progressive_rollouts_icon.svg b/docs/images/home-images/blue_progressive_rollouts_icon.svg index 7ed5ba1680..16ce52f5d9 100644 --- a/docs/images/home-images/blue_progressive_rollouts_icon.svg +++ b/docs/images/home-images/blue_progressive_rollouts_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133.37 133.67" style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/blue_simple_abstractions_icon.svg b/docs/images/home-images/blue_simple_abstractions_icon.svg index c1973a86ba..5f558d2879 100644 --- a/docs/images/home-images/blue_simple_abstractions_icon.svg +++ b/docs/images/home-images/blue_simple_abstractions_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133.37 133.67" style="enable-background:new 0 0 133.37 133.67;" xml:space="preserve"> diff --git a/docs/images/home-images/cloud_agnostic_icon.svg b/docs/images/home-images/cloud_agnostic_icon.svg index e4ae9781a8..c8653da30e 100644 --- a/docs/images/home-images/cloud_agnostic_icon.svg +++ b/docs/images/home-images/cloud_agnostic_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 167.97 96.99" style="enable-background:new 0 0 167.97 96.99;" xml:space="preserve"> diff --git a/docs/images/home-images/dev_focus_code_icon.svg b/docs/images/home-images/dev_focus_code_icon.svg index 224c3c79be..6617ff9646 100644 --- a/docs/images/home-images/dev_focus_code_icon.svg +++ b/docs/images/home-images/dev_focus_code_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.95 115.95" style="enable-background:new 0 0 115.95 115.95;" xml:space="preserve"> diff --git a/docs/images/home-images/dkblue_scale_icon.svg b/docs/images/home-images/dkblue_scale_icon.svg index da22e5c299..0dca06189a 100644 --- a/docs/images/home-images/dkblue_scale_icon.svg +++ b/docs/images/home-images/dkblue_scale_icon.svg @@ -14,7 +14,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 136.13 136.13" style="enable-background:new 0 0 136.13 136.13;" xml:space="preserve"> diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index fdf9108d92..f6c12a4905 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,6 +1,6 @@ :root { --md-primary-fg-color: #f3f1f2; - --home-color: #0071c7; + --home-color: #0D4984; --nav-item-color: #4d4d4d; } @@ -99,8 +99,19 @@ a.md-header__button.md-logo img { font-weight: bold; } +.md-tabs__list { + contain: none; + overflow: visible; +} + .md-tabs__list li:nth-last-child(3) { - margin-left: auto; + margin-left: 360px; +} + +@media only screen and (max-width: 1630px) { + .md-tabs__list li:nth-last-child(3) { + margin-left: auto; + } } .md-tabs__list li:nth-last-child(1), @@ -111,6 +122,13 @@ a.md-header__button.md-logo img { padding: 0 2em; } +.md-tabs__list li:nth-last-child(1){ + border-top-right-radius: 10px; +} +.md-tabs__list li:nth-last-child(3){ + border-top-left-radius: 10px; +} + .md-tabs__list li:nth-last-child(1) a, .md-tabs__list li:nth-last-child(2) a, .md-tabs__list li:nth-last-child(3) a { @@ -188,6 +206,13 @@ a.md-header__button.md-logo img { .md-typeset .md-button { color: #024c93; + border-radius: 7px; +} + +.md-button:hover { + background-color: #013464 !important; + color: white; + border: 1px solid #024c93 !important; } /* Giving h4 tag distinctive style because it is non-differntial with bold text */ @@ -335,17 +360,12 @@ a.md-header__button.md-logo img { background-color: #024c93; } -.md-footer .md-footer-copyright { - font-weight: bold; -} - .md-footer-meta { - background-color: var(--md-footer-bg-color); + background-color: #081729; } .footer-links { display: flex; - flex-grow: 1; align-items: center; } @@ -354,6 +374,15 @@ a.md-header__button.md-logo img { text-decoration: underline } +html .md-footer-meta.md-typeset a { + color: #fff; + font-weight: 500; +} + +.md-social__link svg { + fill: #fff; +} + /* Feature State Labels */ .feature-alpha, .feature-beta, .feature-stable { font-variant: small-caps; diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index eb657c88ad..dcc8eeccd8 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -99,10 +99,17 @@ body { min-width: fit-content; } +.cta-1{ + margin-right: 5px; +} +.cta-2{ + margin-left: 5px; +} + .home-container .md-button, .need-to-know-more-container .md-button { - background-color: #52b3dd; - border-color: #52b3dd; + background-color: #6593C8; + border-color: #6593C8; } .home-container .md-button--primary { @@ -117,7 +124,7 @@ h2.secondary-headline, h3.trusted-by { } .home-container h1 { - color: #024c93; + color: #081729; margin-top: 1em; margin-bottom: 0; } @@ -213,10 +220,20 @@ h2.secondary-headline, h3.trusted-by { /* why serverless container css */ .why-serverless-container, .trying-it-all-container { - background-color: #f3f1f2; + background-color: #fff; color: var(--md-default-fg-color--light); } +.reason-text h2{ + color: #000; +} + +.reason-text p{ + font-size: 1rem; + color: #333; + font-weight: 500; +} + .why-serverless-container h1, .trying-it-all-container h1, .case-studies-container h1 { color: #024c93; @@ -224,7 +241,7 @@ h2.secondary-headline, h3.trusted-by { .why-serverless-container .normal-text, .trying-it-all-container .normal-text { - font-weight: 600; + font-weight: 400; margin: 0 auto 2rem; max-width: 75%; } @@ -243,6 +260,7 @@ h2.secondary-headline, h3.trusted-by { .why-serverless-container .normal-text { font-size: .8rem; + color: #000; } .img-table { @@ -276,12 +294,12 @@ h2.secondary-headline, h3.trusted-by { /* knative components container css */ .knative-components-container h1 { - color: #7dc47e; + color: #fff; } .knative-components-container .text-table .normal-text { width: 30%; - text-align: start; + text-align: center; margin-left: 1%; font-size: .8rem; margin-top: -1rem; @@ -311,11 +329,16 @@ h2.secondary-headline, h3.trusted-by { } .trying-it-all-container .md-typeset h2 { - color: #024c93; + color: #000; line-height: 1; margin-bottom: 1rem; } +.why-serverless-container .normal-text, .trying-it-all-container .normal-text { + font-size: 16px; + font-weight: 600; +} + .trying-it-all-container .img-col { place-self: flex-start; } @@ -343,7 +366,8 @@ h2.secondary-headline, h3.trusted-by { } .trying-it-all-container .md-button.call-to-action:hover { - background-color: var(--md-accent-fg-color); + background-color: #013464; + border: 1px solid #024C93; } /* case studies container css */ @@ -352,7 +376,7 @@ h2.secondary-headline, h3.trusted-by { justify-content: center; color: black; display: flex; - background-color: white; + background-color: #F7F7F7; } .case-studies-container h1 { @@ -362,8 +386,9 @@ h2.secondary-headline, h3.trusted-by { .case-studies-container .cases-table { display: flex; justify-content: center; - max-width: 90%; + max-width: 80%; margin: auto; + gap: 20px; } .case-studies-container .logo { @@ -377,6 +402,16 @@ h2.secondary-headline, h3.trusted-by { .case-studies-container .col { min-width: 38%; max-width: 40%; + padding: 16px 0; + background: #fff; + border-radius: 16px; +} + +.case-studies-container .col:hover { +transform: translate3D(0,-1px,0) scale(1.03); /* move up slightly and zoom in */ +box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04); +transition: all .4s ease; /* zoom in */ +cursor: pointer; } .case-studies-container .logo img { @@ -399,16 +434,15 @@ h2.secondary-headline, h3.trusted-by { .case-studies-container .normal-text { text-align: start; padding: 0 2em; - color: #497bb2; + color: #0D4984; font-weight: 600; - font-style: italic; line-height: 1.1; - font-family: serif; + font-family: sans-serif; font-size: .95rem; } .case-studies-container hr { - border-bottom: 2px solid #89c487; + border-bottom: 2px solid #0D4984; display: flow-root; margin: .4em 5em -4px 2em; } @@ -460,7 +494,6 @@ h2.secondary-headline, h3.trusted-by { /* cncf notice container css */ .cncf-notice-container { background-color: white; - padding-top: 0; } .cncf-notice-container h3 { @@ -475,6 +508,20 @@ h2.secondary-headline, h3.trusted-by { margin: 1rem; } +.md-top { + border-radius: 0.4rem; + border: 1px solid #333; + box-shadow: none; +} + +.md-tabs__item{ + font-weight: 600; +} + +.md-tabs__item--active { + font-weight: 700; +} + @media only screen and (max-width: 1219px) { .md-header__topic { margin: 0; diff --git a/overrides/home.html b/overrides/home.html index c635f39915..40fffa982a 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -10,10 +10,10 @@

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

-

- Try the tutorial - Install Knative on your cluster -

+

Trusted by

@@ -176,8 +176,7 @@

Trying it all together

Developers focus on code

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

@@ -189,8 +188,7 @@

Developers focus on code

Scale up and down

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

@@ -202,8 +200,7 @@

Scale up and down

Cloud agnostic

- Control traffic shifting
- for smoother rollouts + Control traffic shifting for smoother rollouts

@@ -273,7 +270,7 @@

functional."

—Noah Fontes,
- Senior Principal Software Engineer for
Puppet + Senior Principal Software Engineer for Puppet

From 662d0edde6c5bf8ba549ed1ca9622bf5f8715a03 Mon Sep 17 00:00:00 2001 From: nafisreza Date: Wed, 22 May 2024 06:39:36 +0600 Subject: [PATCH 2/2] Homepage design issues fixed --- docs/stylesheets/extra.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index f6c12a4905..2f780d0e14 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -138,7 +138,8 @@ a.md-header__button.md-logo img { .md-tabs__list li:nth-last-child(1) a:hover, .md-tabs__list li:nth-last-child(2) a:hover, .md-tabs__list li:nth-last-child(3) a:hover { - color: var(--md-accent-fg-color); + color: #c6deff; + transition: all 0.1s ease-in; } .md-nav__title .md-nav__button.md-logo img,