migrate from flexi-docs

docs/assets/css/my.css

@@ -1,38 +1,42 @@
-.home-container {  
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-    gap: 0px 0px;
-    grid-auto-flow: row;
-    grid-template-areas:
-        "get-started talk-to-us";
-}
-
-.get-started { grid-area: get-started; }
-
-.talk-to-us { grid-area: talk-to-us; }
-
-.services-container {  
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-    gap: 0px 10px;
-    grid-auto-flow: row;
-    grid-template-areas:
-        "cloud-native programmable-infra partnership-led";
-}
-
-.cloud-native { 
-    grid-area: cloud-native;
-}
-
-.programmable-infra { grid-area: programmable-infra; }
-
-.partnership-led { grid-area: partnership-led; }
-
-.center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 50%;
-  }
+/*start Pillar style*/
+.pillarwrapper {
+    display: flex;
+    padding: 20px 20px 0px 20px;
+  }
+
+  .pillarwrapper > div {
+    flex-grow: 1;
+    padding: 20px 20px 0px 20px;
+    height:auto;
+    overflow:hidden;
+    transition: ease-in-out 200ms;
+   /*box-shadow: 0.05rem 0.05rem 0.075rem 0.075rem gainsboro; */
+    box-shadow: 0px 10px 10px rgba(30, 30, 30, 0.08);
+    /*background: linear-gradient(to right bottom, #f7fafc, #fff);*/
+    /* background-color: #ffffff; */
+    border-collapse: collapse;
+    cursor: default; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
+  }
+
+  .pillarwrapper > div:first-of-type { margin-right:10px }
+  .pillarwrapper > div:nth-of-type(2) { margin-right:10px }
+  .pillarwrapper > div:nth-of-type(3) {  }
+
+  .pillarwrapper > h2 { margin-top:0 margin-bottom:0 }
+
+  .pillarwrapper > div:hover {
+    box-shadow: 0px 10px 20px rgba(30, 30, 30, 0.16);
+  }
+
+  .pillarcard {
+  padding-bottom:0px;
+  width:33vw; 
+  }   
+  .pillarcard img {
+  opacity: 0.8;
+  transition: ease-in-out 200ms;  
+  }
+  .pillarcard:hover img {
+  opacity: 1.0;
+  }
+  /*end Pillar style*/

docs/cards-services.yaml

@@ -2,15 +2,15 @@
   content: |
     Use NeSI's cloud infrastructure and on-demand services to develop and manage custom,
     interactive solutions.
-  image: ./assets/icons/cloud-arrow-up-solid.svg
+  image: ./assets/icons/iconmonstr-cloud-15.svg
 
 - title: Programmable infrastructure
   content: |
     Apply DevOps practices enabled by Infrastructure as Code (IaC) to automate, measure,
     collaborate, and learn.
-  image: ./assets/icons/code-pull-request-solid.svg
+  image: ./assets/icons/iconmonstr-git-5.svg
 
 - title: Partnership-led approaches
   content: |
     Partner with NeSI's DevOps specialists to build a platform or tools that can benefit your research community.
-  image: ./assets/icons/handshake-solid.svg
+  image: ./assets/icons/iconmonstr-handshake-4.svg

docs/index.md

@@ -1,5 +1,45 @@
 # NeSI Flexible High Performance Cloud
 
+<div class="pillarwrapper">
+    <div align="center" class="pillarcard"> 
+        <img src="./assets/icons/iconmonstr-cloud-15.svg#only-light" width="80px" />
+        <img src="./assets/icons/iconmonstr-cloud-14.svg#only-dark" width="80px" />
+        <h3 style="margin-top:0px">Getting Started</h3>   
+        <p style="margin-bottom: 0px">  
+            Some Description
+        </p> 
+        <div class="card-btn-container">
+            <a href="getting-started/home/">
+                <span>Click here to Get Started &rarr; </span>
+            </a>
+        </div> 
+    </div>
+    <div align="center" class="pillarcard"> 
+        <img src="img/vision-svgrepo-com.svg" width="80px" />  
+        <h3 style="margin-top:0px">Getting Started</h3>   
+        <p style="margin-bottom: 0px">  
+            Some Description
+        </p> 
+        <div class="card-btn-container">
+            <a href="getting-started/home/">
+                <span>Click here to Get Started &rarr; </span>
+            </a>
+        </div> 
+    </div>
+    <div align="center" class="pillarcard"> 
+        <img src="./assets/icons/iconmonstr-cloud-15.svg" width="80px" />  
+        <h3 style="margin-top:0px">Getting Started</h3>   
+        <p style="margin-bottom: 0px">  
+            Some Description
+        </p> 
+        <div class="card-btn-container">
+            <a href="getting-started/home/">
+                <span>Click here to Get Started &rarr; </span>
+            </a>
+        </div> 
+    </div>
+</div>
+
 [cards cols=3 (./docs/cards-services.yaml)]
 
 NeSI is building a cloud computing platform for easier and more adaptable collaboration around scientific data.

mkdocs.yml

@@ -53,3 +53,4 @@ plugins:
 extra_css:
   - assets/css/neoteroi-mkdocs.css
   - assets/css/footer.css
+  - assets/css/my.css