diff --git a/_includes/cards/post_card.html b/_includes/cards/post_card.html new file mode 100644 index 0000000000000000000000000000000000000000..df711e4c878b54d9eea333b4fa313952ea09f2a9 --- /dev/null +++ b/_includes/cards/post_card.html @@ -0,0 +1,21 @@ +{%- comment -%} + +This is a card displaying post title and date. +Parameters: +post: The post which sould be displayed on the card + +{%- endcomment -%} + +<div class="card {{ include.class }} bg-light"> + <div class="card-header"> + <span class="badge badge-secondary"> + <i class="fas fa-calendar-day" aria-hidden="true"></i> + {{ include.post.data | date: "%d. %b. %y" }} + </span> + </div> + <div class="card-body"> + <a href="{{ include.post.url | relative_url }}" class="stretched-link"> + <h4 class="card-title">{{ include.post.title }}</h4> + </a> + </div> +</div> diff --git a/_includes/cards/post_card_image.html b/_includes/cards/post_card_image.html index d4bb2d5dbdbc6c266ab9e69bf578ebe5d5526980..e78f6b620b31a3de04fbc9a5c337ba319cf5f436 100644 --- a/_includes/cards/post_card_image.html +++ b/_includes/cards/post_card_image.html @@ -1,9 +1,7 @@ {%- comment -%} - - This is a card displaying post metadata as well as the title image. - Parameters: - post: The post which sould be displayed on the card - +This is a card displaying post metadata as well as the title image. +Parameters: +post: The post which sould be displayed on the card {%- endcomment -%} {%- if include.post.title_image == "default" %} {%- assign img_url = site.directory.images @@ -18,24 +16,24 @@ | relative_url -%} {%- endif -%} <div class="card {{ include.class }}"> - <a href="{{ include.post.url | relative_url }}"> - <img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image"> - <div class="card-img-overlay"> - <span class="badge badge-secondary"> - <i class="fas fa-calendar-day" aria-hidden="true"></i> - {{ include.post.data | date: "%d. %b. %y" }} - </span> - <span class="badge badge-dark"> - <i class="fas fa-tag" aria-hidden="true"></i> - {%- for category in include.post.categories -%} - {%- unless site.languages contains category -%} - {{ category | capitalize }} - {%- endunless -%} - {%- endfor -%} - </span> - </div> - <div class="card-body"> - <h3 class="card-title">{{ include.post.title }}</h3> - </div> - </a> + <img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image"> + <div class="card-img-overlay"> + <span class="badge badge-secondary"> + <i class="fas fa-calendar-day" aria-hidden="true"></i> + {{ include.post.data | date: "%d. %b. %y" }} + </span> + <span class="badge badge-dark"> + <i class="fas fa-tag" aria-hidden="true"></i> + {%- for category in include.post.categories -%} + {%- unless site.languages contains category -%} + {{ category | capitalize }} + {%- endunless -%} + {%- endfor -%} + </span> + </div> + <div class="card-body"> + <a href="{{ include.post.url | relative_url }}" class="stretched-link"> + <h4 class="card-title">{{ include.post.title }}</h4> + </a> + </div> </div> diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index e7c52bf2a1ba3db9c17d8cde31b4f596c81b5c9b..37c8878afab2dcc53b874f8602a8f9a7c8878220 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -30,9 +30,9 @@ {%- assign class="hide-on-mobile" -%} {%- endif -%} {%- if post_translated -%} - {%- include cards/post_card_image.html post=post_translated class=class -%} + {%- include cards/post_card.html post=post_translated class=class -%} {%- else -%} - {%- include cards/post_card_image.html post=post class=class -%} + {%- include cards/post_card.html post=post class=class -%} {%- endif -%} {%- endfor -%} </div> diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss index 04d03b8d1da9143f4f331a6f4cee0d94a2712a12..25572dde3055647f2c82fdaeb079aa583c088194 100644 --- a/_sass/common/_cards.scss +++ b/_sass/common/_cards.scss @@ -25,8 +25,15 @@ } .card-body { - h3 { - margin: 0 !important; + display: flex; + justify-content: center; + align-items: center; + + padding: .5rem; + + .card-title { + margin-bottom: .5rem; + margin-top: .5rem; } }