styles: update panels, add semantic HTML

msmfa · msmfa · commit ed4c45e3f0d8 · 2022-12-08T13:27:08.000Z
diff --git a/src/data.js b/src/data.js
@@ -1,5 +1,7 @@
+/**
+ * The left hand values and their assosiated links and images
+ */
 export const definitions = [
-  //Items displayed in a bullet point style must be inluded in the bullet point property
   {
     title: "variables",
     text: "Variables can be denoted with the keywords let or const. The accepted convention is to use const as much as possible, and let when the variable is likely to be re-assigned",
diff --git a/src/index.html b/src/index.html
@@ -7,10 +7,12 @@
     
     <title>Javascript in 30 Words</title>
   </head>
+
   <body>
-    <div class="flex-container">
-    <ul class="list-container">
-      <h2 class="subtitles">Fundamentals</h2>
+    <main class="main">
+    <section class="section-left">
+    <ul>
+      <h2 class="section-left-subtitle">Fundamentals</h2>
       <li id="variables">Variables</li>
       <li id="functions">Functions</li>
       <li id="functional-expressions">Functional Expressions</li>
@@ -27,7 +29,7 @@ <h2 class="subtitles">Fundamentals</h2>
       <li id="classes">Classes (ES6)</li>
       <li id="scope">Scope</li>
       <br></br>
-      <h2 class="subtitles"class="subtitles">Advanced</h2>
+      <h2 class="section-left-subtitle">Advanced</h2>
       <li id="the-call-stack">The Call Stack</li>
       <li id="event-loop">The Event Loop</li>
       <li id="IIFEs">IIFEs</li>
@@ -49,8 +51,9 @@ <h2 class="subtitles"class="subtitles">Advanced</h2>
       <li id="prototypal-inheritance">Prototypal Inheritance</li>
       <li id="polymorphism">Polymorphism</li>
     </ul>
-    <div id="display-container">A refresher on Javascript concepts in less than 30 words. This is an open source project. Contributions are welcome via <a target ="_blank" href="https://github.com/msmfa/javascript-in-30">Github</a></div>
-  </div>
+  </section>
+    <section class="section-right">A refresher on Javascript concepts in less than 30 words. This is an open source project. Contributions are welcome via <a target ="_blank" href="https://github.com/msmfa/javascript-in-30">Github</a></section>
+  </main>
     <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/src/main.css b/src/main.css
@@ -1,7 +1,10 @@
+/* global styles */
+
 * {
   margin: 0;
   padding: 0;
   font-family: "San Francisco";
+  box-sizing: border-box;
 }
 
 @font-face {
@@ -10,23 +13,67 @@
   src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
 }
 
+html,
+body {
+  height: 100%;
+}
+
 ul li {
   list-style-type: none;
   color: rgb(63, 63, 63);
 }
+
+a {
+  color: rgb(240, 158, 8);
+  text-decoration: none;
+}
+
+/* main app */
+
+.main {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.section-left {
+  flex: 1;
+  padding: 30px;
+  background-color: rgb(215, 215, 215);
+  height: 100%;
+}
+
+.section-left-subtitle {
+  color: rgb(61, 61, 61);
+  margin-bottom: 10px;
+}
+
+.section-left li:hover {
+  color: rgb(101, 180, 226);
+  cursor: pointer;
+}
+
+.section-right {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 30px;
+  height: 100%;
+}
+
 .list {
   list-style-type: none;
   padding: 0.3em;
   font-size: 0.8em;
 }
-.list-container li:hover {
-  color: rgb(101, 180, 226);
-  cursor: pointer;
-}
 
 .def-text {
   margin: 0.8em 5em;
 }
+
 .images {
   width: 80%;
   border-radius: 3px;
@@ -36,39 +83,6 @@ ul li {
   box-shadow: 6px 10px 11px 3px rgba(199, 199, 199, 1);
 }
 
-#display-container {
-  font-size: 1.4em;
-  text-align: center;
-  width: 62vw;
-  margin-top: -2em;
-  position: fixed;
-  margin-left: 33vw;
-  padding: 1em;
-}
-
-#display-container a {
-  color: rgb(240, 158, 8);
-  text-decoration: none;
-}
-
-.flex-container {
-  display: flex;
-  align-items: center;
-}
-
-.list-container {
-  border-right: 1px solid rgb(202, 202, 202);
-  background-color: rgb(243, 243, 243);
-  padding: 1rem;
-  width: 30vw;
-  font-size: 0.85em;
-}
-
-.subtitles {
-  color: rgb(61, 61, 61);
-  margin-bottom: 0.3rem;
-}
-
 @media only screen and (max-width: 875px) {
   .def-text {
     margin: 0.8em 1em;
@@ -77,4 +91,7 @@ ul li {
     width: 95%;
     height: 20%;
   }
+  .section-left {
+    padding: 10px;
+  }
 }
diff --git a/src/main.js b/src/main.js
@@ -1,9 +1,11 @@
 import { definitions } from "./data.js";
 
-const listContainer = document.querySelector(".list-container");
+// the left hand side panel that contains the list of
+// links to be clicked
+const sectionLeft = document.querySelector(".section-left");
 
-listContainer.addEventListener("click", function (e) {
-  const display = document.getElementById("display-container");
+sectionLeft.addEventListener("click", function (e) {
+  const sectionRight = document.querySelector(".section-right");
 
   const mainText = definitions
     .map((item) => {
@@ -25,7 +27,7 @@ listContainer.addEventListener("click", function (e) {
     .join("");
 
   const bulletPointText = displayTextAsList(listText);
-  displayContent(display, mainText, bulletPointText, exampleImage);
+  displayContent(sectionRight, mainText, bulletPointText, exampleImage);
 });
 
 function displayContent(display, mainText, bulletPointText, exampleImage) {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
	`1`	`+/**`
	`2`	`+ * The left hand values and their assosiated links and images`
	`3`	`+ */`
`1`	`4`	`export const definitions = [`
`2`		`- //Items displayed in a bullet point style must be inluded in the bullet point property`
`3`	`5`	`{`
`4`	`6`	`title: "variables",`
`5`	`7`	`text: "Variables can be denoted with the keywords let or const. The accepted convention is to use const as much as possible, and let when the variable is likely to be re-assigned",`