add vanilla DOM web backend

1 files changed, 91 insertions, 0 deletions

diff --git a/src/web/pardes.css b/src/web/pardes.css
new file mode 100644
index 00000000..a959e6c3
--- /dev/null
+++ b/src/web/pardes.css
@@ -0,0 +1,91 @@
+@font-face {
+  font-family: "Pardes Mono";
+  src: url("./AdwaitaMono-Regular.ttf") format("truetype");
+  font-display: swap;
+}
+
+:root {
+  color-scheme: dark;
+  --pardes-bg: #121212;
+  --pardes-fg: #cccccc;
+  --pardes-font-size: 18px;
+  --pardes-cell-width: 9.333333px;
+  --pardes-cell-height: 19.459459px;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: var(--pardes-bg);
+}
+
+.pardes {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  color: var(--pardes-fg);
+  background: var(--pardes-bg);
+  font-family: "Pardes Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--pardes-font-size);
+  font-variant-ligatures: none;
+  line-height: 1;
+  outline: none;
+  touch-action: none;
+  user-select: text;
+  cursor: text;
+}
+
+.pardes-row {
+  display: flex;
+  width: max-content;
+  height: var(--pardes-cell-height);
+  line-height: var(--pardes-cell-height);
+  white-space: pre;
+}
+
+.pardes-cell {
+  box-sizing: border-box;
+  display: inline-block;
+  flex: 0 0 var(--pardes-cell-width);
+  width: var(--pardes-cell-width);
+  height: var(--pardes-cell-height);
+  overflow: hidden;
+  text-align: left;
+  white-space: pre;
+}
+
+.pardes-cell.is-cursor {
+  color: var(--cell-bg) !important;
+  background: var(--cell-fg) !important;
+}
+
+.pardes-cell.is-cursor.is-bar {
+  color: var(--cell-fg) !important;
+  background: var(--cell-bg) !important;
+  box-shadow: inset 2px 0 var(--cell-fg);
+}
+
+.pardes-cell.is-blinking {
+  animation: pardes-blink 1s step-end infinite;
+}
+
+.pardes-probe {
+  position: fixed;
+  left: -10000px;
+  top: -10000px;
+  width: var(--pardes-cell-width);
+  height: var(--pardes-cell-height);
+  visibility: hidden;
+}
+
+@keyframes pardes-blink {
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pardes-cell.is-blinking { animation: none; }
+}