diff --git a/blog/config/nav.yml b/blog/config/nav.yml index e13251fac..11005bbbf 100644 --- a/blog/config/nav.yml +++ b/blog/config/nav.yml @@ -1,7 +1,6 @@ nav: - - Home: /docs/ - - Tutorial: /docs/getting-started/ - Concepts: /docs/concepts/ + - Tutorial: /docs/getting-started/ - Installing: /docs/install/ - Functions: /docs/functions/ - Serving: /docs/serving/ diff --git a/config/nav.yml b/config/nav.yml index 8ac04c875..223c46151 100644 --- a/config/nav.yml +++ b/config/nav.yml @@ -1,10 +1,6 @@ INHERIT: redirects.yml nav: -############################################################################### - # Home page -############################################################################### - - Home: index.md ############################################################################### # Concepts ############################################################################### diff --git a/docs/images/home-images/blue_autoscaling_icon.svg b/docs/images/home-images/blue_autoscaling_icon.svg deleted file mode 100644 index 4ea3b502d..000000000 --- a/docs/images/home-images/blue_autoscaling_icon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/images/home-images/blue_event_based_icon.svg b/docs/images/home-images/blue_event_based_icon.svg new file mode 100644 index 000000000..b13ab7fe7 --- /dev/null +++ b/docs/images/home-images/blue_event_based_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/images/home-images/blue_event_intergrations_icon.svg b/docs/images/home-images/blue_event_intergrations_icon.svg index 9b0a2f011..799f14c49 100644 --- a/docs/images/home-images/blue_event_intergrations_icon.svg +++ b/docs/images/home-images/blue_event_intergrations_icon.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/docs/images/home-images/blue_functions_icon.svg b/docs/images/home-images/blue_functions_icon.svg new file mode 100644 index 000000000..e5541e859 --- /dev/null +++ b/docs/images/home-images/blue_functions_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/images/home-images/blue_handle_events_icon.svg b/docs/images/home-images/blue_handle_events_icon.svg deleted file mode 100644 index b1ab40b4a..000000000 --- a/docs/images/home-images/blue_handle_events_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/images/home-images/blue_http_first_icon.svg b/docs/images/home-images/blue_http_first_icon.svg new file mode 100644 index 000000000..48b39a50c --- /dev/null +++ b/docs/images/home-images/blue_http_first_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/images/home-images/blue_kubernetes_integrated_icon.svg b/docs/images/home-images/blue_kubernetes_integrated_icon.svg new file mode 100644 index 000000000..be8c9eab7 --- /dev/null +++ b/docs/images/home-images/blue_kubernetes_integrated_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/images/home-images/blue_plugable_icon.svg b/docs/images/home-images/blue_plugable_icon.svg index 3d05873ce..34c5cb482 100644 --- a/docs/images/home-images/blue_plugable_icon.svg +++ b/docs/images/home-images/blue_plugable_icon.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/docs/images/home-images/blue_progressive_rollouts_icon.svg b/docs/images/home-images/blue_progressive_rollouts_icon.svg deleted file mode 100644 index 1c9f97959..000000000 --- a/docs/images/home-images/blue_progressive_rollouts_icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/docs/images/home-images/blue_simple_abstractions_icon.svg b/docs/images/home-images/blue_simple_abstractions_icon.svg deleted file mode 100644 index 8a15db4ea..000000000 --- a/docs/images/home-images/blue_simple_abstractions_icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/docs/images/home-images/hero-bg.svg b/docs/images/home-images/hero-bg.svg new file mode 100644 index 000000000..b946d1346 --- /dev/null +++ b/docs/images/home-images/hero-bg.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/home-images/kelsey.png b/docs/images/home-images/kelsey.png new file mode 100644 index 000000000..ac6ccf137 Binary files /dev/null and b/docs/images/home-images/kelsey.png differ diff --git a/docs/images/home-images/knative_flowchart_graphic.svg b/docs/images/home-images/knative_flowchart_graphic.svg index e51e5bc61..8c66a4041 100644 --- a/docs/images/home-images/knative_flowchart_graphic.svg +++ b/docs/images/home-images/knative_flowchart_graphic.svg @@ -1,80 +1,59 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/home-images/knative_flowchart_graphic_mobile.svg b/docs/images/home-images/knative_flowchart_graphic_mobile.svg deleted file mode 100644 index 178a0055c..000000000 --- a/docs/images/home-images/knative_flowchart_graphic_mobile.svg +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index df29f63b0..9ab19494d 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,9 +1,81 @@ +@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; + --md-primary-bg-color: #ffffff; --nav-item-color: #4d4d4d; --md-footer-bg-color: #081729; + --md-text-font: 'Satoshi'; +} + +header > nav > ul > li { + color: black; + font-weight: bold; +} + +.mr-30 { + margin-right: 30px; } .md-clipboard { @@ -108,37 +180,6 @@ a.md-header__button.md-logo img { font-weight: bold; } -.md-tabs__list li:nth-last-child(3) { - margin-left: auto; -} - -.md-tabs__list li:nth-last-child(1), -.md-tabs__list li:nth-last-child(2), -.md-tabs__list li:nth-last-child(3) { - background-color: var(--md-primary-fg-color--dark); - color: white; - padding: 0 2em; -} -.md-tabs__list li:nth-last-child(3){ -border-radius: 0.7rem 0 0 0 ; -} -.md-tabs__list li:nth-last-child(1){ - border-radius:0 0.7rem 0 0 ; - } - - -.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 { - opacity: 1; -} - -.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); -} - .md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg { width: auto; @@ -170,6 +211,11 @@ border-radius: 0.7rem 0 0 0 ; color: gray; } +#sub-nav li:nth-last-child(3), #sub-nav li:nth-last-child(2), #sub-nav li:nth-last-child(1) { + display: none; +} + + /* bit of a hack to stop the banner taking space when empty */ .md-banner .md-banner__inner { margin: 0 auto; @@ -182,6 +228,7 @@ border-radius: 0.7rem 0 0 0 ; .md-banner .versionwarning h1 { font-weight: bold; + font-size: 20px; } .md-banner .versionwarning p { diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index 30947655d..4a2f4cdcc 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -1,63 +1,51 @@ -.md-main__inner { - margin: 0; +/* General styles */ +body { + color: white; + background: var(--md-primary-fg-color--dark); +} + +/* Utilities */ +.mr-30 { + margin-right: 30px; +} + +.font-bold { + font-weight: bold; +} + +.normal-text { + font-size: 18px; +} + +.italize { + font-style: italic; +} + +.card { + background-color: transparent; + border: 1px solid #dadce0; + border-radius: 0.7rem; + padding: 0px 20px; +} + +.feature { + width: 400px; + min-width: 40%; max-width: 100%; - overflow: hidden; - position: relative; + height: 200px; } -.md-main__inner .md-content__inner, -.md-sidebar--primary:not([hidden])~.md-content>.md-content__inner { - margin: 0; - padding: 0; +.quote { + font-size: 1.5rem; + color: #2270ab; } -.md-main__inner .md-content__inner:before { - display: none; -} - -@media screen and (min-width: 60em) { - .md-sidebar--secondary { - display: none; - } -} - -@media screen and (min-width: 76.25em) { - .md-sidebar--primary { - display: none; - } - - [dir=ltr] .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner { - margin-left: 0; - } -} - -@keyframes continuousgradient { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } -} - -/* containers specific css */ -.headline-section { - text-align: center; -} - -.why-serverless-container, .need-to-know-more-container, -.knative-components-container, .trying-it-all-container, -.whats-next-container, .whats-next-container, -.case-studies-container, .cncf-notice-container { - text-align: center; - padding: 4em 3em; +.quote-author { + font-size: 0.8rem; + letter-spacing: 0.5px; } +/* Homepage-specific styles */ .home-page .md-typeset { font-size: 1rem; line-height: 1.2; @@ -68,7 +56,32 @@ max-width: initial; } -/* home headline section css */ +/* Hero */ +.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; +} + +.headline-section { + text-align: center; +} + +.main-headline { + padding-top: 2rem; + color: black !important; +} + +.call-to-action { + display: inline-flex; + margin-top: 2rem; + gap: 5px; +} + section.home-container { min-height: 435px; justify-content: center; @@ -80,15 +93,10 @@ section.home-container { padding-top: 0; } -.home-container>.md-typeset { +.home-container > .md-typeset { flex-grow: 2; } -body { - color: white; - background: var(--md-primary-fg-color--dark); -} - .home-container .md-button, .home-container .md-button--primary { color: white; @@ -96,10 +104,15 @@ body { font-size: large; padding: 0.525em 1em; min-width: fit-content; - border-radius:8px; + border-radius: 8px; 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); @@ -114,9 +127,20 @@ 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; } .home-container h1 { @@ -127,7 +151,6 @@ h2.secondary-headline, h3.trusted-by { .scroller { max-width: 60vw; - } .scroller__inner { @@ -171,6 +194,10 @@ h2.secondary-headline, h3.trusted-by { } } +.trusted-by-container { + margin-bottom: 40px; +} + .trusted-by-container #usedby { display: flex; justify-content: center; @@ -190,126 +217,80 @@ h2.secondary-headline, h3.trusted-by { max-height: 48; } - .home-container h2 { margin-top: 10px; color: black; font-weight: bold; } -@media screen and (max-width: 768px) { - .home-container { - padding: 1rem; - } - - .home-container .md-button, - .home-container .md-button--primary { - width: 70%; - font-size: medium; - margin: 0.5em 0; - } - - .scroller { - max-width: 90vw; - } +/* Site page styles */ +.md-main__inner { + margin: 0; + max-width: 100%; + overflow: hidden; + position: relative; } -@media screen and (max-width: 480px) { - .home-container h1 { - font-size: 1.5em; - padding: 0.5rem; - } - - .home-container .md-button, - .home-container .md-button--primary { - font-size: small; - } - - .scroller { - max-width: 100vw; - } +.md-main__inner .md-content__inner, +.md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner { + margin: 0; + padding: 0; } +.md-main__inner .md-content__inner:before { + display: none; +} + +/* containers specific css */ +.need-to-know-more-container, +.trying-it-all-container, +.whats-next-container, +.whats-next-container, +.case-studies-container, +.cncf-notice-container { + text-align: center; + padding: 4em 3em; +} /* need to know more section css */ -.need-to-know-more-container, .knative-components-container, +.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 h1, .whats-next-container h1 { - color: white; +.need-to-know-more-container { + padding: 5em 1em 0em 1em; +} + +.need-to-know-more-container h1, +.whats-next-container h1 { + color: var(--md-primary-fg-color--dark); font-size: 2em; } -.need-to-know-more-container .md-button { - margin: 1em 0; - color: white; - border-radius: 0.5rem; - background-color: var(--md-primary-fg-color--light); - border: none; - width: 28%; - font-size: large; - padding: 0.525em 1em; - min-width: fit-content; -} - -@media screen and (max-width: 768px) { - .need-to-know-more-container { - padding: 1.5em 0.5em; - } - - .need-to-know-more-container h1 { - font-size: 1.5em; - } - - .need-to-know-more-container .md-button { - width: 70%; - font-size: large; - } - - .normal-text { - font-size: 1em; - line-height: 1.5em; - } - - .br{ - display: none; - } - -} - -@media screen and (max-width: 480px) { - .need-to-know-more-container { - padding: 1em 0.5em; - } - - .need-to-know-more-container h1 { - font-size: 1.2em; - } - - .need-to-know-more-container .md-button { - font-size: medium; - padding: 4px 1.5em; - } - - .normal-text { - font-size: 0.9em; - line-height: 1.4em; - } -} - /* why serverless container css */ -.why-serverless-container, .trying-it-all-container { - background-color: white; - color: var(--md-primary-fg-color--light); - padding: 2em 1em; - text-align: center; +.serverless-outer { + background-color: #fff; } -.why-serverless-container h1, .trying-it-all-container h1, +.why-serverless-container { + display: flex; + justify-content: space-between; +} + +.why-serverless-container, +.trying-it-all-container { + margin-top: -2px; + background-color: white; + color: var(--nav-item-color); + padding: 8em 1em; +} + +.why-serverless-container h1, +.trying-it-all-container h1, .case-studies-container h1 { color: var(--md-primary-fg-color--dark); font-size: 2em; @@ -332,6 +313,19 @@ h2.secondary-headline, h3.trusted-by { 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; +} + .img-table { margin: 1rem auto -1rem; } @@ -354,9 +348,9 @@ h2.secondary-headline, h3.trusted-by { } .img-wrapper { - position: relative; - width: 120px; - height: 120px; + display: flex; + justify-content: end; + margin-top: 15px; } .reason-img img { @@ -373,85 +367,16 @@ h2.secondary-headline, h3.trusted-by { transform: scale(1.15); } -.reason-text h2{ - font-size:24px; - color:black; - margin:4px; +.reason-text h2 { + font-size: 24px; + color: black; + margin: 4px 0px; font-weight: bold; } -.normal-text{ - font-size: 18px; -} - -@media screen and (max-width: 768px) { - .why-serverless-container h1 { - font-size: 1.5em; - } - - .why-serverless-container .normal-text-head { - font-size: 0.9rem; - margin-bottom: 4rem; - } - - .img-row { - flex-direction: row; - flex-wrap: wrap; - } - - .img-col { - flex: 1 1 45%; - max-width: 45%; - margin:0; - } - - .img-wrapper { - width: 100px; - height: 100px; - } -} - -@media screen and (max-width: 480px) { - .why-serverless-container h1 { - font-size: 1.2em; - } - - .why-serverless-container .normal-text-head { - font-size: 0.8rem; - } - - .img-row { - flex-direction: column; - } - - .img-col { - flex: 1 1 100%; - max-width: 100%; - } - - .img-wrapper { - width: 80px; - height: 80px; - } -} - /* knative components container css */ .knative-components-container h1 { - color: white; -} - -.knative-components-container .text-table .normal-text { - width: 30%; - text-align: start; - margin-left: 1%; - font-size: .8rem; - margin-top: -1rem; - text-align: center; -} - -.knative-components-container .text-table .normal-text:last-child { - padding-left: 2em; - margin-left: 32%; + color: var(--md-primary-fg-color--dark); } .knative-components-container .components-content .components-img { @@ -459,169 +384,58 @@ h2.secondary-headline, h3.trusted-by { padding: 2em; } -.text-table { - display: flex; - max-width: 80%; - margin: auto; - padding: 0 2.5em; - align-items: center; - justify-content: center; -} - -.knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{ - display: none; -} - -@media only screen and (max-width: 425px){ - - .knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{ - display: block; - } - - .text-table { - display: none; - } - - .components-img { - display: none; - } - -.knative-components-container-mobile { - position: relative; - width: 80%; - max-width: 1200px; - padding: 20px; -} - -.text-upper-right { - position: absolute; - top: 20px; - right: -75px; - width: 180px; - font-size: 12px; -} - -.text-lower-left { - position: absolute; - bottom: 50px; - width: 165px; - left: -10px; - font-size: 12px; -} - -.svg-diagram img { - width: 120%; - height: auto; - display: flex; - justify-content: center; - align-items: center; -} -} - -@media only screen and (max-width: 375px){ - -.text-upper-right { - position: absolute; - top: 20px; - right: -75px; - width: 165px; - font-size: 10px; -} - -.text-lower-left { - position: absolute; - bottom: 50px; - width: 150px; - left: -10px; - font-size: 10px; -} - -.svg-diagram img { - width: 120%; - height: auto; - display: flex; - justify-content: center; - align-items: center; -} -} -/* trying it all container css */ -.trying-it-all-container .reason-img img{ -position: relative; -} - -.trying-it-all-container .reason-img { - margin: auto; - height: 130px; -} - -.trying-it-all-container .md-typeset h2 { - color: black; - line-height: 1; - margin-bottom: 1rem; -} - -.trying-it-all-container .img-col { - place-self: flex-start; -} - -.trying-it-all-container .img-col:first-child img { - height: 106px; - margin-top: 10px; -} - -.trying-it-all-container .img-col img { - height: 130px; - width: 100%; -} - -.trying-it-all-container .img-col:last-child img { - height: 94px; - margin-top: 20px; -} - -.trying-it-all-container .md-typeset .md-button.call-to-action { - background-color: var(--md-primary-fg-color--dark); - color: white; - margin-top: 3rem; - border-radius: 8px; - width: 28%; - font-size: large; - padding: 0.525em 1em; - min-width: fit-content; -} - -.trying-it-all-container .md-button.call-to-action:hover { - background-color: var(--md-accent-fg-color); -} - -@media screen and (max-width: 768px){ - .trying-it-all-container .md-typeset .md-button.call-to-action{ - width:70%; - } +div.components-content { + border: 1px solid #dadce0; + border-radius: 0.7rem; + padding: 0px 20px; + margin: 0 50px; } /* case studies container css */ -.case-studies-container { - text-align: center; - justify-content: center; - color: black; +.kelsey-testimonial { display: flex; - background-color: var(--md-primary-fg-color); - padding: 1rem; - cursor: pointer; - flex-wrap: wrap; - padding-bottom: 0; + justify-content: center; + align-items: center; + padding: 3rem 1rem; + margin-top: 2rem; + margin-right: 50px; + margin-left: 50px; + gap: 30px; + text-align: start; + color: var(--md-primary-fg-color--dark); + font-weight: 600; + line-height: 1.2; + font-size: 0.95rem; } -.md-typeset>h1:first-of-type { - margin:0; +.kelsey-testimonial > img { + box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .1); + border-radius: 50%; +} + +.md-typeset > h1:first-of-type { + margin: 0; +} + +.case-studies-container { + text-align: center; + color: var(--nav-item-color); + background-color: white; + padding: 1rem; + padding-bottom: 0; + padding-top: 4rem; +} + +.case-studies-container > a:first-of-type { + text-decoration: none; + cursor: pointer; } .case-studies-container .cases-table { display: flex; justify-content: center; max-width: 100%; - align-items: stretch; + align-items: stretch; margin: 1rem; margin-top: 0; align-items: center; @@ -630,28 +444,25 @@ position: relative; .case-studies-container .cases-table a { text-decoration: none; cursor: pointer; - flex: 1 1 25vw; - min-width: 300px; + flex: 1 1 25vw; + min-width: 300px; max-width: 25vw; margin: 1rem; } .case-studies-container .cases-table .col { - background-color: white; padding: 1.5rem; margin: 1rem 0.5rem; - border-radius: 0.7rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; transition: border 0.3s ease-in-out; - border: 2px solid transparent; - height: 100%; + height: 100%; } -.case-studies-container .cases-table .col:hover { - border: 2px solid gray; +.case-studies-container .cases-table .col:hover, .kelsey-testimonial:hover { + border: 1.2px solid gray; } .case-studies-container .logo { @@ -677,142 +488,19 @@ position: relative; color: var(--md-primary-fg-color--dark); font-weight: 600; line-height: 1.2; - font-size: .95rem; + font-size: 0.95rem; } -.case-studies-container hr { - border-bottom: 2px solid black; - display: flow-root; - margin: .4em 5em -4px 2em; +#pnc-testimonial { + padding: 1rem 1.5rem; } -/* Responsive Styles */ - -@media (max-width: 1370px) { - .case-studies-container .cases-table a { - flex: 1 1 30vw; - min-width: 300px; - max-width: 30vw; - } +.md-typeset .md-button.black { + color: black; } -@media (max-width: 1200px) { - .case-studies-container .cases-table{ - flex-wrap: wrap; - } - .case-studies-container .cases-table a { - flex: 1 1 40vw; - min-width: 300px; - max-width: 40vw; - } -} - -@media (max-width: 992px) { - .case-studies-container .cases-table a { - flex: 1 1 50vw; - min-width: 300px; - max-width: 50vw; - } -} - -@media (max-width: 800px) { - .case-studies-container .cases-table { - justify-content: center; - align-items: center; - max-width: 100%; - } - - .case-studies-container .cases-table .col{ - max-width: 50%; - } - - .case-studies-container .cases-table a { - display: flex; - flex: 1 1 90vw; - min-width: 350px; - max-width: 90vw; - justify-content: center; - margin:0.5rem auto; - } -} - -@media (max-width: 600px) { - .case-studies-container .cases-table a { - flex: 1 1 90vw; - min-width: 650px; - max-width: 90vw; - } - - .case-studies-container .logo { - padding: 0 1em; - padding-top: 1rem; - } - - .case-studies-container hr { - margin: .4em 2em -4px 1em; - } - - .case-studies-container .normal-text { - padding: 0 1em; - } -} - -@media (max-width: 375px){ - .case-studies-container .cases-table a { - flex: 1 1 90vw; - min-width: 350px; - max-width: 90vw; - } - - .case-studies-container .cases-table .col{ - max-width: 90%; - } -} - -/* whats next container css */ -.whats-next-container .component-flex { - display: flex; - gap: 2em; - padding-top: 1em; -} - -.whats-next-container h1 { - margin: 0; -} - -.whats-next-container h2 { +.md-typeset .md-button.black:hover { color: white; - font-size: 1.3rem; - margin: .6em 0 0; - font-weight: bold; -} - -.whats-next-container .normal-text { - font-weight: 500; - font-size: .8em; - padding-top: 0; - color: white; -} - -.whats-next-container .twemoji { - color: white; - justify-content: center; -} - -.whats-next-container .twemoji, -.whats-next-container .twemoji svg { - height: 3.5em; - width: 3.5em; -} - -.whats-next-container .twemoji svg:hover { - color: #7cc57c; -} - -.whats-next-logo{ - display: flex; - justify-content: center; - gap: 50px; } .md-typeset .md-button.white { @@ -836,59 +524,349 @@ position: relative; margin: 1rem; } -@media only screen and (max-width: 800px) { - .component-flex, .case-studies-container .cases-table { +/* No next/prev links on home page so make sure next/prev area of footer collapses nicely */ +footer nav.md-footer__inner { + padding: 0; +} + +.md-footer-meta { + padding: 1em 0; +} + +.md-footer-copyright { + margin-right: 18px; +} + +/* Media queries (Responsive Styles) */ + +/* hero */ +@media screen and (max-width: 334px) { + .hero { + height: 30rem; + } +} + +@media screen and (max-width: 254px) { + .hero { + height: 35rem; + } +} + +/* sidebar styles */ +@media screen and (min-width: 60em) { + .md-sidebar--secondary { + display: none; + } +} + +@media screen and (min-width: 76.25em) { + .md-sidebar--primary { + display: none; + } + + [dir="ltr"] + .md-sidebar--primary:not([hidden]) + ~ .md-content + > .md-content__inner { + margin-left: 0; + } +} + +@keyframes continuousgradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +/* home headline section css */ +@media screen and (max-width: 768px) { + .home-container { + padding: 1rem; + } + + .home-container .md-button, + .home-container .md-button--primary { + width: 70%; + font-size: medium; + margin: 0.5em 0; + } + + .scroller { + max-width: 90vw; + } +} + +@media screen and (max-width: 480px) { + .main-headline { + font-size: 1.5rem !important; + } + + .h2.secondary-headline { + font-size: 0.7rem; + } + + .call-to-action { + flex-direction: column-reverse; + margin-top: 1rem; + } + + .home-container h1 { + font-size: 1.5em; + padding: 0.5rem; + } + + .home-container .md-button, + .home-container .md-button--primary { + font-size: small; + } + + .scroller { + max-width: 100vw; + } +} + +@media screen and (max-width: 768px) { + .need-to-know-more-container { + padding: 1.5em 0.5em; + } + + .need-to-know-more-container h1 { + font-size: 1.5em; + } + + .need-to-know-more-container .md-button { + width: 70%; + font-size: large; + } + + .normal-text { + font-size: 1em; + line-height: 1.5em; + } + + .br { + display: none; + } +} + +@media screen and (max-width: 480px) { + .need-to-know-more-container { + padding: 1em 0.5em; + } + + .need-to-know-more-container h1 { + font-size: 1.2em; + } + + .need-to-know-more-container .md-button { + font-size: medium; + padding: 4px 1.5em; + } + + .normal-text { + font-size: 0.9em; + line-height: 1.4em; + } +} + +@media screen and (max-width: 768px) { + .serverless-content-block { + text-align: center; + } + + .why-serverless-container { + flex-direction: column; + } + + .why-serverless-container h1 { + font-size: 1.5em; + } + + .why-serverless-container .normal-text-head { + font-size: 0.9rem; + margin-bottom: 4rem; + } + + .img-row { + flex-direction: row; flex-wrap: wrap; } - .knative-components-container .text-table .normal-text { - width: 80%; - text-align: center; + .img-col { + flex: 1 1 45%; + max-width: 45%; + margin: 0; } - .knative-components-container .text-table .normal-text:first-child { - margin-left: -15%; + .img-wrapper { + width: 100px; + height: 100px; } +} - .knative-components-container { +@media screen and (max-width: 480px) { + .why-serverless-container { + flex-direction: column; padding: 3em 1em; } + .why-serverless-container h1 { + font-size: 1.2em; + } + + .why-serverless-container .normal-text-head { + font-size: 0.8rem; + } + + .img-row { + flex-direction: column; + } + + .img-col { + flex: 1 1 100%; + max-width: 100%; + } + + .img-wrapper { + width: 60px; + height: 60px; + } +} + +/* case studies container css */ +@media (max-width: 1370px) { + .case-studies-container .cases-table a { + flex: 1 1 30vw; + min-width: 300px; + max-width: 30vw; + } +} + +@media (max-width: 1200px) { + .case-studies-container .cases-table { + flex-wrap: wrap; + } + .case-studies-container .cases-table a { + flex: 1 1 40vw; + min-width: 300px; + max-width: 40vw; + } +} + +@media (max-width: 992px) { + .case-studies-container .cases-table a { + flex: 1 1 50vw; + min-width: 300px; + max-width: 50vw; + } +} + +@media (max-width: 800px) { + .case-studies-container .cases-table { + justify-content: center; + align-items: center; + max-width: 100%; + } + + .case-studies-container .cases-table .col { + max-width: 50%; + } + + .case-studies-container .cases-table a { + display: flex; + flex: 1 1 90vw; + min-width: 350px; + max-width: 90vw; + justify-content: center; + margin: 0.5rem auto; + } +} + +@media (max-width: 600px) { + .case-studies-container { + padding-top: 2.5rem; + } + + .case-studies-container .cases-table a { + flex: 1 1 90vw; + min-width: 650px; + max-width: 90vw; + } + + .case-studies-container .logo { + padding: 0 1em; + padding-top: 1rem; + } + + .case-studies-container hr { + margin: 0.4em 2em -4px 1em; + } + + .case-studies-container .normal-text { + padding: 0 1em; + } + + .kelsey-testimonial { + flex-direction: column; + margin-left: 0px; + margin-right: 0px; + text-align: center; + } +} + +@media (max-width: 375px) { + .case-studies-container .cases-table a { + flex: 1 1 90vw; + min-width: 350px; + max-width: 90vw; + } + + .case-studies-container .cases-table .col { + max-width: 90%; + } +} + +@media only screen and (max-width: 800px) { + .knative-components-container { + padding: 2em 1em; + } + .knative-components-container .components-content .components-img { max-width: 100%; } } -/* No next/prev links on home page so make sure next/prev area of footer collapses nicely */ -footer nav.md-footer__inner { - padding: 0; +@media (max-width: 600px) { + .knative-components-container .components-content .components-img { + padding: 10px 5px; + } } -.md-footer-meta{ - padding: 1em 0; -} - -.md-footer-copyright{ - margin-right: 18px; -} - -@media (max-width: 1024px){ +@media (max-width: 1024px) { .md-header__topic { margin: 0; } - .md-footer-copyright{ + .md-footer-copyright { margin: auto; text-align: center; } - .md-social{ + .md-social { margin: auto; } } @media (max-width: 861px) { - .md-footer-meta{ + .md-footer-meta { flex-direction: column; } @@ -917,7 +895,7 @@ footer nav.md-footer__inner { flex-wrap: wrap; } - .md-footer-copyright a{ + .md-footer-copyright a { margin: 8px; } @@ -931,7 +909,7 @@ footer nav.md-footer__inner { margin-top: 1rem; } - .pipe{ - display:none; + .pipe { + display: none; } } diff --git a/overrides/home.html b/overrides/home.html index b039b238d..4e51a362f 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -2,332 +2,395 @@
-
-
-
+
+
+

