Using this with Stylus:

li .comment-node {
    padding: 0.5ex;
    border: 0.1ex solid #80808060 !important;
    border-radius: 1ex;
}

li li .comment-node {
    border-left: none !important;
    border-top: none !important;
    border-radius: 1ex 1ex 1ex 0 !important;
}

Or for a more lightweight change:

.comment-node {
    border-bottom: 0.1ex solid #80808060 !important;

It’s the lack of clearly visible separation between comments that just doesn’t look right to me.

  • RunAwayFrogOP
    link
    fedilink
    arrow-up
    1
    ·
    edit-2
    1 year ago

    And <pre> with a <code> inside it needs a class so we can easily set a different background for it! (edit: or maybe just set a different background for <pre> regardless of content).

    • RunAwayFrogOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      Alright, for code blocks, this looks good enough for me:

      pre {
          padding: 1ex;
          margin: 1ex;
          border: 0.1ex solid #80808060 !important;
          border-radius: 1ex;
          background: #aaaaaa60;
      }
      
      • RunAwayFrogOP
        link
        fedilink
        arrow-up
        1
        ·
        1 year ago

        And finally, quotes need a different background too:

        blockquote {
            background: #DDDDDD60;
        }
        
        • RunAwayFrogOP
          link
          fedilink
          arrow-up
          1
          ·
          1 year ago

          And finally

          Okay, finally finally this time. Full CSS with <code> alone also given a background, without breaking code inside <pre>:

          li .comment-node {
              padding: 0.5ex;
              border: 0.1ex solid #80808060 !important;
              border-radius: 1ex;
          }
          
          li li .comment-node {
              border-left: none !important;
              border-top: none !important;
              border-radius: 1ex 1ex 1ex 0 !important;
          }
          
          pre, code {
              background: #EEEEEE;
          }
          
          pre {
              padding: 1ex;
              margin: 1ex;
              border: 0.1ex solid #80808060 !important;
              border-radius: 1ex; 
          }
          
          blockquote {
              background: #DDDDDD60;
          }