split out sections and add js for content

Author: jwcooper

assets/images/start/Feather 640.png renamed to assets/images/start/feather.png

@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded',function() {
+  document.querySelectorAll(".tab-links a").forEach(link => {
+    link.addEventListener('click', showContent);
+  });
+});
+
+function showContent(event) {
+  event.preventDefault();
+  var tab = event.target.getAttribute('href');
+  // toggle active class for links
+  document.querySelector(".tab-links a.active").classList.remove('active');
+  event.target.classList.add('active');
+  // toggle active class for content
+  document.querySelector(".tab-content.active").classList.remove('active');
+  document.getElementById(tab.substring(1)).classList.add('active');
+}

assets/images/start/Stemma 640.png renamed to assets/images/start/stemma.png

@@ -6,7 +6,7 @@
 
   .content-block {
     grid-column: full;
-    padding: 20px 20px 20px 55px;
+    padding: 20px 20px 20px 50px;
     margin-bottom: 5px;
     font-weight: 500;
 
@@ -19,7 +19,7 @@
     grid-column: full;
 
     .banner {
-      padding: 20px 70px 20px 70px;
+      padding: 20px 50px 20px 50px;
       margin-bottom: 5px;
 
       h3 {
@@ -36,10 +36,11 @@
     .tab-block {
       display: grid;
       grid-template-columns: 20% 80%;
-      padding: 0 70px 0 70px;
+      padding: 0 50px 0 50px;
 
       .tab-links {
         list-style-type: none;
+        padding: 0;
 
         a {
           font-weight: 600;
@@ -51,11 +52,15 @@
       }
 
       .tab-content {
-        display: grid;
+        display: none;
         grid-template-columns: 20% 80%;
         column-gap: 20px;
         padding-top: 20px;
 
+        &.active {
+          display: grid;
+        }
+
         img {
           display: block;
           max-width: 100%;

assets/javascript/start.js

@@ -0,0 +1,44 @@
+<section class="start-section">
+  <div class="purple banner">
+    <h3>Installing CircuitPython</h3>
+  </div>
+  <div class="tab-block">
+    <ul class="tab-links">
+      <li><a href="#choose-a-board" class="active">Choose a board</a></li>
+      <li><a href="#installation">Installation</a></li>
+      <li><a href="#blink">Blink</a></li>
+    </ul>
+    <div id="choose-a-board" class="tab-content active">
+      <img src="/assets/images/start/circuit_playground.png" />
+      <div class="details">
+          <h4>Choose a board</h4>
+          <p>
+            Some of the CircuitPython compatible boards come with CircuitPython
+            installed. Others are CircuitPython-ready, but need to have it
+            installed. As well, you may want to update the version of
+            CircuitPython already installed on your board. The steps are the
+            same for installing and updating.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="installation" class="tab-content">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>Installation</h4>
+          <p>
+            Installation Content Here.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="blink" class="tab-content">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>Blink</h4>
+          <p>
+            Blink Content Here.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+  </div> <!-- end tab-block -->
+</section> <!-- end start-section -->
+

assets/sass/pages/_start.scss

@@ -15,30 +15,8 @@ <h2>Getting started with CircuitPython is fill in the blank</h2>
       editing code. It's that simple.
     </p>
   </div>
-  <section class="start-section">
-    <div class="purple banner">
-      <h3>Installing CircuitPython</h3>
-    </div>
-    <div class="tab-block">
-      <ul class="tab-links">
-        <li><a href="#choose-a-board" class="active">Choose a board</a></li>
-        <li><a href="#installation">Installation</a></li>
-        <li><a href="#blink">Blink</a></li>
-      </ul>
-      <div class="tab-content">
-        <img src="/assets/images/start/circuit_playground.png" />
-        <div class="details" id="choose-a-board">
-            <h4>Choose a board</h4>
-            <p>
-              Some of the CircuitPython compatible boards come with CircuitPython
-              installed. Others are CircuitPython-ready, but need to have it
-              installed. As well, you may want to update the version of
-              CircuitPython already installed on your board. The steps are the
-              same for installing and updating.
-            </p>
-        </div>
-      </div> <!-- end tab-content -->
-    </div> <!-- end tab-block -->
-  </section> <!-- end section -->
+  {% include_relative _installation.html %}
 
 </div>
+
+<script src="/assets/javascript/start.js"></script>