MaxMilton/ekscss-repl

/*
* Global app styles
*/

// TODO: Remove this once we no longer need the "WIP alert"
#alert {
  #apply: .alert, .alert-warning, .ma0, .tc;
}

/* Layout */

#app {
  display: grid;
  grid-template:
    'nav'
    'in'
    'out'
    'con'
    'foot';
  gap: 1em;
  height: 100%;

  @media ${x.media.l} {
    grid-template:
      'nav nav'
      'in out'
      'in con'
      'foot foot';
  }
}

#nav {
  grid-area: nav;
}

#in {
  grid-area: in;
  padding-left: 1em;
  // TODO: Allow users to resize the input, output, and console views
  // resize: horizontal;
}

#out {
  grid-area: out;
  padding-right: 1em;
}

#con {
  grid-area: con;
  padding-right: 1em;
}

#foot {
  grid-area: foot;
}

h2 {
  margin: 0 0 0.5em;
  line-height: 0; // FIXME: Just an experiment; REMOVE!!
}

/* Utils */

#out > .editor {
  // make it easy to copy the entire output
  user-select: all;
}