SiteWebAstrolabe/src/scss/components/_post.scss

.post {
  margin-bottom: 8rem;

  &__body {
    display: flex;
    flex-direction: column;

    h1 {
      margin: 8rem 0 4rem;
    }

    h2,
    h3 {
      @include apply-utility('leading', 'tight');
      position: relative;
    }

    p {
      font-size: 1.125rem;
      margin-bottom: 1rem;
    }

    code {
      font-size: 1.2em;
      color: var(--color-theme-primary);
      font-weight: 600;
      margin-left: .01ch;
      margin-right: .01ch;
    }

    pre > code {
      margin-right: 0;
      border: 1px solid rgba(255, 255, 255, .1);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    blockquote {
      border-left: .4rem solid var(--color-theme-primary-glare);
      margin-left: 0;
      padding-left: get-size(500);
      font-style: italic;
      font-size: get-size(600);

      p {
        opacity: .85;
        padding: get-size(500) 0;
      }
    }

    ol:not([class]),
    ul:not([class]) {
      margin-left: get-size(800);
      margin-bottom: 1rem;

      li + li {
        margin-top: get-size(300);
      }
    }

    figure,
    figure + *,
    pre > code,
    .video-player,
    .video-player + *,
    video {
      --flow-space: #{get-size('max')};
    }

    figure,
    pre > code,
    .video-player,
    video {
      width: 100%;
      max-width: map-get($metrics, 'wrap-max-width');
      position: relative;
    }

    figure img {
      position: relative;
      z-index: 1;
    }

    figcaption {
      font-size: .8em;
      font-style: italic;
      max-width: map-get($metrics, 'wrap-inner-max-width');
      margin: .5rem auto 0;
      padding: 0 get-size(500);
    }

    .post-info {
      display: inline-block;
      align-self: flex-end;
      margin-bottom: 2rem;
    }

    .post-pic {
      align-self: center;
      margin-bottom: 3rem;
    }

    pre > code {
      display: block;
      background: var(--color-dark);
      padding: get-size(700);
      font-size: get-size(500);
    }

    // page specific
    .split-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-column-gap: 1.5rem;
      grid-row-gap: 0;
      margin-bottom: 2rem;

      .video-player > iframe {
        height: 89%;
      }
    }

    details {
      border-bottom: 1px solid var(--color-mid);

      &:first-of-type {
        border-top: 1px solid var(--color-mid);
        margin-top: 4rem;
      }

      &[open] {
        summary::after {
          transform: rotateZ(180deg);
        }
      }

      > summary:first-of-type {
        position: relative;
        padding: 1rem 0;
        list-style-type: none;
        cursor: pointer;

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          content: '';
          background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          width: 1rem;
          height: .625rem;
          position: absolute;
          right: 0;
          top: calc(50% - .3125rem);
        }
      }

      h3 {
        display: inline-block;
        font-weight: 600;

        .heading-permalink {
          display: none;
        }
      }
    }

    .table-wrapper {
      ~ p {
        font-size: .875rem;

        &:last-child {
          margin-bottom: 1.5rem;
        }
      }
    }

    table {
      margin-bottom: 1rem;
      
      &,
      thead,
      tbody {
        display: block;
      }

      th,
      td {
        padding: 0;
      }

      tr {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 1.5rem;
        grid-row-gap: 0;
        text-align: left;
      }

      thead th {
        font-weight: 600;

        &:nth-child(2) {
          background-color: var(--color-primary);
        }
      }

      tbody tr {
        padding: 1.5rem 0;

        td:first-child {
          font-weight: 600;
        }

        &:nth-child(odd) {
          background-color: var(--color-light-gray);
        }
      }
    }

    .process-cae {
      max-width: 34.875rem;
      margin: 0 auto;

      &.split {
        max-width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 1.5rem;
        grid-row-gap: 0;

        .process-cae__block:last-child {
          align-items: flex-end;
        }
      }

      &__block {
        display: flex;
        flex-direction: column;
        margin: 3rem 0;

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }

        p {
          margin-top: 2rem;
        }

        .highlight {
          background-color: var(--color-primary);
          width: 100%;
          margin: 3rem 0;
          padding: 1.5rem;
          border-radius: 1.5rem;
          display: flex;
          flex-direction: column;

          &.secondary {
            background-color: var(--color-secondary);
            color: var(--color-white);

            .heading-permalink svg {
              fill: var(--color-white);
            }

            a {
              background-color: var(--color-primary);
              color: var(--color-dark);
            }
          }

          h2 {
            @include apply-utility('font', 'base');
            text-align: left;
            font-weight: 600;
            margin-bottom: 1rem;
          }

          a {
            background-color: var(--color-secondary);
            color: var(--color-white);
            text-decoration: none;
            padding: .2rem .4rem;
          }

          ul + p {
            align-self: flex-end;
            font-size: 1rem;
            margin-top: 1rem;
            margin-bottom: .2rem;
          }
        }

        img {
          align-self: center;
          margin: 0 auto;
        }

        #small-boat {
          width: 8rem;
          margin-top: 4rem;
          margin-left: 18rem;
        }
      }
    }
  }

  &__footer {
    background: var(--color-theme-highlight);

    h2 {
      flex-shrink: 0;
      margin-right: get-size('base');
      color: var(--color-dark);
    }

    h2 a {
      @extend %visually-hidden;
    }

    a {
      background: var(--color-bg);
      padding: .4rem .6rem;
    }
  }
}

@media (max-width: 1199.98px) {
  .post {
    &__body {
      h1 {
        margin: 2rem 0 4rem;
        font-size: 1.75rem;
      }

      .split-content {
        display: block;
      }

      .table-wrapper {
        overflow-x: auto;
      }

      table {
        min-width: 48rem;
      }

      .process-cae {
        &__block {
          #small-boat {
            margin-left: auto;
          }
        }
      }
    }
  }
}

@media (max-width: 575.98px) {
  .post {
    &__body {
      .process-cae {
        &.split {
          display: block;

          .process-cae__block:last-child {
            align-items: flex-start;
          }
        }

        &__block {
          #small-boat {
            margin-left: auto;
            margin-right: auto;
          }
        }
      }

      .post-info {
        align-self: flex-start;
      }
    }
  }
}