FixIt/assets/scss/pages/home/_index.scss

@use "core/functions" as *;
@use "core/mixins" as *;

.home {
  .home-profile {
    text-align: center;

    .home-avatar {
      padding: 0.5rem;

      img {
        display: inline-block;
        width: 8rem;
        height: auto;
        margin: 0 auto;
        transition: all 0.4s ease;
        box-shadow: 0 0 0 0.3618em light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
        @include border-radius(full);

        &:hover {
          position: relative;
          translate: 0 -0.75rem;
        }
      }
    }

    .home-title {
      font-size: 1.25rem;
      font-weight: bold;
      margin: 0;

      &:not(:empty) {
        padding: 0.5rem;
      }
    }

    .home-subtitle {
      font-size: 1rem;
      font-weight: normal;
      margin: 0;
      padding: 0.5rem;
    }

    .links {
      padding: 0.5rem;
      font-size: 1.5rem;

      a * {
        vertical-align: text-bottom;
      }

      img {
        height: 1.5rem;
        padding: 0 0.25rem;
      }
    }

    .home-disclaimer {
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: normal;
      margin: 0;
      padding: 0.5rem;
      color: fi-var(global-font-secondary-color);
    }
  }
}

.home.posts {
  .home-profile {
    padding: 2rem 0;
  }

  .home-avatar img {
    width: 6rem;
  }

  .summary {
    position: relative;
    padding-block: 1rem;
    color: fi-var(global-font-color);

    &:not(:last-of-type)::after {
      content: '';
      position: absolute;
      width: 100%;
      padding: 1.5px;
      translate: 0 18px;
      background: repeating-linear-gradient(
        135deg,
        fi-var(global-border-color) 0px,
        fi-var(global-border-color) 4px,
        transparent 4px,
        transparent 8px
      );
    }

    &:first-of-type {
      padding-top: 0;
    }

    .featured-image-preview {
      width: 100%;
      // use the same proportions as the cover image of https://dev.to/
      aspect-ratio: auto 1000 / 420;
      position: relative;
      margin: 0.6rem auto;
      transition: scale 0.4s ease;

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
      }

      &:hover {
        scale: 1.01;
      }
    }

    .single-title {
      font-size: 1.25rem;
      line-height: 140%;
      margin: 0.4rem 0;
    }

    .content {
      margin-top: 0.3rem;
      color: fi-var(global-font-tertiary-color);
      @include link(false, true);

      b,
      strong {
        color: fi-var(global-font-tertiary-color);
      }
    }

    .post-footer {
      margin-block: 0.4rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
      @include link(false, false);

      .post-tags {
        padding: 0;
        @include link(true, true);

        .post-tag:not(:last-child)::after {
          content: ',';
          margin-right: 0.25rem;
        }
      }
    }
  }
}