- Knative is an Open-Source Enterprise-level
- solution to build Serverless and Event Driven Applications + Providing the building blocks for
+ creating modern, cloud-based applications

-

- Try the tutorial - Install Knative on your cluster +

+ 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

-
-
- -
-
-
-
- -
-
-
+
+

Trusted by

+
+
+
+
+
+
+
-

Need to know more?

+

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.

- - Explore Knative - +
- -
-
-

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 -

-
+
+
+
+

Why serverless containers?

+

+ Express scalable application architecture without distractions. + Serverless gives you a vocabulary for expressing web and event-based + applications without getting mired in the details of scaling and + infrastructure libraries. Behind the scenes, Knative optimizes your + deployment to match demand. +

+
+
+
+
+
-
-
-
- -
-
-
-

Autoscaling

-

- Scale down to zero and up from zero -

-
-
-
-
-
- -
-
-
-

Progressive Rollouts

-

- Choose your rollout strategy depending on your needs -

-
+
+

Functions

+

+ Application template patterns you can version and update +

-
-
-
-
- -
-
-
-

Event Integrations

-

- Handle events from many sources -

-
+
+
+
-
-
-
- -
-
-
-

Handle Events

-

- Trigger handlers from the event broker -

-
+
+

HTTP-first

+

Serve and scale HTTP/2, gRPC, and MCP

-
-
-
- -
-
-
-

Plugable

-

- Kubernetes native to be integrated and extended -

-
+
+
+
+ +
+
+

Event-based

+

+ Route and handle asynchronous events just like HTTP +

+
+
+
+
+ +
+
+

Event Integrations

+

+ Extract events from existing services or define your own +

+
+
+
+
+ +
+
+

Kubernetes-integrated

+

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. -

-

- 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.

-
-
- -
-
-

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.

-
-
-
- -
-
-

Trying it all together

-
-
-
-
- -
-
-

Developers focus on code

-

- From container to URL
- with less YAML config -

-
-
- -
-
- -
-
-

Scale up and down

-

- Scale down to zero
- based on traffic patterns -

-
-
- -
-
- -
-
-

Cloud agnostic

-

- Control traffic shifting
- for smoother rollouts -

-
-
-
-
- - Deploy Knative Today - -
-

- Case Studies -

+

Case Studies & Testimonies

+ +
+ Kelsey Hightower +
+

+ "If you want to build a + function-as-a-service, then you can build on top of knative, which + has a serving framework, meaning when a request comes in you can + scale a workload up and down on demand." +

+

— Kelsey Hightower

+
+
+
-
+
-

- "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() }}