fix formatting

Author: greggman

webgpu/lessons/es/webgpu-orthographic-projection.md

@@ -122,7 +122,7 @@ Arriba simplemente añadimos un ` 0,` al final de cada línea.
 
 A continuación, necesitamos cambiar todas las matemáticas de matrices de 2D a 3D.
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -178,7 +178,7 @@ A continuación, necesitamos cambiar todas las matemáticas de matrices de 2D a
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -234,7 +234,7 @@ A continuación, necesitamos cambiar todas las matemáticas de matrices de 2D a
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -292,7 +292,7 @@ A continuación, necesitamos cambiar todas las matemáticas de matrices de 2D a
 
 También podemos crear matrices de rotación en X e Y.
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">

webgpu/lessons/ja/webgpu-orthographic-projection.md

@@ -124,7 +124,7 @@ function createFVertices() {
 
 次に、すべての行列演算を2Dから3Dに変更する必要があります。
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -180,7 +180,7 @@ function createFVertices() {
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -236,7 +236,7 @@ function createFVertices() {
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -294,7 +294,7 @@ function createFVertices() {
 
 XおよびY回転行列も作成できます。
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">

webgpu/lessons/resources/lesson.css

@@ -599,6 +599,7 @@ iframe.webgpu_example, iframe.webgpu_diagram {
   margin-left: auto;
   margin-right: auto;
   display: block;
+  max-width: 100%;
 }
 iframe.webgpu_example {
   background: black;
@@ -616,6 +617,7 @@ iframe.external_diagram {
   margin-left: auto;
   margin-right: auto;
   display: block;
+  max-width: 100%;
 }
 
 div.webgpu_bottombar {

webgpu/lessons/webgpu-matrix-math.css

@@ -87,6 +87,10 @@
   font-family: sans-serif;
   font-size: xx-large;
   color: var(--glocal-fg-color);
+
+  @media (max-width: 450px) {
+    font-size: x-large;
+  }
 }
 
 .m11 { background: hsl( 0, 100%, 15%); }

webgpu/lessons/webgpu-orthographic-projection.css

@@ -65,6 +65,20 @@
   }
 }
 
+.local-compare {
+  display: flex;
+  flex-direction: row;
+  max-width: 1300px;
+  background-color: var(--compare-bg-color);
+  padding: 1em;  
+
+  &>div {
+    flex: 1 1 50%;
+    position: relative;
+    min-width: 0;
+  }
+}
+
 .mspc {
   display: inline-flex;
   width: 2em;
@@ -87,6 +101,19 @@
   font-family: sans-serif;
   font-size: xx-large;
   color: var(--glocal-fg-color);
+
+  @media (max-width: 720px) {
+    font-size: x-large;
+  }
+
+  @media (max-width: 500px) {
+    font-size: large;
+  }
+
+  @media (max-width: 400px) {
+    width: 1.5em;
+    height: 1.5em;
+  }
 }
 
 .m11 { background: hsl( 0, 100%, 15%); }

webgpu/lessons/webgpu-orthographic-projection.md

@@ -133,7 +133,7 @@ Above we just added a ` 0,` to the end of each line
 
 Next we need to change all the matrix math from 2D to 3D
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -189,7 +189,7 @@ Next we need to change all the matrix math from 2D to 3D
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -245,7 +245,7 @@ Next we need to change all the matrix math from 2D to 3D
   </div>
 </div>
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">
@@ -303,7 +303,7 @@ Next we need to change all the matrix math from 2D to 3D
 
 We can also make X and Y rotation matrices
 
-<div class="webgpu_center compare" style="align-items: end;">
+<div class="webgpu_center local-compare" style="align-items: end;">
   <div>
     <div class="glocal-center">
       <table class="glocal-center-content glocal-mat">