Styling:

1) make a white-box class to hold the solution 2) make top and bottom internal whitespace for each article
atom-box · Sep 6, 2021 · 2fb80c4 · 2fb80c4
1 parent 73ea0c9
commit 2fb80c4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/data/quiltData.mjs b/data/quiltData.mjs
@@ -41,7 +41,7 @@ let articles = [
     <form oninput="out1.value = maxEnd3(str1.value)">
         <label>Input</label>
         <input class="core" type="textarea" name="str1" placeholder="comma separated numbers"/><br>
-        <div class="stripe"><output name="out1" for="str1" class="gutters stripe">void</output></div>
+        <div class="stripe"><output name="out1" for="str1" class="gutters ">void</output></div>
     </form>
     <!-- /*==============================*/ -->
 </div>

diff --git a/helpers/quiltMain.js b/helpers/quiltMain.js
@@ -14,12 +14,15 @@ let answerHtml = '';
 articles.forEach(element => {
 
     singleDiv = `<article style="background-color:${element.backgroundColor}; color: ${element.textColor};"><div class='gutters';>
+    <div class="top-bottom-space"><div>
     <h2 >${element.title}</h2>
-    <p>Challenge description: ${element.question}</p></div>
+    <p>Challenge: <br/>${element.question}</p>
     `;
-
-    singleDiv += `<div id="${element.title}">`;
+    singleDiv += `<p>Solution:</p>`;
+    singleDiv += `<div class="white-box" id="${element.title}">`;
+    singleDiv += `<div>`;
     singleDiv += element.answerHtml;
+    singleDiv += `</div>`;
 
     singleDiv += `
     </article>

diff --git a/quilt.html b/quilt.html
@@ -39,6 +39,14 @@
             text-align: center;
         }
 
+        .top-bottom-space {
+            padding-top: 3.4rem;
+            padding-bottom: 3.4rem;
+        }
+
+        .white-box {
+            padding: 3rem;
+        }
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
@@ -109,31 +117,18 @@
             color: white;
         }
 
-        .blueBackground {
-            background-color: blue;
-            color: white;
+        .white-box {
+            border: white solid 0.2rem;
         }
 
         .stripe {
             color: #ccf;
             background-color: #000;
+            border: grey solid 0.2rem;
+            border-radius: 0.2rem;
         }
     </style>
 
-<script>
-    // TODO
-    // TODO
-    // TODO
-//     let dice = {};
-//     dice.roll5 = function() {
-//     return Math.ceil(5 * Math.random());
-// }
-
-// dice.show5 = function() {
-//     // dice.el = document.getElementById('diceout');
-//     console.log( dice.roll5());
-// }
-</script>
 </head>
 
 
@@ -143,7 +138,8 @@
             <h1>Let's Go:</h1>
             <div>
                 <div>
-                    <p>Write Javascript!<br>Sharpen the edge!<br>Timebox these activities!</p>
+                    <h2>Write Javascript!<br>Sharpen the edge!</h2>
+
                 </div>
             </div>
         </div>
@@ -157,7 +153,7 @@ <h1>Let's Go:</h1>
         <img class="card-img-top" src="images/navajo_1193x238.png" />
         <div class="overlay">
             <address>
-                <h2 class="text-right gutters">Making things in Madison, Wisconsin: <span class="text-info"><a
+                <h2 class="text-right gutters">Making things work in Madison, Wisconsin: <span class="text-info"><a
                             href="http://littlefurnace.com"> Evan Genest </a> </span> </h2>
             </address>
         </div>