fictioneer/css/post-list.css

2 lines
4.1 KiB
CSS
Raw Permalink Normal View History

.post-list{display:flex;flex-direction:column;gap:var(--post-list-gap, var(--content-list-gap, 4px));container-type:inline-size}.post-list-item{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"img ts" "img title" "img meta" "img bs";background:var(--post-list-li-background, var(--content-li-background));line-height:1.3;padding:.5rem 8px .5rem 0;border-radius:var(--layout-border-radius-small)}.post-list-item:is(._latest-updates,._latest-stories):not(._no-tax){grid-template-areas:"img ts" "img title" "img meta" "img tax" "img bs"}.post-list-item._no-footer{grid-template-areas:"img ts" "img title" "img bs"}.post-list-item._no-footer:is(._latest-updates,._latest-stories):not(._no-tax){grid-template-areas:"img ts" "img title" "img tax" "img bs"}.post-list-item._seamless{grid-template-rows:minmax(0.5rem, 1fr) auto auto minmax(0.5rem, 1fr);padding:0 8px 0 0}.post-list-item._seamless .post-list-item__image{height:100%;width:3rem}.post-list-item._seamless .post-list-item__image img{--layout-nested-border-radius-multiplier: 1;height:100%}.post-list-item._seamless:is(._latest-updates,._latest-stories):not(._no-tax){grid-template-rows:minmax(0.5rem, 1fr) auto auto auto minmax(0.5rem, 1fr)}.post-list-item._seamless._full .post-list-item__image img{border-top-right-radius:0;border-bottom-right-radius:0}.post-list-item._no-footer-date .post-list-item__title{padding-right:0}.post-list-item._no-thumbnail{padding-left:2px}.post-list-item._full:not(._seamless){padding-left:8px}.post-list-item._full._seamless._no-thumbnail{padding-left:10px}.post-list-item._lines{border-radius:0}.post-list-item._lines:not(:last-child){border-bottom:var(--content-li-hr-border);padding-bottom:calc(.5rem + var(--post-list-gap, var(--content-list-gap, 4px)))}.post-list-item._lines:not(:last-child)._seamless{padding-bottom:var(--post-list-gap, var(--content-list-gap, 4px))}.post-list-item__image{grid-area:img;align-self:center;margin-right:.75rem;width:2.5rem}.post-list-item__image[data-lightbox]{cursor:zoom-in}.post-list-item__image img{aspect-ratio:var(--post-item-image-aspect-ratio, 2/2.5);display:block;border-radius:calc(var(--layout-border-radius-small)*var(--layout-nested-border-radius-multiplier, 1));height:auto;width:100%;object-fit:cover}.post-list-item__title{grid-area:title;color:var(--post-list-title-color, var(--heading-link-color));font-family:var(--ff-post-list-title, var(--ff-heading));font-weight:var(--font-weight-medium);font-size:var(--post-list-title-font-size, clamp(13px, 0.2232142857vw + 12.2857142857px, 14px));font-size:var(--post-list-title-font-size, clamp(13px, 4.1cqw, 14px));margin-right:128px;width:fit-content}.post-list-item__title .protected-icon{font-size:.8em;margin-right:.125em;opacity:.9;transform:translateY(-0.125em)}@container (max-width: 639px){.post-list-item__title{margin-right:0}}.post-list-item__meta,.post-list-item__tax{grid-area:meta;color:var(--post-list-meta-color, var(--fg-600));font-family:var(--ff-post-list-meta, var(--ff-note));font-size:var(--post-list-meta-font-size, clamp(12px, 0.2232142857vw + 11.2857142857px, 13px));font-size:var(--post-list-meta-font-size, clamp(12px, 3.5cqw, 13px));line-height:1.5;margin-top:4px}.post-list-item__meta a:hover,.post-list-item__tax a:hover{--layout-link-color-hover: var(--post-list-meta-link-color-hover, var(--fg-200))}.post-list-item__meta .chapter-link-icon{color:var(--fg-800);line-height:inherit;margin-right:.25em}.post-list-item__meta-chapter,.post-list-item__meta-in-story{display:block;margin-bottom:3px}@container (min-width: 550px){.post-list-item__meta-chapter,.post-list-item__meta-in-story{display:inline}}.post-list-item__tax{grid-area:tax;margin-top:6px}.post-list-item__tax._pills{display:flex;gap:6px;flex-wrap:wrap}.post-list-item__tax .tag-pill._inline{font-size:inherit}.post-list-item :where(._floating-right){position:absolute;top:.5rem;right:8px;opacity:.5}.post-list-item :where(._floating-right)::before{display:none}@container (max-width: 639px){.post-list-item :where(._floating-right){position:static;opacity:1}.post-list-item :