Fix software lifecycle dark mode rendering

Author: jsbrittain

pages/why-eng-res-soft.md

@@ -39,27 +39,27 @@ transition: "none"
 <div class="relative h-90 w-140">
 
   <!-- Cascading boxes -->
-  <div class="absolute top-0 left-0 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-0 left-0 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Research Questions
   </div>
 
-  <div class="absolute top-16 left-16 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-16 left-16 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Develop Software
   </div>
 
-  <div class="absolute top-32 left-32 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-32 left-32 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Run Software
   </div>
 
-  <div class="absolute top-48 left-48 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-48 left-48 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Analyse Data
   </div>
 
-  <div class="absolute top-64 left-64 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-64 left-64 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Publish Paper
   </div>
 
-  <div class="absolute top-80 left-80 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-80 left-80 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Project Ends
   </div>
 
@@ -90,31 +90,31 @@ Understandable… there has been a crisis in confidence of the publishing model
 <div class="relative h-90 w-140">
 
   <!-- Cascading boxes -->
-  <div class="absolute top-0 left-0 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-0 left-0 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Research Questions
   </div>
 
-  <div class="absolute top-16 left-16 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-16 left-16 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Develop Software
   </div>
 
-  <div class="absolute top-32 left-32 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-32 left-32 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Run Software
   </div>
 
-  <div class="absolute top-48 left-48 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-48 left-48 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Analyse Data
   </div>
 
-  <div class="absolute top-64 left-64 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-64 left-64 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Publish Paper
   </div>
 
-  <div class="absolute top-80 left-80 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-80 left-80 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Project Ends
   </div>
 
-  <div class="absolute top-77 left-130 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-77 left-130 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Graceful Decline
   </div>
 
@@ -126,13 +126,13 @@ Understandable… there has been a crisis in confidence of the publishing model
   <FancyArrow x1="270" y1="295" x2="320" y2="340" arc="-0.4" head-size="15" />
   <FancyArrow x1="462" y1="340" x2="517" y2="340" head-size="15" />
 
-  <div class="absolute top-40 left--40 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-40 left--40 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Project Partners
   </div>
-  <div class="absolute top-60 left--10 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-60 left--10 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Industry
   </div>
-  <div class="absolute top-80 left-10 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+  <div class="absolute top-80 left-10 inline-block border border-gray-400 px-3 py-1 rounded shadow">
     Other People
   </div>
 
@@ -166,7 +166,7 @@ Understandable… there has been a crisis in confidence of the publishing model
 
 </div>
 
-<div v-click class="absolute top-30 left-130 text-left inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+<div v-click class="absolute top-30 left-130 text-left inline-block border border-gray-400 px-3 py-1 rounded shadow bg-white dark:bg-black">
   What happens when…
   <ul>
   <li>You have a follow-on project?</li>
@@ -175,7 +175,7 @@ Understandable… there has been a crisis in confidence of the publishing model
   </ul>
 </div>
 
-<div v-click class="absolute top-10 left-80 inline-block border border-gray-400 bg-white px-3 py-1 rounded shadow">
+<div v-click class="absolute top-10 left-80 inline-block border border-gray-400 px-3 py-1 rounded shadow">
   When should you have considered how to engineer your software?
 </div>