🚏🍱 Checkpoint

./styles/zines.css:69682263/565
./scripts/zines.js:69682263/755
./zines/index.html:69682263/15

scripts/zines.js

@@ -5,26 +5,44 @@ let zines = [
     "format": "physical/digital",
     "site": "https://leecat.art",
     "fedi": "https://flipping.rocks/@inherentlee"
+  },
+  {
+    "name": "testy mc testerson",
+    "blurb": "something dreadfully long, like all the world's a stage, and all the men and women merely players, they have their entrance",
+    "format": "digital"
   }
 ]
 
-function makeZine({name, blurb, format, site, fedi}) {
-  let zine = document.createElement("div");
-  zine.className = "zine";
+/*
+          <li class="artist">
+            <h2>
+              lee
+            </h2>
+            <p>
+              is making a physical/digital zine about...
+            </p>
+            <blockquote>
+              <p>
+                something about gender or shit idk let this wrap onto a new line
+              </p>
+            </blockquote>
+          </li>
+        </ul>
+        */
 
-  let h3 = document.createElement("h3");
-  h3.className = "artist";
-  h3.innerHTML = name;
-  zine.append(h3);
+function makeZine({name, blurb, format, site, fedi}) {
+  let zine = document.createElement("li");
+  
+  let h2 = document.createElement("h2");
+  h2.innerHTML = name;
+  zine.append(h2);
   
   let p = document.createElement("p");
-  p.className = "intro";
-  p.innerHTML = name + " is making a " + format + " zine about...";
+  p.innerHTML = " is making a " + format + " zine about...";
   zine.append(p);
   
   let bq = document.createElement("blockquote");
   let bqP = document.createElement("p");
-  bq.className = "blurb"
   bqP.innerHTML = blurb;
   bq.append(bqP);
   zine.append(bq);
@@ -35,5 +53,5 @@ function makeZine({name, blurb, format, site, fedi}) {
 let zineContainer = document.getElementById("zine-container");
 
 for (let i = 0; i < zines.length; i++) {
-  // zineContainer.append(makeZine(zines[i]));
+  zineContainer.append(makeZine(zines[i]));
 }

styles/zines.css

@@ -1,8 +1,21 @@
-li {
-  list-style: none;
-  margin: 0;
+#zine-container {
+  padding: 0;  
 }
 
-h2, p {
+#zine-container li {
+  list-style: none;
+  border-bottom: solid;
+  border-left: solid;
+  border-radius: 4px;
+  padding: 0 .4rem .4rem;
+}
+
+#zine-container h2,
+#zine-container p {
   display: inline;
 }
+
+blockquote {
+  margin: 0;
+  color: light-dark(var(--color-header-light), var(--color-header-dark));
+}

zines/index.html

@@ -60,7 +60,7 @@
         
         <ul id="zine-container">
           <!-- Auto populated by scripts/zines.js -->
-          <li class="artist">
+          <li>
             <h2>
               lee
             </h2>