/* ========================================================================== Entries (Posts, collection documents, etc.) ========================================================================== */ .entry { @include clearfix(); margin-bottom: 2rem; padding-bottom: 2rem; &:not(:last-child) { border-bottom: 1px solid $border-color; } a { color: inherit; } } .entry-title { @include fluid-type($min-vw, $max-vw, 18px, 24px); margin-bottom: 0.5rem; color: tint($text-color, 25%); line-height: inherit; a { text-decoration: none; } } .entry-image { width: 100%; margin-bottom: 1rem; } .entry-meta { @include fluid-type($min-vw, $max-vw, 12px, 16px); margin-bottom: 1rem; ul { @include list-unstyled(); @include breakpoint(max-width $medium) { li { display: inline-block; margin-right: 1.5rem; } } @include breakpoint($medium) { li { padding-bottom: 0.5rem; } } } a { color: inherit; } .byline-item { &:not(:first-child) { margin-left: 1.5rem; } } .icon { margin-right: 0.5em; fill: $accent-color; } } /* Entry list ========================================================================== */ .entries-list { .entry-title { word-wrap: break-word; /* break long words that could overflow */ a:hover { color: $accent-color; } } .entry-excerpt { @include breakpoint($medium) { width: span(11 of 16); } /* normalize font sizes */ > * { font-size: 1em; } /* remove space after last child element */ > *:last-child { margin-bottom: 0; } } .entry-content { @include breakpoint($medium) { width: span(11 of 16); } /* remove space after last child element */ > *:last-child { margin-bottom: 0; } } .entry-meta { @include breakpoint($medium) { float: right; width: span(5 of 16 last); padding-left: gutter(1 of 16); } } > .summary { > p:first-child { font-size: 1.125em; line-height: 1.625; } } } /* Entries Grid Layout ========================================================================== */ .entries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 2em; .entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 0; padding-bottom: 2rem; border-bottom: none; } .entry-title { @include fluid-type($min-vw, $max-vw, 18px, 24px); -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .entry-excerpt, .entry-content { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; /* remove space after last child element */ > *:last-child { margin-bottom: 0; } } .entry-excerpt { /* normalize font sizes */ > * { font-size: 1em; } } .entry-meta { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-bottom: 1em; font-size: 0.75em; ul { li { display: inline-block; margin-right: 1.5rem; } } } .more-link { margin-top: -1em; a { text-decoration: none; } } } .entry-content { > p:first-child { font-size: 1.125em; line-height: 1.625; } h1, h2, h3, h4, h5, h6 { color: tint($text-color, 25%); } } /* Footnotes */ .footnotes { margin: 2rem 0; padding-top: 1rem; border-top: 1px solid $border-color; font-size: 80%; } /* Read more link */ .more-link { font-size: 75%; font-weight: bold; text-decoration: none; }