From 234a6a90b7105c54acf4d5e70817ef8ce15c1d38 Mon Sep 17 00:00:00 2001 From: Gabriel Freites Date: Thu, 13 May 2021 07:34:48 -0500 Subject: [PATCH] feat: added home and navigation menu changes (#3571) --- docs/stylesheets/extra.css | 18 +- overrides/assets/stylesheets/home.css | 187 +++++++++++++++ overrides/home.html | 313 ++++++++------------------ 3 files changed, 299 insertions(+), 219 deletions(-) create mode 100644 overrides/assets/stylesheets/home.css diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 4ff079abe..673b6538b 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,11 +1,13 @@ :root { - --md-primary-fg-color: #1a7dc9; - --home-color: #0071c7; + --md-primary-fg-color: #1a7dc9; + --home-color: #0071c7; } .md-clipboard { color: var(--md-primary-fg-color); } -.highlight.no-copy .md-clipboard { display: none; } +.highlight.no-copy .md-clipboard { + display: none; +} .md-header__button.md-logo img { width: 3rem; @@ -20,3 +22,13 @@ background: var(--home-color); float: right; } + +.md-nav__item--nested > .md-nav__link, +.md-nav__item--nested a.md-nav__link { + color: black; +} + +.md-nav__title .md-nav__button.md-logo img, +.md-nav__title .md-nav__button.md-logo svg { + width: auto; +} diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css new file mode 100644 index 000000000..7f3532a86 --- /dev/null +++ b/overrides/assets/stylesheets/home.css @@ -0,0 +1,187 @@ +.md-main__inner { + margin: 0; + max-width: 100%; +} + +.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; +} + +@media screen and (min-width: 60em) { + .md-sidebar--secondary { + display: none; + } +} +@media screen and (min-width: 76.25em) { + .md-sidebar--primary { + display: none; + } +} + +@keyframes continuousgradient { + from { + background-position: 0% 50%; + } + to { + background-position: 100% 50%; + } +} + +.animated-gradient { + animation-name: continuousgradient; + background: linear-gradient(-45deg, #6593c8, #0366ad, #000, #6593c8, #0366ad, #000); + animation-duration: 6s; + animation-iteration-count: infinite; + animation-timing-function: linear; + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + background-repeat: no-repeat; + background-size: 300% 100%; + opacity: 0.4; + z-index: -1; +} + +.md-typeset img, +.md-typeset svg { + max-width: initial; +} + +section.home-container { + min-height: 435px; + justify-content: center; + color: #fff; + position: relative; + display: flex; + align-items: center; + padding-bottom: 0; + padding-top: 0; +} + +.home-container > .md-typeset { + flex-grow: 2; +} + +body { + color: #fff; + background: var(--md-primary-fg-color); + background: #5063d0; + background: #0071c7; + background: var(--home-color); +} + +.calltoaction-container, +.usedby-container, +.home-container, +.features-container, +.intro-container { + margin: 0; + border: 0; + padding-bottom: 4em; +} + +@media only screen and (max-width: 1240px) { + .components-container, + .calltoaction-container, + .usedby-container, + .home-container, + .features-container, + .intro-container { + padding: 40px; + } + + .rocket { + left: -190px; + } + + .intro-container { + padding-left: 180px; + } +} + +@media only screen and (max-width: 800px) { + .component-flex { + flex-wrap: wrap; + } + + .col { + min-width: 100%; + } +} + +.home-container .md-button { + margin-top: 0.5rem; + margin-right: 0.5rem; + color: var(--md-primary-bg-color); +} + +.home-container .md-button--primary { + background-color: var(--md-primary-bg-color); + color: hsla(280deg, 37%, 48%, 1); + border-color: var(--md-primary-bg-color); +} + +.home-container h1 { + color: #fff; + font-weight: bolder; + margin-top: 1em; + margin-bottom: 0; +} + +.home-container h2 { + margin: 0; +} + +.calltoaction-container { + color: #fff; + background: #1b2f52; +} + +.usedby-container { + background: #fff; + color: #000; + display: flex; + justify-content: center; + padding-bottom: 6em; + padding-top: 2em; +} + +.components-container { + padding-bottom: 6em; + padding-top: 4em; +} + +.features-container { + color: #000; + background: #114678; + background: #28477a; + background: #1b2f52; + background: #fff; + padding-bottom: 6em; + padding-top: 2em; +} + +.col { + width: 25%; + margin: 2em; + display: flex; + justify-content: center; + flex-direction: column; +} + +.logo { + display: flex; + justify-content: center; + align-items: center; + margin: 1.2em; +} diff --git a/overrides/home.html b/overrides/home.html index 5b22392b0..a330640aa 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -1,261 +1,145 @@ -{% extends "main.html" %} - -{% block tabs %} - {{ super() }} - - +{% extends "main.html" %} {% block content %} + +
- +

Enterprise-grade Serverless on your own terms.

Kubernetes-based platform to deploy and manage modern serverless workloads.

-

- - Get Started - - - Custom YAML-Based Install - - - 💻   Try in your Browser › - + + Get Started + + Custom YAML-Based Install + + 💻   Try in your Browser › + +

+
-

Highlights

-
    -
  • - - - Stand up a scalable, secure, stateless services in seconds. -
    • -
  • Focused API with higher level abstractions for common app use-cases.
    • -
  • Pluggable components let you bring your own logging and monitoring, networking, and service mesh.
    • -
  • Run Knative anywhere Kubernetes runs, never worry about vendor lock-in.
    • -
  • Seamless developer experience, supports GitOps, DockerOps, ManualOps, etc..
    • -
  • Supports many common tools and - frameworks such as Django, Ruby on Rails, Spring, and many more.
    • -
+

Highlights

+
    +
  • + + + Stand up a scalable, secure, stateless services in seconds. +
    • +
  • + Focused API with + higher level abstractions for common app use-cases. +
    • +
  • + Pluggable components let you bring your own logging and monitoring, networking, and service mesh. +
    • +
  • + Run Knative anywhere + Kubernetes runs, never worry about vendor lock-in. +
    • +
  • + Seamless developer experience, supports GitOps, DockerOps, ManualOps, etc.. +
    • +
  • + Supports many common tools and frameworks such as Django, Ruby on Rails, Spring, and many more. +
    • +
+
-
- -
-

Make your developers more productive

-

Knative components build on top of Kubernetes, abstracting away - the complex details and enabling developers to focus on what matters. - Built by codifying the best practices shared by successful real-world - implementations, Knative solves the "boring but difficult" parts of - deploying and managing cloud native services so you don't have to. -

-
-
+
+ +
+

Make your developers more productive

+

+ Knative components build on top of Kubernetes, + abstracting away the complex details and enabling developers to focus on what matters. Built by + codifying the best practices shared by successful real-world implementations, Knative solves the "boring but + difficult" parts of deploying and managing cloud native services so you don't have to. +

+
+
+
-

Trusted by:

+

Trusted by:

- +
+

Knative Components

-
-
- -

Run serverless containers on Kubernetes with ease, Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking. You just have to focus on your core logic.

-
-
- -

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

-
-
+
+
+ +

+ Run serverless containers on Kubernetes with ease, Knative takes care of the details of networking, + autoscaling (even to zero), and revision tracking. You just have to focus on your core logic. +

+
+
+ +

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

+
+
+

What's Next?

@@ -278,11 +162,8 @@
- - {% endblock %} - - -{% block content %}{% endblock %} + +{% endblock %} {% block footer %}{% endblock %}