diff --git a/src/index.html b/src/index.html index b6991b4..08e7f96 100644 --- a/src/index.html +++ b/src/index.html @@ -75,7 +75,7 @@ #matrices { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px; grid-gap: var(--padding); padding-left: var(--padding); padding-right: var(--padding); @@ -102,6 +102,11 @@ top: 0; background-color: rgba(255, 255, 255, 0.1); } + #matrices > span { + display: flex; + justify-content: center; + align-items: center; + } @@ -121,7 +126,8 @@
-
+ +
$$ \color{red} \begin{pmatrix} @@ -132,7 +138,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -143,7 +150,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -154,7 +162,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -165,7 +174,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{green} \begin{pmatrix} @@ -176,7 +186,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{green} \begin{pmatrix} @@ -187,6 +198,7 @@ \end{pmatrix} $$
+
diff --git a/src/script.js b/src/script.js index 25f3c53..82850dd 100644 --- a/src/script.js +++ b/src/script.js @@ -87,7 +87,7 @@ async function init() { v = 1.0; } interpolate[i] = v; - document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); + document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {