diff --git a/sass/_utils.scss b/sass/_utils.scss index 1c27b4156b9e71ec982836282c9909218661a0c7..62b66952ff8e8d983ffbf2c0ddcc813f50f86c8b 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -17,3 +17,13 @@ figure.image > figcaption { .is-fullheight { height: 100% } + +.is-text-nowrap { + text-wrap: nowrap !important; +} + +.author-images>figure { + margin-right: -1 * 20%; + // border: 1px solid white; + // border-radius: 100%; +} diff --git a/templates/blog/author_media.html b/templates/blog/author_media.html index 194feb9c17dc3ab7e01b298051c3f88fde871cae..0ac821c46d63ff39e24ab4c89a0abe98b3800b2f 100644 --- a/templates/blog/author_media.html +++ b/templates/blog/author_media.html @@ -1,8 +1,8 @@ -<div class="columns"> - <div class="column is-two-fifths"> +<div class="columns is-vcentered"> + <div class="column is-two-fifths author-images"> {% set authors_data = load_data(path="authors.json") -%} {% for author in post.authors -%} - <figure class="image is-48x48 is-inline-block" style="margin-right: -30px;"> + <figure class="image is-48x48 is-inline-block"> {% set meta = get_image_metadata(path="authors/" ~ author ~ ".jpg", allow_missing=true) -%} {% if meta -%} {% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%} @@ -19,9 +19,7 @@ <ul class="column is-three-fifths"> <div class="title is-5"> {% for author in post.authors -%} - <p class="is-inline"> - {{ authors_data[author].display_name }}{% if not loop.last %},{% endif %} - </p> + <span class="is-text-nowrap">{{ authors_data[author].display_name }}</span>{% if not loop.last %},{% endif %} {% endfor %} </div> </ul>