diff --git a/_includes/page-intro.html b/_includes/page-intro.html index 4ed2333ac..a5bb29509 100644 --- a/_includes/page-intro.html +++ b/_includes/page-intro.html @@ -7,6 +7,8 @@ {% assign intro_image = intro_image | escape %}
{{ page.title }} + {% if page.image.caption %}{{ page.image.caption | markdownify | strip_newlines | remove: "

" | remove: "

" }}
{% endif %} +
{% endif %} diff --git a/_sass/basically-basic/_intro.scss b/_sass/basically-basic/_intro.scss index feec9de93..2e6bb9552 100644 --- a/_sass/basically-basic/_intro.scss +++ b/_sass/basically-basic/_intro.scss @@ -28,6 +28,30 @@ img { width: 100%; } + .image-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $base-font-family; + font-size: $min-font-size; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint($large) { + padding: 5px 10px; + } + + a { + color: #fff; + text-decoration: none; + } + } } .intro-text { diff --git a/_sass/basically-basic/_print.scss b/_sass/basically-basic/_print.scss index 61fdf91c8..c03d150cc 100644 --- a/_sass/basically-basic/_print.scss +++ b/_sass/basically-basic/_print.scss @@ -235,6 +235,18 @@ color: #000; } + .intro-image { + .image-caption { + color: #000 !important; + background: #fff !important; + opacity: 1; + + a { + color: #000 !important; + } + } + } + /* Hide the following elements on print ========================================================================== */