////////////// Styles for the title block at the top of each page //////////////

.title {
  margin-bottom: 2.65rem;
  

  .metadata {
    padding: 0;
    margin: 0;
  
    li {
      margin-bottom: 0;
      padding: .45em .75em;
      color: $article-heading;
      background: rgba($article-heading, .07);
      font-size: .95rem;
      font-weight: $medium;
      line-height: 1.1rem;
      border-radius: 1.1em;
      display: inline-block;

      &.updated-in,
      &.date,
      &.flux-influxdb {
        padding: 0 0 0 .4em;
        background: none;
        font-weight: normal;
        font-style: italic;
        color: rgba($article-heading, .6)
      }
    }

    .updated-in + .date::before {
      content: "•" !important;
      display: inline;
      margin-right: .5rem;
    }

    .flux-influxdb a {
      cursor: pointer;
      opacity: .9;
      transition: color .2s, opacity .2s;
      &:hover {opacity: 1;}
    }
  }  
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(small) {
  .title {
    margin-bottom: 2rem;
    h1 { margin: .35em 0 .2em; font-size: 2.4rem; }
  }
}