add grid classes

sketch.js

@@ -130,12 +130,12 @@ new p5(function (p5){
     }
 
   function makeTextModules(){
-    const introDiv = p5.createDiv().class('module').id('intro')
+    const introDiv = p5.createDiv().class('module').class('header').id('intro')
     p5.createElement('h1','p5.js Critical AI Prompt Battle').parent(introDiv)
     p5.createP(`What do AI models really 'know' about you — about your community, your language, your culture? What do they 'know' about different concepts, ideas, and worldviews?`).parent(introDiv)
     p5.createP(`This tool lets you compare the results of multiple AI-generated texts and images side-by-side, using blanks you fill in to explore variations on a single prompt. For more info on prompt programming and critical AI, see [TUTORIAL-LINK].`).parent(introDiv)
 
-    const instructDiv = p5.createDiv().class('module').id('instructions')
+    const instructDiv = p5.createDiv().class('module').class('left-sidebar').id('instructions')
     p5.createElement('h4', 'INSTRUCTIONS').class('header').parent(instructDiv)
     p5.createP(`Write your prompt using [BLANK] and [MASK], where [BLANK] will be the variation you choose and fill in below, and [MASK] is a variation that the model will complete.`).parent(instructDiv)
     p5.createP(`For best results, try to phrase your prompt so that [BLANK] and [MASK] highlight the qualities you want to investigate. <A href="http://p5js.org">See examples.</a>`).parent(instructDiv)
@@ -143,8 +143,8 @@ new p5(function (p5){
 
   function makeInputModule(){
     const inputDiv = p5.createDiv()
-    inputDiv.id('inputDiv').class('module')
     p5.createElement('h4', 'INPUT').class('header').parent(inputDiv)
+    inputDiv.id('inputDiv').class('module').class('main')
     p5.createElement('h3', 'Enter your prompt').class('header').parent(inputDiv)
     p5.createP('Write your prompt in the box below using one [BLANK] and one [MASK].').parent(inputDiv)
     p5.createP('e.g. Write "The [BLANK] was a [MASK]..." and in the three blanks choose three occupations.').parent(inputDiv)
@@ -166,7 +166,7 @@ new p5(function (p5){
     const submitButton = p5.createButton("RUN PROMPT")
     submitButton.size(170)
     submitButton.class('button').parent(inputDiv)
-    submitButton.mousePressed(displayResults)
+    submitButton.mousePressed(displayOutput)
   }
 
   function addField(){
@@ -193,21 +193,21 @@ new p5(function (p5){
 
   function makeOutputModule(){
     const outDiv = p5.createDiv()
-    outDiv.id('outputDiv').class('module')
+    outDiv.id('outputDiv').class('module').class('main')
     const outHeader = p5.createElement('h4',"OUTPUT").parent(outDiv)
 
     //make output placeholders
 
     // text-only output
-    p5.createElement('h3', 'Text output').class('header').parent(outDiv)
+    p5.createElement('h3', 'Text output').parent(outDiv)
     outText = p5.createP('').id('outText').parent(outDiv)
 
     //a placeholder DIV for images and captions
-    p5.createElement('h3', 'Text-to-image output').class('header').parent(outDiv)
+    p5.createElement('h3', 'Text-to-image output').parent(outDiv)
     outPics = p5.createDiv().id('outPics').parent(outDiv)
         // img1 = p5.createImg('URL')
         
-    p5.createElement('h3', 'Prompting info').class('header').parent(outDiv)    
+    p5.createElement('h3', 'Prompting info').parent(outDiv)    
     outInfo = p5.createP('').id('outInfo').parent(OutDiv)
   }