feat: rotated table display

routes/static/out.css

@@ -534,6 +534,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.relative {
+  position: relative;
+}
+
 .col-span-full {
   grid-column: 1 / -1;
 }
@@ -686,11 +690,6 @@ video {
   background-color: hsl(var(--brick-color) / 0.5);
 }
 
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -769,6 +768,40 @@ video {
   --meta-color: 312deg 100% 50%;
 }
 
+/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
+
+.circle-container {
+  --d: 7em;
+  /* image size */
+  --rel: 1;
+  /* how much extra space we want between images, 1 = one image size */
+  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan));
+  /* circle radius */
+  --s: calc(2*var(--r) + var(--d));
+  /* container size */
+  position: relative;
+  width: var(--s);
+  height: var(--s);
+  /* background: silver /\* to show images perfectly fit in container *\/ */
+}
+
+.circle-container .person-bricks {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  /* margin: calc(-.5*var(--d)); */
+  --az: calc(var(--i)*1turn/var(--m));
+  width: var(--az);
+  height: var(--az);
+  transform:
+    translateX(-50%)
+    translateY(-50%)
+    rotate(90deg)
+    rotate(var(--az))
+    translate(var(--r))
+    rotate(-90deg)
+}
+
 .invalid\:bg-red-700:invalid {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));