astuto/app/javascript/stylesheets/components/Post.scss

.pageContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

  @include media-breakpoint-down(sm) {
    flex-direction: column;

    .postAndCommentsContainer { width: 100%; }
  }

  .sidebar {
    .postUpdateListContainer {
      @extend .sidebarCard;

      .postUpdateList {
        @extend
          .scroll-shadows,
          .w-100;

        max-height: 250px;
        overflow-y: scroll;

        .postUpdateListItem {
          @extend
            .d-flex,
            .flex-column,
            .p-2;

          &:after { // displays the little centered border under each post update
            content: "";
            display: block;
            margin: 0 auto;
            width: 25%;
            padding-top: 16px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          }

          .postUpdateListItemHeader {
            @extend .d-flex;

            span {
              @extend
                .ml-2;

              font-weight: 600;
              vertical-align: middle;
            }
          }

          .postUpdateListItemBody {
            @extend .my-1;

            font-size: 15px;

            p { margin: 0; } // <p> tag generated by ReactMarkdown component
          }
        }
      }
    }

    .likeListContainer {
      @extend .sidebarCard;

      .likeList {
        @extend
          .scroll-shadows,
          .w-100;

        max-height: 170px;
        overflow-y: scroll;

        .likeListItem {
          @extend
            .p-2,
            .my-1;
  
          .likeListItemName {
            @extend .ml-2;
          }
        }
      }
    }

    .actionBoxContainer {
      @extend
        .sidebarCard,
        .text-center;

      .btn {
        @extend
          .mt-3,
          .mb-1;
      }
    }
  }

  .postAndCommentsContainer {
    @extend
      .card,
      .flex-grow-1,
      .p-3,
      .mb-3;

    .postInfo {
      @extend .d-flex;

      span {
        @extend .mr-2;
      }
    }

    .postHeader {
      @extend
        .d-flex;

      a {
        @extend
          .ml-1;
        
        line-height: 1em;
      }
    }

    .postSettings {
      @extend
        .d-flex,
        .justify-content-between;

      .selectPicker {
        @extend
          .custom-select,
          .mx-2;
      }
    }

    .postDescription {
      @extend
        .my-3;

      color: $astuto-black;
    }
  }
}