ernestwisniewski/kbin

:root {
  --kbin-entry-element-spacing: 10px;
}

.entry {
  display: grid;
  grid-template-areas: "vote image title"
                       "vote image shortDesc"
                       "vote image meta"
                       "vote image footer"
                       "body body body";
  grid-template-columns: min-content min-content 1fr;
  grid-template-rows: 1fr min-content;
  padding: 0;
  position: relative;
  z-index: 2;

  &.no-image {
    grid-template-areas: "vote title"
                       "vote shortDesc"
                       "vote meta"
                       "vote footer"
                       "body body";
    grid-template-columns: min-content 1fr;
  }

  header,
  .vote,
  figure,
  .no-image-placeholder,
  .short-desc,
  footer,
  &__meta {
    margin-left: var(--kbin-entry-element-spacing);
  }

  @include media-breakpoint-down(sm) {
    grid-template-areas: "image image"
                         "vote title"
                         "shortDesc shortDesc"
                         "meta meta"
                         "footer footer"
                         "body body";
    grid-template-columns: min-content 1fr;

    header,
    .vote,
    .short-desc,
    footer,
    &__meta {
      margin-left: var(--kbin-entry-element-spacing);
    }

    &.no-image {
      grid-template-areas: "vote title"
                           "shortDesc shortDesc"
                           "meta meta"
                           "footer footer"
                           "body body";
      grid-template-columns: min-content 1fr;
    }

    .view-compact & {
      grid-template-areas: "title title vote"
                       "meta meta image"
                       "footer footer image"
                       "body body body";
      grid-template-columns: 1fr min-content min-content;

      .vote {
        justify-content: right;
        margin-right: var(--kbin-entry-element-spacing);
        margin-left: 0;
      }

      .short-desc {
        display: none;
      }
    }

    .view-compact &.no-meta {
      grid-template-areas: "title vote"
                       "shortDesc shortDesc"
                       "meta meta"
                       "footer footer"
                       "body body";
      grid-template-columns: 1fr min-content;
    }
  }

  @include media-breakpoint-up(sm) {
    .view-compact & {
      grid-template-areas: "vote title image"
                       "vote meta image"
                       "vote footer image"
                       "body body body";
      grid-template-columns: min-content 1fr min-content;

      .short-desc {
        display: none;
      }
    }
  }

  &:hover,
  &:focus-visible {
    z-index: 3;
  }

  .vote {
    grid-area: vote;
    margin-top: var(--kbin-entry-element-spacing);
    margin-bottom: var(--kbin-entry-element-spacing);
  }

  figure,
  .no-image-placeholder {
    position: relative;
    grid-area: image;
    margin: var(--kbin-entry-element-spacing) 0 var(--kbin-entry-element-spacing) var(--kbin-entry-element-spacing);
    width: 170px;
    height: calc(170px / 1.5); // 3:2 ratio
    justify-self: right;
    overflow: hidden;

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

    .image-filler {
      position: absolute;
      background-position: center;
      filter: blur(8px);
      width: 110%;
      height: 110%;
      top: -5%;
      left: -5%;
    }

    .rounded-edges & {
      border-radius: var(--kbin-rounded-edges-radius);
    }

    .view-compact & {
      width: 170px;
      height: 100%;
      margin: 0 0 0 var(--kbin-entry-element-spacing);
    }

    .rounded-edges .view-compact & {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    @include media-breakpoint-down(lg) {
      width: 140px;
      height: calc(140px / 1.5); // 3:2 ratio
    }

    @include media-breakpoint-down(sm) {
      margin: 0;
      height: 110px;
      width: 100%;

      .view-compact & {
        margin: 0 10px 10px 10px;
        height: calc(100% - 10px);
        width: calc(100% - 10px);
      }

      .rounded-edges & {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }

      .rounded-edges .view-compact & {
        border-radius: var(--kbin-rounded-edges-radius) !important;
      }
    }
  }

  .no-image-placeholder {
    background: var(--kbin-vote-bg);
    font-size: 2.5rem;

    a {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    i {
      color: var(--kbin-vote-text-color);
      opacity: .5;
    }

    .view-compact & {
      display: none;
    }

    @include media-breakpoint-down(sm) {
      display: none;
    }
  }

  &.no-image {
    figure {
      display: none;
    }
  }

  header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    grid-area: title;
    margin: var(--kbin-entry-element-spacing);
    overflow-wrap: anywhere;

    h2, h1 {
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 1.2;
      margin: 0;

      a:visited {
        color: var(--kbin-entry-link-visited-color);
      }

      a:hover {
        color: var(--kbin-link-hover-color);
      }
    }

    h1 {
      font-size: 1.3rem;
    }
  }

  .short-desc {
    grid-area: shortDesc;

    p {
      font-size: .85rem;
      margin: 0 var(--kbin-entry-element-spacing) 1rem 0;
    }
  }

  &__body {
    grid-area: body;
    margin-top: 1.5rem;
  }

  &__meta {
    grid-area: meta;
    align-self: flex-end;

    .edited {
      font-style: italic;
    }
  }

  footer {
    grid-area: footer;
    align-self: flex-end;
    margin-bottom: var(--kbin-entry-element-spacing);

    menu {
      column-gap: 1rem;
      display: grid;
      grid-auto-columns: max-content;
      grid-auto-flow: column;
      list-style: none;
      opacity: .75;

      & > li {
        line-height: 1rem;
      }

      & > a.active,
      & > li button.active {
        text-decoration: underline;
      }

      button, input[type='submit'], a {
        @include kbin-btn-link;
      }
    }

    .view-compact & {
      margin-bottom: 0.3rem;
    }
  }

  &__domain {
    color: var(--kbin-meta-text-color);
    font-size: .7rem;

    a {
      color: var(--kbin-meta-text-color);
    }
  }

  .loader {
    height: 20px;
    position: absolute;
    width: 20px;
  }

  &:hover,
  &:focus-within {
    menu,
    .entry__meta {
      @include fade-in(.5s, .75);
    }
  }

  &--single {
    border-top: 0;
    margin-top: 0;

    .entry__body {
      margin: 0 var(--kbin-entry-element-spacing) var(--kbin-entry-element-spacing) var(--kbin-entry-element-spacing);
      padding: 3px;

      .content *:last-child {
        margin-bottom: 0;
      }

      .more {
        width: inherit;
        margin: var(--kbin-entry-element-spacing);

        bottom: 0;
        left: 0;
        right: 0;
      }

      h1, h2, h3, h4, h5, h6 {
        margin: 1rem auto;
      }

      h1 {
        font-size: 1.25rem;
      }

      h2 {
        font-size: 1.20rem;
      }

      h3 {
        font-size: 1.15rem;
      }

      h4 {
        font-size: 1.10rem;
      }

      h5 {
        font-size: 1.05rem;
      }

      h6 {
        font-size: 1rem;
      }

    }

    .no-image-placeholder {
      display: none;
    }

    .rounded-edges .view-compact & figure {
      border-top-right-radius: 0 !important;
    }

    @include media-breakpoint-down(sm) {
      .rounded-edges & figure {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
      }

      .rounded-edges .view-compact & figure {
        border-top-right-radius: var(--kbin-rounded-edges-radius);
      }
    }
  }

  small {
    font-size: .75rem;
  }

  .badge {
    display: inline-block;
    position: relative;
    top: -2px;
    padding: .25rem;
  }
}

.entry-cross {
  grid-template-areas: "vote meta" !important;
  grid-template-columns: min-content 1fr !important;
  margin-top: -.5rem;

  header {
    p {
      font-size: .9rem;
    }
  }

  .vote span {
    font-size: .7rem;
  }

  .vote button {
    height: 1.5rem
  }

  .vote {
    margin-right: 0 !important;
  }

  footer {
    margin-bottom: 0;
  }

  .meta {
    align-self: center;
  }

  footer {
    align-self: center;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
}

.page-entry-create {
  .container {
    margin: 0 auto;
    max-width: 30rem;

    .params {
      margin-bottom: 2.5rem !important;
    }
  }
}

.page-entry-single {
  .entry-comments {
    margin-bottom: 0.5rem;
  }
}