<mbrock> 2 files changed (+227/-226)

garlic0x1 · Apr 27, 2022 · fab735c · fab735c
1 parent a155168
commit fab735c
Show file tree

Hide file tree

Showing 2 changed files with 227 additions and 226 deletions.
diff --git a/web/index.css b/web/index.css
@@ -0,0 +1,220 @@
+body { background: black; color: ivory; margin: 0 }
+body { font: 20px/22px 'dm mono', 'inconsolata', monospace; }
+
+article:not(.output) .symbol { text-transform: lowercase; }
+
+.string:before { content: '“'; }
+.string:after { content: '”'; }
+
+.string { color: lightgray; }
+
+.list > [data-function-kind=jet]:first-child,
+.list > .cursor:first-child + [data-function-kind=jet],
+.list > aside:first-child + [data-function-kind=jet],
+{ color: goldenrod; }
+
+.list > .cursor:first-child + [data-function-kind=fun],
+.list > aside:first-child + [data-function-kind=fun],
+.list > [data-function-kind=fun]:first-child { color: lightsalmon; }
+
+.vector, .list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  margin: 0 .25rem;
+  padding: 0 .5rem;
+  max-width: 60ch;
+  min-height: 1em;
+  align-items: center;
+}
+
+.list[data-callee='WISP:COND'] > :not(.cursor),
+.list[data-callee='WISP:MAKE-KEYMAP'] > :not(.cursor) {
+  width: 100%;
+}
+
+.list[data-callee='WISP:DEFUN'] > div:first-of-type ~ *,
+.list[data-callee='WISP:NOTE'] > div:first-of-type ~ *,
+.list[data-callee='WISP:SET-KEYMAP!'] > :first-of-type ~ *,
+.list[data-callee='KEYWORD:SECTION'] > div:first-of-type ~ *
+{
+  width: 100%;
+}
+
+.list[data-callee='KEYWORD:SECTION'] > div:first-of-type ~ :not(.cursor):not(:last-child) {
+  margin-bottom: 10px;
+}
+
+
+.symbol[data-package-name=WISP] > .package-name { display: none; }
+.symbol[data-package-name=KEYWORD] > .package-name { display: none; }
+
+.package-name:after,
+.symbol[data-package-name=KEYWORD] > .symbol-name:before {
+  content: \":\";
+  opacity: 0.7;
+  padding-right: 1px;
+}
+
+.list {
+  border: 0 solid #555;
+  border-width: 0 2px;
+  border-radius: 10px;
+}
+
+.list:hover {
+  border-width: 0px 2px;
+  background: #fff1;
+  border-color: #fff7;
+  cursor: pointer;
+}
+
+.symbol:hover, .string:hover {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+#file > .list {
+  /* border: 0; */
+  /* margin-left: 1em; */
+}
+
+#file > .list:before {
+  /* content: "•"; */
+  /* transform: scale(1.25); */
+  /* margin-left: -1em; */
+  /* color: #ffa5; */
+}
+
+.vector {
+  border: 0 solid #556a;
+  border-width: 1px 3px;
+  border-radius: 10px;
+  padding: 5px;
+}
+
+@keyframes blink {
+  0%, 100% { color: #ffa8 } 50% { color: #ffaa }
+}
+
+@keyframes rock {
+  0% { transform: rotate(-15deg) }
+  50% { transform: rotate(15deg) }
+  100% { transform: rotate(-15deg) }
+}
+
+.cursor:empty:before {
+  content: '»';
+  transform: scale(1.4);
+  /* height: 10px; width: 10px; */
+  /* border-radius: 100%; */
+}
+
+.cursor {
+  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px;
+}
+
+.active .cursor { animation: blink .75s infinite; }
+
+.cursor:not(:empty) {
+  background: #63ffeb30; border-radius: 5px;
+  margin: 0 5px; padding: 2px 5px;
+}
+
+.cursor { opacity: 0.6; }
+.active .cursor { opacity: 1; }
+
+article:not(.active) { opacity: 0.7; }
+
+ins { text-decoration: none; }
+
+.window {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: minmax(0, min-content);
+  position: absolute;
+}
+
+body, .window {
+  top: 0; bottom: 0; left: 0; right: 0;
+}
+
+article > header {
+  border: 1px solid #fff4;
+  background: #fff1;
+  padding: 0px 15px;
+  line-height: 2rem;
+}
+
+article > main {
+  padding: 10px;
+  padding-bottom: 50px;
+  border: 1px solid #fff4;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+article {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) minmax(1rem, auto);
+}
+
+main > * { flex-shrink: 0; }
+
+.list > aside {
+  opacity: 0.5;
+  font-weight: 100;
+}
+
+.list[data-callee="WISP:PENDING-PROMISE"] > * {
+  display: none;
+}
+
+.list[data-callee="WISP:PENDING-PROMISE"]:before {
+  display: block;
+  content: "☐";
+  animation: blink 1s infinite;
+  transform: scale(1.25);
+}
+
+.list[data-callee="WISP:RESOLVED-PROMISE"] > [data-symbol-name="RESOLVED-PROMISE"] > * {
+  display: none;
+}
+
+.list[data-callee="WISP:RESOLVED-PROMISE"] > [data-symbol-name="RESOLVED-PROMISE"]:before {
+  display: block;
+  content: "☑";
+  color: limegreen;
+  transform: scale(1.25);
+}
+
+.list
+{ border-color: hsl(260, 55%, 60%, .7) }
+.list .list
+{ border-color: hsl(200, 55%, 50%, .7) }
+.list .list .list
+{ border-color: hsl(180, 85%, 50%, .7) }
+.list .list .list .list
+{ border-color: hsl(170, 85%, 30%, .7) }
+.list .list .list .list .list
+{ border-color: hsl(140, 85%, 30%, .7) }
+.list .list .list .list .list .list
+{ border-color: hsl(80, 85%, 30%, .7) }
+.list .list .list .list .list .list .list
+{ border-color: hsl(0, 85%, 30%, .7) }
+.list .list .list .list .list .list .list .list
+{ border-color: hsl(260, 55%, 60%, .7) }
+.list .list .list .list .list .list .list .list .list
+{ border-color: hsl(200, 55%, 50%, .7) }
+.list .list .list .list .list .list .list .list .list .list
+{ border-color: hsl(180, 85%, 50%, .7) }
+.list .list .list .list .list .list .list .list .list .list .list
+{ border-color: hsl(170, 85%, 30%, .7) }
+.list .list .list .list .list .list .list .list .list .list .list .list
+{ border-color: hsl(140, 85%, 30%, .7) }
+.list .list .list .list .list .list .list .list .list .list .list .list .list
+{ border-color: hsl(80, 85%, 30%, .7) }
+.list .list .list .list .list .list .list .list .list .list .list .list .list .list
+{ border-color: hsl(0, 85%, 30%, .7) }