moth

puzzle.css

  1@font-face {
  2  font-family: "Go";
  3  src: url("fonts/Go-Regular.ttf");
  4}
  5
  6/** Workspace
  7 *
  8 * Tools for this puzzle: shows up in content.
  9 * Right now this is just a Python interpreter.
 10 */
 11 .workspace {
 12  background-color: rgba(255, 240, 220, 0.3);
 13  white-space: normal;
 14  padding: 0;
 15}
 16
 17.output {
 18    background-color: #555;
 19    color: #fff;
 20    margin: 0.5em 0;
 21    padding: 0.5em;
 22    flex-grow: 1;
 23    flex-shrink: 1;
 24    min-height: 3em;
 25    max-height: 24em;
 26    overflow: scroll;
 27}
 28
 29.output, .editor {
 30    font-family: Go, "source code pro", consolas, monospace;
 31}
 32
 33.fixed .output, .fixed .editor {
 34    font-family: "source code pro", consolas, monospace;
 35}
 36
 37.controls {
 38    display: flex;
 39    align-items: center;
 40    gap: 0.5em;
 41}
 42.controls .status {
 43  font-size: 9pt;
 44  flex-grow: 2;
 45}
 46.controls .language {
 47  font-size: 9pt;
 48  font-style: italic;
 49}
 50
 51.stdout,
 52.stderr,
 53.stdinfo,
 54.traceback {
 55  white-space: pre-wrap;
 56}
 57.stderr {
 58  color: #f88;
 59}
 60.traceback {
 61  background-color: #222;
 62}
 63.stdinfo {
 64  font-style: italic;
 65}
 66
 67.editor {
 68  border: 1px solid black;
 69  overflow-y: scroll;
 70  max-height: 24em;
 71  display: flex;
 72  flex-grow: 1;
 73  flex-shrink: 1;
 74  font-size: 12pt;
 75  line-height: 1.2rem;
 76}
 77.editor .linenos {
 78  background-color: #eee;
 79  white-space: pre;
 80  min-width: 2em;
 81  padding: 0 4px;
 82  text-align: right;
 83  height: fit-content;
 84}
 85.editor .text {
 86  background-color: #fff;
 87  flex-grow: 1;
 88  flex-shrink: 1;
 89  white-space: nowrap;
 90  overflow-x: scroll;
 91  overflow-y: hidden;
 92  padding: 0 4px;
 93  height: fit-content;
 94  min-height: 8em;
 95}
 96
 97/* Some things that crop up in puzzles */
 98[draggable] {
 99  padding-left: 1em;
100  background-image: url(../images/drag-handle.svg);
101  background-position: 0 center;
102  background-size: 1em 1em;
103  background-repeat: no-repeat;
104  background-color: rgba(255, 255, 255, 0.4);
105  margin: 2px 0px;
106  cursor: move;
107}
108
109[draggable].over,
110[draggable].moving {
111  background-color: rgba(127, 127, 127, 0.5);
112}