diff --git a/docs/images/home-images/knative_flowchart_graphic_mobile.svg b/docs/images/home-images/knative_flowchart_graphic_mobile.svg new file mode 100644 index 0000000000..178a0055c9 --- /dev/null +++ b/docs/images/home-images/knative_flowchart_graphic_mobile.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index 1ed4fdc4e0..d374b6ab25 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -329,6 +329,82 @@ h2.secondary-headline, h3.trusted-by { 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; diff --git a/overrides/home.html b/overrides/home.html index bbbb18dcc8..3f696f1dcc 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -174,6 +174,17 @@

Knative Components

+
+
+

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.

+
+