fix: issue #212 - problem width page width on mobile devices

Author: dropclick

preview-src/index.adoc

@@ -1,14 +1,8 @@
 = Stackable Documentation
-Author Name
-#:page-layout: landing
-:idprefix:
-:idseparator: -
-:!example-caption:
-:!table-caption:
-:page-pagination:
+:page-layout: landing
 
 Welcome to Stackable!
-This documentation gives you an overview of our platform, how to install and manage it as well as some tutorials.
+This documentation gives you an overview of the Stackable Data Platform, how to install and manage it as well as some tutorials.
 
 ++++
 <br>
@@ -26,14 +20,11 @@ This documentation gives you an overview of our platform, how to install and man
 <h3>Introduction</h3>
 ++++
 
-If you have any feedback regarding the documentation please either open an https://github.com/stackabletech/documentation/issues[issue], ask a https://github.com/stackabletech/documentation/discussions[question] or look at the source for this documentation in its https://github.com/stackabletech/documentation[repository].
-
-Our Stackable platform allows you to deploy, scale and manage Big Data infrastructure in any environment as long as it can run https://kubernetes.io/[Kubernetes].
+The Stackable Data Platform allows you to deploy, scale and manage Data infrastructure in any environment running https://kubernetes.io/[Kubernetes].
 
+You can find an overview of the supported components <<Components,below>>, as we as a full list of all supported product versions xref:operators:supported_versions.adoc[here].
 
-IMPORTANT: Our platform used to be based on a different architecture (until November 2021) where we built an alternative Kubelet. We abandoned that effort for now and are moving towards a Kubernetes-native experience using the normal `kubelet`.
-This is an ongoing effort and the documentation might not reflect reality everywhere.
-We aim to update our platform as well as the documentation by the end of 2021 and will remove this note when the migration has completed.
+If you have any feedback regarding the documentation please either open an https://github.com/stackabletech/documentation/issues[issue], ask a https://github.com/stackabletech/documentation/discussions[question] or look at the source for this documentation in its https://github.com/stackabletech/documentation[repository].
 
 ++++
 </div>
@@ -54,7 +45,7 @@ While the platform got started in the _Big Data_ ecosystem we are in no way limi
 
 You can declaratively build these environments, and we don't stop at the tool level as we also provide ways for the users to interact with the platform in the "as Code"-approach.
 
-We are leveraging the https://www.openpolicyagent.org/[OpenPolicyAgent] to provide Authorization-as-Code.
+We are leveraging the https://www.openpolicyagent.org/[Open Policy Agent] to provide Security-as-Code.
 
 We are building a distribution that includes the “best of breed” of existing Open Source tools, but bundles them in a way, so it is easy to deploy a fully working stack of software. Most of the existing tools are “single purpose” tools, which often do not play nicely together out-of-the-box.
 
@@ -70,7 +61,8 @@ We are building a distribution that includes the “best of breed” of existing
 
 We are using Kubernetes as our deployment platform.
 And we're building https://kubernetes.io/docs/concepts/extend-kubernetes/operator/[Operators] for each of the products we support.
-At the moment we support the following products (i.e. we have operators for each of those):
+
+The Stackable Data Platform supports the following products:
 
 ++++
 <br>
