touchup

src/content/verbs/SwitchPlayground.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { tenseData } from "./tense-data";
+import Media from "react-media";
 
 function SwitchPlayground() {
   const [state, setState] = useState<[boolean, boolean, boolean]>([false, false, false]);
@@ -44,33 +45,39 @@ function Switch({ state, toggle, label }: { label: [string, string], state: bool
   const border = "solid 2px black";
   return <div>
     <div>{label[0]}</div>
-    <div className="clickable" onClick={toggle} style={{
-      border,
-      height: "8rem",
-      borderRadius,
-      position: "relative",
+    <Media queries={{
+      small: "(max-width: 599px)",
     }}>
-      <div style={{
-        border,
-        borderRadius,
-        height: "50%",
-        width: "25%",
-        top: "50%",
-        transform: "translateY(-50%) translateX(150%)",
-        position: "absolute",
-      }}>
-        <div
-          style={{
+      {matches => (
+        <div className="clickable" onClick={toggle} style={{
+          border,
+          height: matches.small ? "6rem" : "9rem",
+          borderRadius,
+          position: "relative",
+        }}>
+          <div style={{
             border,
             borderRadius,
-            width: "50%",
-            top: state ? "75%" : "25%",
-            transform: "translateY(-50%) translateX(55%)",
+            height: "50%",
+            width: "33%",
+            top: "50%",
+            transform: "translateY(-50%) translateX(105%)",
             position: "absolute",
-          }}
-        />
-      </div>
-    </div>
+          }}>
+            <div
+              style={{
+                border,
+                borderRadius,
+                width: "50%",
+                top: state ? "75%" : "25%",
+                transform: "translateY(-50%) translateX(55%)",
+                position: "absolute",
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </Media>
     <div>{label[1]}</div>
   </div>
 }

src/content/verbs/master-chart.mdx

@@ -101,11 +101,11 @@ We can use **any possible** combination of these 3 choices, giving us:
 Here's a chart of every possible combination of these choices, giving us all the basic verb forms:
 
 <div style={{ overflowX: "auto", marginBottom: "1em" }}>
-    <table class="table table-bordered table-striped" style={{ minWidth: "500px" }}>
+    <table class="table table-bordered table-striped" style={{ minWidth: "425px" }}>
     <thead>
         <tr>
         <th>form</th>
-        <th scope="col">has 'ba'</th>
+        <th scope="col">Has 'ba'</th>
         <th scope="col">Imperfective / Perfective</th>
         <th scope="col">Stem / Root</th>
         </tr>
@@ -114,21 +114,23 @@ Here's a chart of every possible combination of these choices, giving us all the
         {tenseData.map((t) => (
             <tr>
                 <td>{t[0]}</td>
-                <td>{t[1] ? "Y" : "N"}</td>
-                <td>{t[2] ? "Imperfective" : "Perfective"}</td>
-                <td>{t[3] ? "Stem" : "Root"}</td>
+                <td>{t[1] ? "yes" : "no"}</td>
+                <td>{t[2] ? <div><Video />{` `}imperfective</div> : <div><Camera />{` `}perfective</div>}</td>
+                <td>{t[3] ? "stem" : "root"}</td>
             </tr>
         ))}
     </tbody>
     </table>
 </div>
 
-Try the combinations yourself!
+Hit the switches to try the combinations yourself!
 
 <SwitchPlayground />
 
 ## Imperative Forms
 
+Imperative forms are slightly different...
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -167,11 +169,13 @@ Try the combinations yourself!
 
 ## Perfect Verb Forms
 
+Perfect verb forms are built with:
+
 <div className="my-3">
     <samp>past participle + equative</samp>
 </div>
 
-Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used. Equative may be left out with the present perfect form.
+Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used to form 8 different <Link to="/verbs/all-perfect-verbs/">perfect froms</Link>. Equative may be left out with the present perfect form.
 
 ## Ability Verb Forms