Merge pull request #8 from Zexlo/main

fix conflicts again and merge new json page template

Author: pizza-beep

css/styles.css

@@ -3,7 +3,8 @@ body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
-  color: #fff;
+  color: #ffff
+  text-align: center;
   background: url("assets/images/blueprintscroll.png"); 
   transition: background-color 0.3s, color 0.3s;
 }
@@ -108,3 +109,30 @@ body.no-bg {
 summary {
   font-size: x-large;
 }
+
+ /* Style the button that is used to open and close the collapsible content */
+ .collapsible {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsible:hover {
+  background-color: #ccc;
+}
+
+/* Style the collapsible content. Note: hidden by default */
+.content {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}

js/main.js

@@ -106,3 +106,19 @@ document.addEventListener('DOMContentLoaded', () => {
     e.preventDefault();
   });
 });
+
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  });
+}
+

sections/Json editing.html

@@ -13,7 +13,31 @@
 
   <main>
     <h2>How to Edit Json Files</h2>
-    <p>Learn how to edit json files.</p>
+    <p>Learn how to edit json files using these json commands for mc3ds, 
+      each command will contain a description and snippet of code</p>
+
+      <button type="button" class="collapsible">Minceraft?</button>
+      <div class="content">
+        <p>Minceraft!</p>
+      </div>       
+
+      <details>
+        <summary>is_baby</summary>
+
+        <h2>minecraft:is_baby</h2>
+        <p>This command is used for component groups which reflect baby varients</p>
+        <h2>Code snippet</h2>
+        <p>"minecraft:is_baby": { },</p>
+    </details>
+    
+    <details>
+      <summary>scale</summary>
+
+      <h2>minecraft:scale</h2>
+      <p>This command is used to rescale a compontent groups model, such as babies</p>
+      <h2>Code snippet</h2>
+      <p>"minecraft:scale": {"value": X},</p>
+  </details>    
   </main>
 </body>
 </html>