@@ -85,12 +77,60 @@ At the moment we support the following products (i.e. we have operators for each
 ++++
 
 ++++
-<h3>Kafka Operator</h3>
+<h3>Apache Airflow</h3>
+++++
+
+Airflow is a workflow engine and your replacement should you be using Apache Oozie.
+
+xref:airflow::index.adoc[Read more]
+
+++++
+</div>
+++++
+
+++++
+<div class="box">
+++++
+
+++++
+<h3>Apache Druid</h3>
+++++
+
+Apache Druid is a real-time database to power modern analytics applications.
+
+xref:druid::index.adoc[Read more]
+
+++++
+</div>
+++++
+
+++++
+<div class="box">
+++++
+
+++++
+<h3>Apache HBase</h3>
+++++
+
+HBase is a distributed, scalable, big data store.
+
+xref:hbase::index.adoc[Read more]
+
+++++
+</div>
+++++
+
+++++
+<div class="box">
+++++
+
+++++
+<h3>Apache Hadoop HDFS</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+HDFS is a distributed file system that provides high-throughput access to application data.
 
-link:/kafka/index.html[Read more]
+xref:hdfs::index.adoc[Read more]
 
 ++++
 </div>
@@ -101,12 +141,12 @@ link:/kafka/index.html[Read more]
 ++++
 
 ++++
-<h3>Spark Operator</h3>
+<h3>Apache Hive</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+The Apache Hive data warehouse software facilitates reading, writing, and managing large datasets residing in distributed storage using SQL. We support the Hive Metastore.
 
-link:/spark/index.html[Read more]
+xref:hive::index.adoc[Read more]
 
 ++++
 </div>
@@ -117,12 +157,12 @@ link:/spark/index.html[Read more]
 ++++
 
 ++++
-<h3>Trino Operator</h3>
+<h3>Apache Kafka</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications.
 
-link:/trino/index.html[Read more]
+xref:kafka::index.adoc[Read more]
 
 ++++
 </div>
@@ -133,12 +173,12 @@ link:/trino/index.html[Read more]
 ++++
 
 ++++
-<h3>Zookeeper Operator</h3>
+<h3>Apache NiFi</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+An easy to use, powerful, and reliable system to process and distribute data.
 
-link:/zookeeper/index.html[Read more]
+xref:nifi::index.adoc[Read more]
 
 ++++
 </div>
@@ -149,12 +189,12 @@ link:/zookeeper/index.html[Read more]
 ++++
 
 ++++
-<h3>NiFi Operator</h3>
+<h3>Apache Spark</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Apache Spark is a multi-language engine for executing data engineering, data science, and machine learning on single-node machines or clusters.
 
-link:/nifi/index.html[Read more]
+xref:spark-k8s::index.adoc[Read more]
 
 ++++
 </div>
@@ -165,17 +205,50 @@ link:/nifi/index.html[Read more]
 ++++
 
 ++++
-<h3>Superset Operator</h3>
+<h3>Apache Superset</h3>
 ++++
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Apache Superset is a modern data exploration and visualization platform.
 
-link:/superset/index.html[Read more]
+xref:superset::index.adoc[Read more]
 
 ++++
 </div>
 ++++
 
+++++
+<div class="box">
+++++
+
+++++
+<h3>Trino</h3>
+++++
+
+Fast distributed SQL query engine for big data analytics that helps you explore your data universe.
+
+xref:trino::index.adoc[Read more]
+
+++++
+</div>
+++++
+
+++++
+<div class="box">
+++++
+
+++++
+<h3>Apache ZooKeeper</h3>
+++++
+
+ZooKeeper is a centralized service for maintaining configuration information, naming, providing distributed synchronization, and providing group services.
+
+xref:zookeeper::index.adoc[Read more]
+
+++++
+</div>
+++++
+
+
 ++++
 </div>
 ++++

src/css/base.css

@@ -118,10 +118,16 @@ body ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-color);
 }
 
-.container {
-  display: flex;
-  position: relative;
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
+@media screen and (min-width: 1024px) {
+  .container {
+    display: flex;
+    position: relative;
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
 }
+
+
+
+

src/css/landing.css

@@ -1,33 +1,35 @@
-.boxes {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
+@media screen and (min-width: 768px) {
+  .boxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 
-.box {
-  flex: 0 30%;
-  min-height: 200px;
-  margin-bottom: 2%; /* (200-32*3)/2 */
-}
+  .box {
+    flex: 0 30%;
+    min-height: 200px;
+    margin-bottom: 2%; /* (200-32*3)/2 */
+  }
 
-.boxes.two-column .box {
-  flex: 0 48%;
-}
+  .boxes.two-column .box {
+    flex: 0 48%;
+  }
 
-.box h3 {
-  display: inline-block;
-}
+  .box h3 {
+    display: inline-block;
+  }
 
-.box div {
-  display: inline-block;
-}
+  .box div {
+    display: inline-block;
+  }
 
-.box p {
-  display: inline-block;
-}
+  .box p {
+    display: inline-block;
+  }
 
-.box .admonitionblock {
-  margin-top: 2.8rem;
+  .box .admonitionblock {
+    margin-top: 2.8rem;
+  }
 }
 
 @media screen and (max-width: 1023.5px) {
@@ -36,8 +38,3 @@
   }
 }
 
-@media screen and (max-width: 768px) {
-  .box {
-    flex: 0 100% !important;
-  }
-}