🐄💵 Checkpoint

./styles/main.css:69682263/450
./zines/index.html:69682263/300
./styles/zines.css:69682263/102
./scripts/zines.js:69682263/3

scripts/zines.js

@@ -35,5 +35,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/main.css

@@ -5,13 +5,12 @@
   --color-bg-light: #f0f0f0;
   --color-text-light: #640054;
   --color-header-light: #185370;
+  --color-warn-light: #fbcc0a;
   
   --color-bg-dark: #1f1f1f; 
   --color-text-dark: #91c73b;
-  --color-header-dark: #ff87f3;
-  
-  --color-bg-wip: #fbcc0a;
-  --color-text-wip: #640054;
+  --color-header-dark: #ff9b37;
+  --color-warn-dark: #540033;
   
   --color-text-main: #640054;
   --color-text-header: #185370;
@@ -73,12 +72,12 @@
 
 /* WIP banner */
 .wip {
-  background-color: var(--color-bg-wip);
-  color: var(--color-text-wip);
+  background-color: light-dark(var(--color-warn-light), var(--color-warn-dark));
+  color: light-dark(var(--color-text-light), var(--color-text-dark));
   font-family: var(--font-family);
   padding: 0.05rem 1rem;
   width: 100%;
-  border: solid var(--color-text-wip);
+  border: solid light-dark(var(--color-text-light), var(--color-text-dark));
   border-radius: 3px;
   margin-top: 1rem;
   text-align: center;

styles/zines.css

@@ -0,0 +1,3 @@
+.artist {
+  font-size: 2.5rem;
+}

zines/index.html

@@ -12,7 +12,8 @@
 
     <!-- The website stylesheet -->
     <link rel="stylesheet" href="styles/main.css" />
-
+    <link rel="stylesheet" href="styles/zines.css" />
+    
     <!-- The website JavaScript file -->
     <script src="scripts/footer.js" defer></script>
     <script src="scripts/zines.js" defer></script>
@@ -59,6 +60,14 @@
         
         <div id="zine-container">
           <!-- Auto populated by scripts/zines.js -->
+          <div class="intro">
+            <h2>
+              lee
+            </h2>
+            <p>
+              is making a physical/digital zine about...
+            </p>
+          </div>
         </div>
         
       </main>