$sections:
  title,
  content,
  tag-bar
;

.article.page {
  display: grid;
  grid-template-areas:
    "title"
    "content"
    "tag-bar"
  ;
  grid-template-rows: 52px calc(100% - 88px) 36px;
  height: 100%;

  @each $section in $sections {
  .#{$section} { grid-area: $section; }
  }

  header.title {
    display: grid;
    font-size: 2em;
    font-weight: bold;
    grid-template-columns: auto 30px;
    padding: 10px;
  }

  .contents {
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
    overflow-y: auto;

    .jsx-parser > p:first-of-type { margin-top: 0; }
  }

  .tag-bar:not(.readonly) {
    background: darken($color-bg, 5%);
    box-shadow: 0 3px 3px $palette-gray-light inset;
  }
}

$sections:
  title,
  content,
  tag-bar
;

.article.page {
  display: grid;
  grid-template-areas:
    "title"
    "content"
    "tag-bar"
  ;
  grid-template-rows: 52px calc(100% - 88px) 36px;
  height: 100%;

  @each $section in $sections {
  .#{$section} { grid-area: $section; }
  }

  header.title {
    display: grid;
    font-size: 2em;
    font-weight: bold;
    grid-template-columns: auto 30px;
    padding: 10px;
  }

  .contents {
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
    overflow-y: auto;

    .jsx-parser > p:first-of-type { margin-top: 0; }

    .tab-set > .tabs.editor {
      .tab.is-active { background-color: #fff; }
      ~ .tab-contents { padding: 0; }
    }
  }

  .tag-bar:not(.readonly) {
    background: darken($color-bg, 5%);
    box-shadow: 0 3px 3px $palette-gray-light inset;
  }
}

Make editor tab color match editor theme
Make editor tab color match editor theme
