doc: Reorganize documentation site content

Take the existing ACRN technical documentation and reorganize its
presentation to be persona and use-case based, in preparation for adding
new scenario/use-case based architecture introduction and getting
started documents.

Introduce a more graphical home page and theme color tweaks.

Signed-off-by: David B. Kinder <david.b.kinder@intel.com>

doc/static/acrn-custom.css

@@ -5,14 +5,14 @@
    max-width: none;
 }
 
-/* (temporarily) add an under development tagline to the bread crumb
+/* (temporarily) add an under development tagline to the bread crumb */
 .wy-breadcrumbs::after {
-   content: " (Content under development)";
+   content: " (Content reorganization in progress)";
    background-color: #FFFACD;
    color: red;
    font-weight: bold;
 }
-*/
+/* */
 
 /* pygments tweak for white-on-black console */
 
@@ -37,7 +37,7 @@
 
 .rst-versions .rst-current-version {
    padding: 5px;
-   background-color: #2980B9;
+   background-color: #2B978F;
    color: #80FF80;
 }
 
@@ -62,6 +62,12 @@ div.non-compliant-code div.highlight {
    background: #f7d7d7;
 }
 
+/* Tweak sidebar colors for ACRN theme */
+
+.wy-side-nav-search {
+   background-color: #2B978F;
+}
+
 /* Make the version number more visible */
 .wy-side-nav-search>div.version {
     color: rgba(255,255,255,1);
@@ -170,3 +176,81 @@ kbd
   padding:.1em .6em;
   text-shadow:0 1px 0 #fff;
 }
+
+/* home page grid display */
+
+.grid {
+    list-style-type: none !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin: 1rem auto;
+    max-width: calc((250px + 2rem) * 3);
+}
+
+.grid-item {
+    list-style-type: none !important;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    width: 200px;
+    text-align: center;
+    margin: 1rem;
+}
+
+.grid-item a {
+    display: block;
+    width: 200px;
+    height: 200px;
+    padding: 20px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    border: 1px solid #c6cbce;
+    background-color: #2B978F;
+    color: white;
+}
+
+.grid-item h2 {
+    font-size: 1.1rem;
+}
+
+.grid-item img {
+    margin-bottom: 1.1rem;
+    max-width: 75%;
+}
+
+
+.grid-item a:hover {
+    background-color: #51A192;
+    color: white;
+}
+
+
+.grid-item p {
+    margin-top: 0.5rem;
+    font-size: 85%;
+    line-height:1.2;
+    color: #404040;
+}
+
+.grid-icon {
+   line-height: 1.8;
+   font-size: 4rem;
+   color: #114B4F;
+}