{{ post.data.title }}
+ +
+ {% if post.data.source and post.data.sourceLogo %}
+
+ {% endif %}
+ {{ post.data.title }}
+
{{ post.data.blurb }}
diff --git a/styles/components/_markup.scss b/styles/components/_markup.scss index 1a4cfcd..9d189d7 100644 --- a/styles/components/_markup.scss +++ b/styles/components/_markup.scss @@ -125,6 +125,12 @@ blockquote { $border: 0.5em solid $color; border-top: $border; border-bottom: $border; + + > p:only-child > a:only-child > img:only-child { + display: block; + max-width: 30rem; + margin: 0 auto; + } } .cta-link { @@ -207,6 +213,9 @@ ul.link-grid { } .post-list { + display: flex; + flex-direction: column; + align-items: stretch; @extend %content-gutter; margin-top: layout.$huge-gap; margin-bottom: layout.$huge-gap; @@ -215,11 +224,14 @@ ul.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: layout.$normal-gap; + justify-content: stretch; } } :any-link.post-card { - display: inline-block; + display: block; + padding-top: layout.$normal-gap; + padding-bottom: layout.$normal-gap; text-decoration: none; transition: background-color motion.$subtle, color motion.$subtle, box-shadow motion.$subtle; @@ -239,6 +251,26 @@ ul.link-grid { } } + &.external { + color: colors.$brown-800; + + > time { + color: colors.$brown-500; + } + + &:hover { + background-color: colors.$teal-300; + } + } + + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-top: 0; + } + > h2, > p { margin-left: 0; @@ -252,6 +284,12 @@ ul.link-grid { display: none; } + > img { + display: inline-block; + max-width: 4em; + max-height: 1em; + } + + time { margin-top: -1 * layout.$normal-gap; } @@ -260,6 +298,10 @@ ul.link-grid { > time { display: block; color: colors.$gray-600; + + + p { + margin-top: layout.$small-gap; + } } } @@ -270,4 +312,10 @@ ul.link-grid { @include colors.coderdojo-theme { color: colors.$brown-800; } + + > img { + display: block; + margin: 0 auto layout.$small-gap auto; + max-height: 6rem; + } }