add translucency to og image

This commit is contained in:
krmax44 2022-03-16 11:50:49 +01:00
parent f67b4b0a62
commit 0987ffc769
No known key found for this signature in database
GPG key ID: 5C499A4F4EC4EE03

View file

@ -11,24 +11,28 @@ body {
background-size: cover;
background-position: center;
}
.bg-translucent {
background: rgba(255,255,255,0.9);
}
</style>
{% endblock %}
{% block body %}
<div class="og-container d-flex flex-column min-h-screen">
<div class="p-5">
<img class="img-fluid" src="https://media.frag-den-staat.de/files/media/main/98/91/98919aa3-9200-4f99-a7c7-de25cda8675a/logo-koalitionstracker-w.svg" alt="Koalitionstracker">
<img class="img-fluid col-5 px-0" src="https://media.frag-den-staat.de/files/media/main/98/91/98919aa3-9200-4f99-a7c7-de25cda8675a/logo-koalitionstracker-w.svg" alt="Koalitionstracker">
</div>
<div class="d-flex flex-column flex-grow-1">
<div class="d-flex flex-column flex-grow-1 bg-translucent">
<div class="p-5 d-flex align-items-center flex-1 h-100">
<h3>
{{ object.title|truncatechars:120 }}
{{ object.title|truncatechars:100 }}
</h3>
</div>
<div class="pb-5 px-5 mt-auto">
<div class="row justify-content-between align-items-center">
<div class="col-4">
<div class="badge badge-{{ object.get_status_css }} p-3">
<div class="badge badge-{{ object.get_status_css }} p-3 d-inline-flex">
<i class="fa fa-circle mr-3"></i>
<span class="h2 m-0">
{{ object.get_status_display }}