Phase 1 - Redesign page layout as dashboard, left nav

Signed-off-by: michael vincerra <michael.vincerra@intel.com>

Author: mvincerx

src/docs/_static/styles.css

@@ -1155,3 +1155,37 @@ a:hover {
 #footer-blk-2{
   padding: 5px 10px;
 }
+
+.template-wrapper {
+  display: flex;
+  margin: 15px;
+  /* background-color: red; */
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  flex: 1;
+}
+
+.left-column {
+  background-color: #E9E9E9;
+  height: 100vh;
+  flex: 15%;
+}
+
+.right-column {
+  background-color: transparent;
+  height: 100vh;
+  flex: 85%;
+  outline: dotted;
+  outline-color: blue;
+}

src/docs/_templates/index.html

@@ -236,7 +236,7 @@
             </div>
         <!-- </div> -->
     </div>
-
+    <!-- HIDE TEMPLATE @ DEV
     <div class="toolkit-cards" data-toolkit-cards-container> </div>
         <template data-toolkit-template >
             <li class="card grid">
@@ -253,6 +253,49 @@
             </li>
         </template>
     </div>
+    -->
+    <div class='template-wrapper'>
+    
+    <div class='row'>
+
+        <div class='left-column'>
+            Search 
+            Filters
+        </div>
+
+        <div class='right-column'>
+
+            <div class="toolkit-cards" data-toolkit-cards-container> </div>
+            <template data-toolkit-template >
+                <li class="card grid">
+                    <div class="card-title" data-header></div>
+                        <div class="card-desc" data-body></div>
+                            <div class="badges-container"> 
+                                <p class="badges badge1" data-expertise></p>
+                                <p class="badges badge2" data-languages></p>
+                                <p class="badges-devices" data-targetDevice></p>
+                                <div url></div>
+                            </div>
+                        </div>
+                    </div> 
+                </li>
+            </template>
+        </div>
+
+
+
+
+
+
+
+        </div>
+
+        </div>
+      </div>
+
+
+
+
 
     <div id="hide"> 
         <div class="no-results">