diff --git a/css/content.css b/css/content.css index b736561..a23e93e 100644 --- a/css/content.css +++ b/css/content.css @@ -6,6 +6,7 @@ .content h6 { font-family: var(--heading-font-family); margin-bottom: var(--space-sm); + color: var(--color-dark-blue); } .content h1 { diff --git a/css/excerpt.css b/css/excerpt.css index d32e8be..cfb5855 100644 --- a/css/excerpt.css +++ b/css/excerpt.css @@ -28,24 +28,23 @@ } } -.excerpt__title, -.excerpt__subtitle { +.excerpt__title { font-size: var(--size-heading-6); } -.excerpt__subtitle { - margin-top: var(--space-sm); -} - -.excerpt__metadata { +.excerpt__list { color: var(--color-grey); font-size: var(--size-body-extra-small); margin-bottom: var(--space-sm); } +.excerpt__list-item { + display: inline-block; + margin-bottom: var(--space-xs); +} + .excerpt__icon, .excerpt__text { - display: inline-block; vertical-align: middle; } @@ -54,14 +53,39 @@ } .excerpt__text { - margin: 0 15px 0 5px; + margin: 0 var(--space-sm) 0 var(--space-xxs); } .excerpt__audio { - display: block; margin-bottom: var(--space-sm); } .excerpt__image { height: 200px; + margin-bottom: var(--space-sm); +} + +.excerpt__links { + font-size: var(--size-body-extra-small); + margin-bottom: var(--space-sm); +} + +.excerpt__link { + display: inline; +} + +.excerpt__link:not(:last-child) { + position: relative; + margin-right: var(--space-xs); + padding-right: var(--space-xs); +} + +.excerpt__link:not(:last-child):after { + content: ""; + position: absolute; + top: 2px; + bottom: 2px; + right: 1px; + width: 2px; + background-color: var(--color-light-blue); } diff --git a/css/metadata.css b/css/metadata.css index 75860d8..82f8f5d 100644 --- a/css/metadata.css +++ b/css/metadata.css @@ -1,18 +1,9 @@ .metadata { - display: flex; - flex-flow: row wrap; font-size: var(--size-body-extra-small); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-light-grey); } -.metadata__item { - display: flex; - align-items: center; - margin: 0 var(--space-sm) var(--space-sm) 0; - color: var(--color-dark-blue); -} - @media (--viewport-md) { .metadata { margin-bottom: var(--space-md); @@ -21,13 +12,8 @@ @media (--viewport-lg) { .metadata { - flex-flow: column wrap; border-bottom: none; } - - .metadata__item { - margin-right: 0; - } } @media (--viewport-lg) and (min-height: 540px) { @@ -36,14 +22,37 @@ } } -.metadata__item--light { +.metadata__list { + display: flex; + flex-flow: row wrap; +} + +@media (--viewport-lg) { + .metadata__list { + flex-flow: column wrap; + } +} + +.metadata__list-item { + display: flex; + align-items: center; + margin: 0 var(--space-sm) var(--space-sm) 0; +} + +@media (--viewport-lg) { + .metadata__list-item { + margin-right: 0; + } +} + +.metadata__list-item--light { color: var(--color-grey); display: none; margin-bottom: var(--space-sm); } @media (--viewport-lg) { - .metadata__item--light { + .metadata__list-item--light { display: block; } } diff --git a/theme/partials/excerpt.php b/theme/partials/excerpt.php index b7112dc..2f282de 100644 --- a/theme/partials/excerpt.php +++ b/theme/partials/excerpt.php @@ -13,30 +13,36 @@ global $excerpt;