Add details section to homepage

Author: tolauwae

warduino/.vitepress/components/feature.vue

@@ -70,7 +70,7 @@ article {
   padding: 0;
   letter-spacing: -0.02em;
   line-height: 24px;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
 }
 

warduino/.vitepress/components/home.vue

@@ -15,7 +15,7 @@ const {frontmatter: fm} = useData()
           <h1 v-if="fm.hero.name" class="name">
             <span v-html="fm.hero.name" class="clip"></span>
           </h1>
-          <p v-if="fm.hero.text" v-html="fm.hero.text" class="text"></p>
+          <p v-if="fm.hero.text" v-html="fm.hero.text" class="smaller"></p>
           <p v-if="fm.hero.tagline" v-html="fm.hero.tagline" class="tagline"></p>
         </div>
       </div>
@@ -65,7 +65,41 @@ const {frontmatter: fm} = useData()
       </div>
     </div>
 
-    <Content/>
+    <!-- details -->
+    <div class="details">
+      <div class="container">
+        <div class="vp-doc grow">
+          <h2></h2>
+          <div class="grow divider">
+            <article class="list">
+              <h4>Getting started</h4>
+              <p><a href="./guide/get-started.html">-&gt; Get started</a></p>
+              <p><a href="./guide/examples/index.html">-&gt; Examples</a></p>
+              <p><a href="./guide/latch.html">-&gt; Automated testing</a></p>
+              <p><a href="./guide/plugin.html">-&gt; Debugging in VS Code</a></p>
+            </article>
+            <article class="list">
+              <h4>Developer's guide</h4>
+              <p><a style="font-size: 14px" href="./reference/development.html">-&gt; Development</a></p>
+              <p><a href="./reference/debug-protocol.html">-&gt; Debugger reference</a></p>
+              <p><a href="./reference/platforms.html">-&gt; Supported platforms</a></p>
+              <p><a href="./reference/primitives.html">-&gt; WARDuino primitives</a></p>
+              <p><a href="./reference/edward/index.html">-&gt; EDWARD reference</a></p>
+            </article>
+            <article class="list">
+              <h4>Examples</h4>
+              <p><a href="./guide/examples/analog.html">-&gt; Analog Read Serial</a></p>
+              <p><a href="./guide/examples/blink.html">-&gt; Blinking LED</a></p>
+              <p><a href="./guide/examples/button.html">-&gt; Button</a></p>
+              <p><a href="./guide/examples/index.html">-&gt; More ...</a></p>
+            </article>
+          </div>
+          <h2></h2>
+
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -87,7 +121,7 @@ const {frontmatter: fm} = useData()
   padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
-.features {
+.features, .details {
   padding: 0 24px;
 }
 
@@ -96,7 +130,7 @@ const {frontmatter: fm} = useData()
     padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
   }
 
-  .features {
+  .features, .details {
     padding: 0 48px;
   }
 }
@@ -106,13 +140,13 @@ const {frontmatter: fm} = useData()
     padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
   }
 
-  .features {
+  .features, .details {
     padding: 0 64px;
   }
 }
 
 .name,
-.text {
+.smaller {
   max-width: 392px;
   letter-spacing: -0.4px;
   line-height: 40px;
@@ -122,7 +156,7 @@ const {frontmatter: fm} = useData()
 }
 
 .VPHero.has-image .name,
-.VPHero.has-image .text {
+.VPHero.has-image .smaller {
   margin: 0 auto;
 }
 
@@ -141,7 +175,7 @@ const {frontmatter: fm} = useData()
 
 @media (min-width: 640px) {
   .name,
-  .text {
+  .smaller {
     max-width: 576px;
     line-height: 56px;
     font-size: 48px;
@@ -150,13 +184,13 @@ const {frontmatter: fm} = useData()
 
 @media (min-width: 960px) {
   .name,
-  .text {
+  .smaller {
     line-height: 64px;
     font-size: 56px;
   }
 
   .hero.has-image .name,
-  .hero.has-image .text {
+  .hero.has-image .smaller {
     margin: 0;
   }
 }
@@ -255,4 +289,32 @@ const {frontmatter: fm} = useData()
   }
 }
 
+/* details */
+
+.grow {
+  flex-grow: 1;
+}
+
+.center {
+  text-align: center;
+}
+
+.divider {
+  display: flex;
+  align-items: flex-start;
+}
+
+.divider > * {
+  flex-grow: 1;
+}
+
+.list > p {
+  font-size: 14px;
+  margin-top: 2px;
+  margin-bottom: 0;
+  padding-top: 8px;
+  line-height: 24px;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
 </style>