Posts { grid-template-columns: auto minmax(800px, 1200px) 1rem auto section.top { display: grid grid-template-columns: 6rem 1fr 6rem grid-template-rows: auto auto grid-gap: 2rem section.viewSettings { grid-row: 1 / 2 grid-column: 2 / 3 display: flex justify-content: space-between align-items: center div.show { display: flex align-items: center span { font-weight: 600 margin-right: .3rem } div.toggle { color: #999 cursor: pointer padding: .25rem .5rem border: 1px solid rgba(0,0,0,0) i { margin-right: .3rem } -active { color: #222 i { color: #9754de } } :hover { border: 1px solid #9754de } } } div.sort { display: flex align-items: center span { font-weight: 600 } button { margin-left: .5rem } } } div.Compose { grid-row: 2 / 3 grid-column: 2 / 3 padding: 0 } } section.content { div.ThreadCard { border: none margin-top: 3rem } } } ThreadCard { -loading { min-height: 10rem } outline: none display: grid grid-template-columns: 6rem 1fr 6rem grid-gap: 2rem section.authored { display: grid grid-gap: .8rem align-content: start justify-items: end div.avatar { height: 4rem width: 4rem a { height: 4rem width: 4rem img { height: 4rem width: 4rem } } } div.name { text-align: end a { color: #222 font-weight: 600 text-decoration: none } } } section.content-preview { cursor: pointer div.root { div.Markdown { background-color: #000 color: #fff line-height: 1.4rem padding: 2rem max-height: 20rem overflow: hidden p { :first-of-type { margin-top: 0 } } (img) { max-width: 100% } (pre) { background-color: #000; } (code) { background-color: #000; } (a) { color: #db67ed } } } div.recent { div.msg { margin: 1rem 2rem 0 2rem :last-child { margin-bottom: .5rem } span.author { font-weight: 600 } span.preview { margin-left: .5rem } } } } section.stats { display: grid grid-gap: .8rem align-content: start justify-items: start div.participants { display: flex justify-content: flex-start flex-wrap: wrap a { height: 2rem width: 2rem margin: 0 .5rem .5rem 0 img { height: 2rem width: 2rem } } } div.counts { display: flex justify-content: flex-start flex-wrap: wrap div { margin: 0 .5rem .5rem 0 display: flex align-items: center i { margin-left: .3rem } } } } :focus { section.content-preview { div.root { div.Markdown { background: #6f0055 transition: background .2s ease-in } } } (a) { color: #db67ed } } }