PageHeading {
  display: flex
  h1 {
    flex: 1
  }
  div.meta {
    a {
      font-size: 80%;
      background: rgb(112, 112, 112);
      border: 2px solid #313131;
      transition: opacity 0.2s;
      opacity: 0.6;
      padding: 6px 12px;
      color: white;
      border-radius: 4px;
      font-weight: bold;
      text-decoration: none;
      display: block;

      -subscribe {
        background-color: rgb(88, 171, 204);
        border-color: #20699c;
      }

      -unsubscribe {
        background-repeat: no-repeat
        background-position: right
        background-image: svg(subscribed)
        padding-right: 25px
      }

      :hover {
        opacity: 1
      }
    }
  }

  @svg subscribed {
    width: 20px
    height: 12px
    content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>"
  }
}