img{--img-shadow:0 2px 8px
    color-mix(in srgb, var(--img-bg, currentColor) 50%, transparent)}:is(a,span)[data-rating]{font-weight:100;white-space:nowrap;&::after { color:var(--color-bg-subtle); }}:is(a,span)[data-rating="0"]::after{content:"★★★★★";visibility:hidden}:is(a,span)[data-rating="1"]::after{content:"★★★★"}:is(a,span)[data-rating="2"]::after{content:"★★★"}:is(a,span)[data-rating="3"]::after{content:"★★"}:is(a,span)[data-rating="4"]::after{content:"★"}section.reviews{--stars-width:calc(5 * var(--base-font-size));--cover-width:var(--stars-width);hgroup { margin: var(--space-l) 0 var(--space-m); h2 { color: var(--color-text-subtle); line-height: var(--base-line-height); margin: 0; } } dl.stats { color: var(--color-text-subtle); display: inline-flex; flex-direction: row-reverse; flex-wrap: wrap; font-size: var(--font-size-sm); font-variant: all-small-caps; padding: 0; margin: 0 auto 0 0; dt, dd { display: inline; margin: 0; padding: 0; white-space: nowrap; } dd { padding-right: var(--space-xs); } dt:not(:first-of-type)::after { content: "•"; margin: 0 var(--space-xs); pointer-events: none; } } .review { margin-block: var(--space-m); & + .review, hgroup + .review { border-top: 1px solid var(--color-bg-subtle); padding-top: var(--space-m); } h3 { margin: 0; } p { margin: var(--space-m) 0; } .title cite { font-style: normal; } a:not(:hover) { color: inherit; } a.read-more { display: inline-block; font-weight: bold; } .cover { display: grid; max-width: var(--cover-width); img { background-color: var(--img-bg); border-radius: var(--space-xs); box-shadow: var(--img-shadow); object-fit: cover; overflow: hidden; width: 100%; } } a.rating { color: var(--color-text-subtle); text-align: center; } .title { display: inline; font-size: inherit; line-height: var(--space-m); } &.series-collapsed .title { &::after { color: var(--color-text-subtle); content: " series"; font-weight: normal; } } .authors, .network { color: var(--color-text-subtle); display: inline; a:not(:hover) { color: inherit; } } .authors::before { content: "by "; } .network::before { content: "on "; } .summary { color: var(--color-text-subtle); max-width: 600px; } ul.series { font-size: var(--font-size-sm); list-style: none; margin: var(--base-line-height) 0; padding: 0; small { white-space: nowrap; } } .cover-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 100%; height: auto; aspect-ratio: 2 / 3; img { width: 100%; height: 100%; object-fit: cover; display: block; background-color: var(--img-bg); box-shadow: var(--img-shadow); border-radius: var(--space-xs); overflow: hidden; } } } @media (max-width: 600px) { &::after { content: ""; display: table; clear: both; } hgroup { clear: right; } .review { clear: right; p, ul.series { font-size: var(--font-size-sm); margin: 0; } .cover { float: right; margin-left: var(--space-m); margin-bottom: var(--space-xs); width: var(--cover-width); } &:not([data-rating]) .cover { margin-bottom: var(--space-m); } .rating-title-authors { .rating { clear: right; color: inherit; float: right; font-size: var(--base-font-size); margin-left: var(--space-s); margin-bottom: var(--space-m); pointer-events: none; text-align: center; width: var(--cover-width); } } } } @media (min-width: 601px) { .review { display: grid; gap: 0 var(--space-m); grid-template-columns: var(--stars-width) 1fr var(--cover-width); grid-template-rows: auto auto 1fr; .cover { grid-column: 3; grid-row: 1 / span 2; } .rating-title-authors, .title-authors { display: contents; } .rating { grid-column: 1; grid-row: 1; } .title-authors { display: block; grid-column: 2; grid-row: 1; } .authors, .network { display: inline-block; } .summary { grid-column: 2; grid-row: 2 / span 2; } } } @media (min-width: 800px) { --cover-width: calc(8 * var(--base-font-size)); hgroup h2 { font-size: var(--font-size-xxl); } .review { padding-top: var(--space-m); margin-block: var(--space-m); .title-authors { font-size: var(--font-size-md); } } }}table.ratings{th, td { border-color: var(--color-bg-subtle); border-width: 0 0 1px; } tr:last-of-type { th, td { border-bottom: 0; } } caption { caption-side: top; color: var(--color-text-subtle); font-size: var(--font-size-sm); font-variant: small-caps; } a:not(:hover) { color: var(--color-text-subtle); } @media (max-width: 480px) { width: 100%; }}article.single-review{--cover-width:calc(16 * var(--base-font-size));picture.main { display: grid; grid-template-columns: var(--cover-width); place-content: center; img { border-radius: var(--space-xs); object-fit: cover; overflow: hidden; width: 100%; background-color: var(--img-bg); box-shadow: var(--img-shadow); } } &.short { .content { font-size: var(--font-size-md); } } @media (min-width: 800px) { align-items: start; display: grid; gap: 0 var(--space-l); grid-template-columns: 1fr var(--cover-width); grid-template-rows: auto auto 1fr auto auto; picture.main { grid-column: 2; grid-row: 1 / span 2; } .content { grid-column: 1; grid-row: 2 / span 3; } .summary { font-size: var(--font-size-md); strong { font-weight: inherit; } } .meta { grid-column: 2; grid-row: 3 / span 2; } .related { grid-column: 1; } &.no-content { .meta { grid-column: 1; grid-row: 2 / span 3; margin-top: 0; } } }}article.series-page{h1 { &::after { content: " book series"; color: var(--color-text-subtle); display: block; font-size: var(--font-size-lg); font-weight: 100; letter-spacing: normal; line-height: 1; } } .series-covers { --cover-width: calc(6 * var(--base-font-size)); align-items: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cover-width), 1fr)); gap: var(--space-m) var(--space-s); margin: var(--space-m) 0; &.long-series { --cover-width: calc(5 * var(--base-font-size)); } a.cover-link { display: block; text-decoration: none; .rating { color: var(--color-text-subtle); display: block; margin-top: var(--space-xs); text-align: center; } } picture.cover { display: block; img { border-radius: var(--space-xs); height: auto; object-fit: cover; width: 100%; background-color: var(--img-bg); box-shadow: var(--img-shadow); } } @media (min-width: 800px) { &:not(.long-series) { --cover-width: calc(8 * var(--base-font-size)); } } } table.meta { margin-inline: 0; } &.short { .content { font-size: var(--font-size-md); } } .child-books { font-size: var(--font-size-sm); } h4 { font-weight: normal; font-style: italic; margin-bottom: 0; } h4 + p { margin-top: 0; } @media (min-width: 800px) { align-items: start; display: grid; gap: 0 var(--space-l); grid-template-columns: 1fr 200px; .series-covers { grid-column: 1; grid-row: 2; margin: 0 0 var(--space-m); } .meta { margin: 0; grid-row: 2; grid-column: 2; } .content { margin-top: 0; grid-row: 3; grid-column: 1; } }}table.meta{margin:var(--space-l)auto;tr:last-of-type { th,td { border-bottom:0; } } th,td { border-color:var(--color-bg-subtle); border-width:0 0 1px; } th { font-size:var(--font-size-sm); font-variant:all-small-caps; padding-left:0; } a:not(:hover) { color:var(--color-text-subtle); } .subtitle { display:inline-block; font-style:italic; } @media (max-width:480px) { width:100%; } small { white-space:nowrap; } ul { display:block; list-style:none; margin-block:0; padding:0; li { display:inline-block; &:not(:last-child) { &::after { color:var(--color-text-subtle); content:", "; pointer-events:none; } } } }}footer{margin-top:var(--space-xl)}