feat: initial brick templates

routes/static/out.css

@@ -554,6 +554,10 @@ video {
   height: 3.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -562,6 +566,10 @@ video {
   height: 100vh;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -570,6 +578,16 @@ video {
   flex: none;
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -578,6 +596,10 @@ video {
   grid-template-rows: auto 1fr;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -594,6 +616,11 @@ video {
   gap: 1.5rem;
 }
 
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -610,6 +637,14 @@ video {
   border-width: 4px;
 }
 
+.border-\[hsl\(var\(--brick-color\)\)\] {
+  border-color: hsl(var(--brick-color));
+}
+
+.border-\[hsl\(var\(--brick-color\)\)\]\/25 {
+  border-color: hsl(var(--brick-color) / 0.25);
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -625,6 +660,18 @@ video {
   border-color: rgb(161 98 7 / var(--tw-border-opacity));
 }
 
+.bg-\[hsl\(var\(--brick-color\)\)\]\/25 {
+  background-color: hsl(var(--brick-color) / 0.25);
+}
+
+.bg-\[hsl\(var\(--brick-color\)\)\]\/5 {
+  background-color: hsl(var(--brick-color) / 0.05);
+}
+
+.bg-\[hsl\(var\(--brick-color\)\)\]\/50 {
+  background-color: hsl(var(--brick-color) / 0.5);
+}
+
 .bg-amber-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -654,6 +701,10 @@ video {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -673,6 +724,14 @@ video {
   line-height: 1.75rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
+.text-\[hsl\(var\(--brick-color\)\)\]\/50 {
+  color: hsl(var(--brick-color) / 0.5);
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -682,6 +741,25 @@ video {
   text-decoration-line: underline;
 }
 
+.shadow-\[0_0_15px_rgba\(0\2c _0\2c _0\2c _0\.5\)\] {
+  --tw-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[hsl\(var\(--brick-color\)\)\] {
+  --tw-shadow-color: hsl(var(--brick-color));
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+:root {
+  --change-topic-color: 0deg 100% 50%;
+  --probing-q-color: 48deg 100% 50%;
+  --expand-color: 120deg 57% 50%;
+  --clarifying-q-color: 216deg 99% 55%;
+  --meta-color: 312deg 100% 50%;
+}
+
 .invalid\:bg-red-700:invalid {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));