Initial implementation of keep-in-touch section

Signed-off-by: Raul Kele <[email protected]>

Author: raulkele

docs/stylesheets/custom.css

@@ -1,3 +1,4 @@
+/* General css */
 .default-bg {
   background: none!important;
   background-color: var(--md-default-bg-color)!important; 
@@ -14,6 +15,8 @@
 
 }
 
+/* Card related css */
+
 .centered-content-grid ul.centered-content-grid__list {
   display: flex;
   flex-flow: row wrap;
@@ -22,29 +25,60 @@
   margin: 0;
 }
 
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item {
   display: flex;
   flex: 1 0 48%;
   gap: 0.6rem;
   margin: 0;
 }
-
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content{
-  color: var(--md-typeset-color)!important;
-}
-
-
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content h2.card_title{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content .card_title {
   font-weight: 700;
   margin-top: 0.175em;
 }
 
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.content_icon{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.content_icon {
   fill: currentcolor;
   background-color: var(--md-default-fg-color--lightest);
   border-radius: 100%;
   flex-shrink: 0;
   height: 2.2rem;
   padding: 0.55rem 0.4rem 0.4rem 0.4rem;
   width: 2.2rem;
+}
+
+/* Column related css */
+.content-container-centered div.centered-content-column-wrapper {
+  margin-bottom: 0;
+  padding: 5.2rem 0;
+}
+
+.content-container-centered div.centered-content-column-wrapper .content-container-column {
+  font-weight: 400;
+}
+
+@media screen and (min-width: 60em) {
+  .content-container-centered div.centered-content-column-wrapper {
+    display:flex;
+    flex-wrap: nowrap;
+    gap: 6.4rem;
+  }
+  .content-container-centered div.centered-content-column-wrapper .content-container-column {
+    margin-top: 0;
+  }
+
+  .content-container-centered div.centered-content-column-wrapper .content-container-column:first-child {
+    flex: 2 0;
+  }
+
+  .content-container-centered div.centered-content-column-wrapper .content-container-column:last-child {
+    flex: 1 0;
+  }
+}
+
+
+/* Custom rulesets based on material theme */
+.md-button.md-button--custom {
+  background-color: var(--md-default-fg-color--lighter);
+  border-color: var(--md-default-fg-color--lighter);
+  color: var(--md-primary-bg-color);
 }

material/overrides/home.html

@@ -34,12 +34,12 @@ <h1>OCI-native Image Builder</h1>
               <div class="item_content">
                 <h2 class="card_title">Single Binary</h2>
                 <p>One statically built binary for simplified download and install with no additional dependencies or services.</p>
-             </div>
+              </div>
             </li>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/solid/repeat.svg" %} 
-             </div>
+              </div>
               <div class="item_content">
                 <h2 class="card_title">Repeatable</h2>
                 <p>Hermetically sealed environment for image builds using LXC containers so that builds are repeatable without side-effects.</p>
@@ -48,7 +48,7 @@ <h2 class="card_title">Repeatable</h2>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/solid/lock.svg" %} 
-             </div>
+              </div>
               <div class="item_content">
                 <h2 class="card_title">Unprivileged</h2>
                 <p>Build using user namespaces and avoid privileges on host.</p>
@@ -66,7 +66,7 @@ <h2 class="card_title">Incremental</h2>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/brands/github.svg" %} 
-             </div>
+              </div>
               <div class="item_content">
                 <h2 class="card_title">GitHub Action</h2>
                 <p>Integrated with GitHub as a build-and-push <a href="https://github.com/marketplace/actions/stacker-build-and-push-action">action</a>.</p>
@@ -86,6 +86,36 @@ <h2 class="card_title">Open source</h2>
       </div>
     </div>
   </section>
+  <section class="tx-container default-bg">
+    <div class="md-grid md-typeset">
+      <div class="content-container-centered">
+        <div class="centered-content-column-wrapper">
+          <div class="content-container-column">
+            <h1>Keep in touch left side title</h1>
+            <div class="column-content">
+              <!-- Paragraphs can be added as desired -->
+              <p>
+                By joining the Insiders program, you'll get immediate access to the latest features while also helping support the ongoing development of Material for MkDocs. 
+                hanks to our awesome sponsors, this project is actively maintained and kept in good shape.
+              </p>
+              <p>
+                Together, we can build documentation that simply works!
+              </p>
+              <p><a class="md-button md-button--custom">Link to something else</a></p>
+            </div>
+          </div>
+          <div class="content-container-column">
+            <h1>Right side title</h1>
+            <div class="column-content">
+              <!-- Paragraphs can be added as desired -->
+              <p>First paragraph</p>
+              <p>Second paragraph</p>
+            </div>
+          </div>
+        </div>
+      </div>
+   </div>
+  </section>
 {% endblock %}
 {% block content %}{% endblock %}
 {% block footer %}