diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 0c5f0ff1dbd54543f4cd11e39128c214fc651497..0d7b98c469e7cb92b7a48c3d68e13da0e2017ee1 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -2757,6 +2757,14 @@ p{
display: none;
}
+.background-hover-zoom {
+ background-position: center;
+ background-size: 100%;
+ transition: background-size 0.3s ease-in;
+}
+
+.background-hover-zoom:hover {background-size: 110%}
+
.article-timeline-grid{
display: grid;
gap: 0.5rem;
diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
index 851bec63d55229e3a0901c667e4bb297de6d5c20..4011e5265175b81d16b70a249546586ff53571ee 100644
--- a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
@@ -3,8 +3,8 @@
class="mb-7">
<h2 class="head-2xl mb-4">Konec mezinárodní ostudy. Evropská komise uzavřela řízení o střetu zájmů</h2>
<div class="flex font-bold mb-4 text-xs text-white uppercase">
- <span class="bg-green-400 mr-1 p-2">Duben 2022</span>
- <span class="bg-violet-400 mr-1 p-2">#ENERGETIKA</span>
+ <span class="bg-green-500 mr-1 p-2">Duben 2022</span>
+ <span class="bg-violet-600 mr-1 p-2">#ENERGETIKA</span>
</div>
<p class="mb-8">
Zachránili jsme 180 miliard korun pro naše občany. Ostuda, kterou Česká republika musela podstupovat, je u konce.
diff --git a/main/styleguide/source/_patterns/molecules/representative-box.mustache b/main/styleguide/source/_patterns/molecules/representative-box.mustache
index d36333867403e03c1ebbebb1a539a1549eb58e10..b9b054544731e1d7e0f7441dc69cc89547526d53 100644
--- a/main/styleguide/source/_patterns/molecules/representative-box.mustache
+++ b/main/styleguide/source/_patterns/molecules/representative-box.mustache
@@ -1,4 +1,4 @@
-<div class="w-96 h-60 flex bg-white flex-col items-center bg-cover justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80"
+<div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
{{> atoms-button-animated(btn-text: "Poslanecký klub") }}
diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
index e797e3fb881353afafa145b07c5c1976d29c096e..97425639055c8f5cb0a91038d8c17e0616e9a158 100644
--- a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
+++ b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
@@ -8,8 +8,8 @@
<div class="article-timeline-grid__left-article xl:pt-8">
{{> molecules-work-article-preview }}
</div>
- <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
- <div class="article-timeline--month absolute bg-violet-400 p-1 text-white font-bold">
+ <div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
+ <div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
Červenec
</div>
</div>
@@ -26,8 +26,8 @@
<div class="article-timeline-grid__left-article xl:pt-8">
{{> molecules-work-article-preview }}
</div>
- <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
- <div class="article-timeline--month absolute bg-violet-400 p-1 text-white font-bold">
+ <div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
+ <div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
Srpen
</div>
</div>
diff --git a/main/styleguide/source/css/molecules/representative_box.pcss b/main/styleguide/source/css/molecules/representative_box.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..b7d0e5237abcfd0395afd155184221dfa761ba1b
--- /dev/null
+++ b/main/styleguide/source/css/molecules/representative_box.pcss
@@ -0,0 +1,7 @@
+.background-hover-zoom {
+ background-position: center;
+ background-size: 100%;
+ transition: background-size 0.3s ease-in;
+}
+
+.background-hover-zoom:hover {background-size: 110%}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index 8d54944096cfa76d0622686641c22d60d597a70f..27af71045a6fb2e82a6f1382df265d36c8d0cb9c 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/main/styleguide/source/css/style.pcss
@@ -30,6 +30,7 @@
@import "./molecules/contact_box.pcss";
@import "./molecules/sliding_button.pcss";
@import "./molecules/switch.pcss";
+@import "./molecules/representative_box.pcss";
@import "./organisms/article-timeline.pcss";
@import "./organisms/footer.pcss";
diff --git a/main/templates/main/blocks/articles_timeline_block.html b/main/templates/main/blocks/articles_timeline_block.html
index f192f8ed8d55db41c6d92f6957b1c3ed17dc924e..bba3c974a679f863a8a4bfe9911f1c0003ee0f6a 100644
--- a/main/templates/main/blocks/articles_timeline_block.html
+++ b/main/templates/main/blocks/articles_timeline_block.html
@@ -11,8 +11,8 @@
<div class="p-7 flex flex-col max-w-xl mb-8"/>
{% endfor %}
</div>
- <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
- <div class="article-timeline--month absolute bg-violet-400 p-1 text-white font-bold">
+ <div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
+ <div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
{{ month_article_data.month_text }}
</div>
@@ -26,4 +26,4 @@
</div>
</div>
</div>
-{% endfor %}
\ No newline at end of file
+{% endfor %}
diff --git a/main/templates/main/blocks/people_overview_block.html b/main/templates/main/blocks/people_overview_block.html
index f6305d7b4ff1d3fd94207e03efc168f2f72965b0..bbb8c4c3e1ab7140cb34533a90fa93328b4b9ac7 100644
--- a/main/templates/main/blocks/people_overview_block.html
+++ b/main/templates/main/blocks/people_overview_block.html
@@ -7,7 +7,7 @@
<div class="flex flex-wrap space-x-1 justify-center gap-2 md:gap-1 items-center">
{% for box in self.list %}
{% image box.image fill-500x500 as box_image %}
- <div class="w-96 h-60 flex bg-white flex-col items-center bg-cover justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80"
+ <div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80"
style="background-image: url('{{ box_image.url }}')">
<h5 class="head-alt-md text-white mt-24 mb-8">
{{ box.title }}
diff --git a/main/templates/main/includes/layout/footer.html b/main/templates/main/includes/layout/footer.html
index 0129c754c4c2bb29a89a6e87b2cebdb8e058a83d..b58f5c7948253f5b1106aeff515aaaeab5861461 100644
--- a/main/templates/main/includes/layout/footer.html
+++ b/main/templates/main/includes/layout/footer.html
@@ -61,8 +61,8 @@
{% else %}
{{ person.value.position }}
{% endif %}</strong>
- <span>{{ person.value.person.phone }}</span>
- <span class="text-turquoise-500 text-sm">{{ person.value.person.email }}</span>
+ <span>{{ person.value.person.phone | default_if_none:'' }}</span>
+ <span class="text-turquoise-500 text-sm">{{ person.value.person.email | default_if_none:'' }}</span>
</div>
</div>
{% endfor %}
diff --git a/main/templates/main/includes/person_article_preview.html b/main/templates/main/includes/person_article_preview.html
index 77c4d2578705b22099bff08cbecc682959835740..8ce9b4be40d9836f6e66f2f55760b14cb7d40403 100644
--- a/main/templates/main/includes/person_article_preview.html
+++ b/main/templates/main/includes/person_article_preview.html
@@ -1,8 +1,10 @@
{% for article_page in article_data_list %}
<div class="flex flex-col justify-between items-start mb-9">
<div class="flex font-bold mb-4 text-xs text-white uppercase">
- <span class="bg-green-500 mr-1 px-1">Duben 2022</span>
- <span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span>
+ <span class="bg-green-500 mr-1 px-1">{{ article_page.date }}</span>
+ {% for tag in article_page.tags.all %}
+ <span class="bg-violet-600 mr-1 px-1">{{ tag }}</span>
+ {% endfor %}
</div>
<h4 class="head-3xl mb-4">
{{ article_page.title }}
diff --git a/main/templates/main/includes/work_article_preview.html b/main/templates/main/includes/work_article_preview.html
index 81c1e424e27313dea00f58a8ce1b8b0cbee04fd3..47c4a79e4b1c4ec78020194a6c5af86fcd8716cf 100644
--- a/main/templates/main/includes/work_article_preview.html
+++ b/main/templates/main/includes/work_article_preview.html
@@ -10,9 +10,9 @@
{{ article_page.title }}
</h2>
<div class="flex font-bold mb-4 text-xs text-white uppercase">
- <span class="bg-green-400 mr-1 p-2">{{ article_page.date }}</span>
+ <span class="bg-green-500 mr-1 p-2">{{ article_page.date }}</span>
{% for tag in article_page.tags.all %}
- <span class="bg-violet-400 mr-1 p-2">{{ tag }}</span>
+ <span class="bg-violet-600 mr-1 p-2">{{ tag }}</span>
{% endfor %}
</div>
<p class="mb-8">