mourningdove/htdocs/scss/skins/_entry-styles.scss

/**
* Styles for site-skinned journal pages (entry page and reply page)
*/


/**
* Some common elements that are used in a bunch of places:
*/

.poster {
  display: block;
}

.userpic a {
  display: block;
  line-height: 0;
}

.entry-interaction-links li,
.comment-interaction-links li,
.view-flat,
.view-threaded,
.view-top-only,
.expand_all {
  &::before {
    content: "(";
  }
  &::after {
    content: ")";
  }
}

ul.icon-links,
ul.text-links {
  margin: 0;
  padding: 0;
  display: inline;

  li {
    display: inline;
    list-style: none;
    margin-left: 0;
    margin-right: 8px;
    margin-bottom: 2px;

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

.icon-links img {
  vertical-align: middle;
}

.bottomcomment,
.entry .footer .inner,
.comment-pages {
  text-align: center;

  hr {
    width: 100%;
  }
}

// Don't add space after last element in an entry/comment. Avoids extra gaps
// if there's paragraph tags (markdown) instead of text nodes (casual HTML).
.comment-content, .entry-content {
  & > :last-child {
    margin-bottom: 0;
  }
}

/**
* Primary item styles:
* (The primary item is always an entry on entry pages, but is sometimes a
* comment on reply pages.)
*/

.entry, .reply-page-wrapper .comment {
  .header .inner {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap; // Fitting an OpenID username on mobile: always fun.
  }

  .userpic {
    display: inline-block;
    margin-right: .3rem;
    flex-shrink: 0;
  }

  .poster-info {
    display: inline-block;
    vertical-align: bottom;
    min-width: 0;

    .datetime {
      font-style: italic;
      &::before {
          content: "@";
      }
    }
  }

  .entry-title, .comment-title {
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    margin: 10px 0;
  }

  @media #{$medium-up} {
    .contents {
      margin-left: 30px;
    }
  }

}

/**
* Entry-specific styles:
*/

.entry {
  .metadata ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin-left: 0;
      margin-bottom: .75em;
    }
  }

  .metadata-label, .tag-text {
    font-weight: bold;
  }

  .tag ul {
    list-style: none;
    display: inline;
    margin-left: 0;
    padding: 0;

    li {
      display: inline;
      margin: 0;
    }
  }

  .entry-title {
    display: inline-block; // security level icon displays in front of title
  }

  .access-filter img { // security level icon
    vertical-align: baseline;
  }

  @media #{$medium-up} {
    .currents { // also includes tags
      margin-left: 50px;
    }
  }

}

ul.entry-management-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.entry-interaction-links, .comment-pages {
  font-weight: bold;
}

.comment-pages span {
  margin: 0 4px;
}

.action-box ul.pagination {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "prev pages next";
  text-align: center;
  margin: 0 0 0.75em 0;

  .arrow {
    align-self: center;
    justify-self: center;
    font-size:  large;
    margin: 0 .25em;
    &.disabled {
      opacity: 0.33;
      padding: .0625rem .25rem .0625rem;
    }
  }

  .arrow:first-child {
    grid-area: prev;
  }

  .arrow:last-child {
    grid-area: next;
  }

  li a {
    padding: .0625rem .25rem .0625rem;
    flex-grow: 1;
    opacity: 1;

    @media #{$small-only} {
      padding: .125rem .5rem .125rem;
    }
  }

  ul.pages {
    grid-area: pages;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 20rem;
  
    @media #{$small-only} {
      max-width: 10rem;
    }
  
  }
  
  ul.pages li {
    align-self: center;
    margin: 0 0.1rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    width: 1.8rem;
  }
}

/**
* Comment styles:
*/

// Don't let floated pics in a comment mess with the next comment's indent.
#comments .comment-thread {
  clear: both;
}

#comments .comment { // Doesn't affect the comment on a reply page
  min-width: 28em;
  @media #{$small-only} {
    min-width: 75vw;
  }

  .edittime {
    margin-top: 1.5em;
  }

  // Link text is "Thread." We want to keep this on reply pages, but on entry
  // pages it's redundant; the real permalink is in the comment header, and
  // there's already another "Thread" in the footer.
  .footer .commentpermalink {
    display: none;
  }

  .header {
    & > .inner {
      display: flex;
    }

    .comment-info, .userpic {
      // Using "exploded" border properties so we can set the color later.
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
    .comment-info {
      border-right-width: 1px;
      border-right-style: solid;
      flex-grow: 1;
    }

    line-height: 1.1;

    input {
      margin: 0;
    }

    @media #{$small-only} {
      font-size: 0.9em;

      .userpic {
        // deal with tall aspect userpics
        img {
          height: auto;
          max-width: 75px;
          max-height: 75px;
          object-fit: contain;
          object-position: left;
        }
      }
    }
  }
}

// Comment header backgrounds/borders
// Structure is:
// .comment-thread.comment-depth(odd|even)
  // .dwexpcomment
    // .comment-wrapper (possibly with .screened)
      // .comment
        // .inner
          // .header (needs background-color)
// Intended behavior is:
// - Background colors alternate by depth.
// - Screened comments are special and stand out.
.comment-depth-odd > .dwexpcomment .header {
  .comment-info, .userpic {
    background-color: $secondary-color-alternate;
    border-color: $strong-accent-color;
  }
}

.comment-depth-even > .dwexpcomment .header {
  .comment-info, .userpic {
    background-color: $secondary-color;
    border-color: $soft-accent-color;
  }
}

.comment-wrapper.screened > .comment .header {
  .comment-info, .userpic {
    background: $screened-comment-bg;
  }
}

.comment .admin-poster {
  white-space: nowrap;
}

.comment-content {
  padding: .5em 0 .25em;
}

.comment .footer {
  margin-top: .6em;
  margin-bottom: 1em;
}

.comment-info {
  padding: .25em;
  padding-left: .5em;

  & > span, & > ul, & > div {
    margin-right: .9em;
  }

  // width ignores inline image in some situations, so leave room for 16px
  // userhead + 4px breathing room.
  .poster {
    margin-right: 20px;
  }

  .comment-title {
    min-height: 1.4em; // take up as much space as a subject would.
    @media #{$small-only} {
      min-height: 0.6em; // except on mobile, where we can't spare the space.
    }

    margin: 0;
  }

  .datetime, .poster-ip, .commentpermalink, .multiform-checkbox {
    font-size: .8em;
  }

}

// Single-line collapsed comments -- more rightward slop, but easier to track
.comment-wrapper.partial {
  white-space: nowrap;
  .comment-title {
    font-size: 1em;
    display: inline;
    font-weight: normal;
  }

  .poster {
    display: inline;
  }
}


/**
* Reply page tweaks:
*/

.reply-page-wrapper {
  div.readlink {
    text-align: center;
    font-weight: bold;
  }

  .comment .reply, // reply action link
  .entry .footer {
    display: none;
  }
}