landing-pages/site/assets/scss/_blog-page.scss

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
@import "colors";
@import "media";
@import "fonts";

.tag {
  @extend .bodytext__medium--cerulean-blue;
  display: block;
  background-color: rgba(map-get($colors, cerulean-blue), 0.25);
  padding: 1px 15px;
  border-radius: 5px;
  transition: .2s;
  margin: 7px 7px;

  &.active, &:hover {
    background-color: map-get($colors, cerulean-blue);
    color: map-get($colors, white);
  }
}

.tags-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
  margin: -7px;

  @media (max-width: $mobile) {
    justify-content: center;
    margin-bottom: 7px;
  }
}

.all-tags-container {
  margin: 30px 0;
}

.new-entry {
  margin: 30px 0 20px;

  &--link {
    @extend .bodytext__medium--cerulean-blue;
    font-weight: 500;
  }
}

.blogpost-content {
  max-width: 790px;
  margin: 0 auto;

  &--header-wrapper {
    border-bottom: solid 1px map-get($colors, very-light-pink);
  }

  &__metadata {
    &--container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 30px;
    }

    &--title {
      @extend .header__small--greyish-brown;
      margin-bottom: 20px;
    }

    &--author {
      @extend .bodytext__medium--cerulean-blue;
      font-weight: 500;
      margin-bottom: 30px;
      margin-right: 17px;
    }

    &--social-media-icon {
      margin-right: 7px;
    }

    &--description {
      @extend .subtitle__large--brownish-grey;
      font-weight: normal;
      margin-bottom: 30px;
    }

    &--date {
      @extend .bodytext__medium--brownish-grey;
      margin-top: 17px;
    }
  }
}

@media (max-width: $mobile) {
  .blogpost-content {
    &__metadata {
      &--container {
        flex-direction: column;
        margin-bottom: 19px;
      }

      &--title {
        font-family: $primary-font !important;
        font-size: 24px !important;
        line-height: 1.5 !important;
        max-width: 272px;
        margin-bottom: 13px;
      }

      &--author {
        margin-bottom: 20px;
      }

      &--description {
        font-family: $primary-font !important;
        font-weight: normal !important;
        font-size: 16px !important;
        line-height: 1.63 !important;
        margin-bottom: 20px;
      }
    }
  }
}

.blog-pager {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .pager {
    margin-top: 40px;
    justify-content: center
  }
}