portfoligor/assets/scss/_lists.scss

///////////////////
//               //
//     LISTS     //
//               //
///////////////////

@use "@picocss/pico/scss/colors/index" as *;

/* Lists of posts (like in categories page) */
.posts-list {
  display: flex;
  flex-direction: column;
  margin-bottom: .5em;

  > article {
    padding-bottom: .5rem;
  }
}

/* Lists of the main page, for contact */
.home-lists {

  margin: 0;

  @media (min-width: 768px) {
    display: inline-flex;
    flex-flow: row;
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;      // set the container width

    dt {
      flex: 0 0 24%;
      word-wrap: anywhere;
    }

    dd {
      flex: 0 0 74%;
      margin-left: auto;
      text-align: left;
    }
  }

  dd {
    margin-left: .5rem;
  }

  dt::after {
    content: ' :';
  }

}

/* List under the post information summary */
.post-info {

  summary,
  ol,
  ul,
  li {
    margin: 0;
  }

  ul {
    padding: 0 0 calc(var(--pico-spacing)/1) 0;

  }

  li {
    display: flex;

    > ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      white-space: pre;
    }

    > ul::before {
      content: ' ';
      white-space: pre;
    }
  }

}

details[open] > ul {
  border-bottom: var(--pico-border-width) solid $purple-200;
}

@media (min-width: 576px) {
  .post-info > ul {
    display: flex;
    flex-wrap: wrap;

    > li:not(:last-child) {
      &::after {
        content: ' / ';
        white-space: pre;
      }
    }
  }
}

.post-taxonomies:not(:last-child) {
  &::after {
    content: ', ';
  }
}

.list-footer {
  padding-left: .5em;
}