diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 196953d1e6fd253d8479f588173df87d1cd2991c..0d7b98c469e7cb92b7a48c3d68e13da0e2017ee1 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -1273,6 +1273,11 @@ video {
color: #000000;
}
+.btn--violet-500 .btn__icon{
+ border-color: rgb(93, 0, 64);
+ background-color: #670047;
+}
+
.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
background-color: rgb(82, 0, 57);
color: #fff;
@@ -1301,44 +1306,6 @@ video {
color: #000000 !important;
}
-.btn--violet-700 .btn__body, .btn--violet-700 .btn__icon{
- background-color: #7D347D;
- color: #000000;
-}
-
-.btn--violet-700 .btn__icon{
- border-color: rgb(113, 47, 113);
- background-color: #7D347D;
-}
-
-.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
- background-color: rgb(100, 42, 100);
- color: #fff;
-}
-
-.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
- border-color: rgb(88, 36, 88);
-}
-
-.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
- color: #fff;
- fill: #fff;
-}
-
-.btn--hoveractive.btn--to-violet-700:hover .btn__body, .btn--to-violet-700.btn--activated .btn__body{
- background-color: #7D347D !important;
- color: #000000 !important;
-}
-
-.btn--hoveractive.btn--to-violet-700:hover .btn__icon, .btn--to-violet-700.btn--activated .btn__icon{
- border-color: rgb(113, 47, 113) !important;
- background-color: #7D347D !important;
-}
-
-.btn--hoveractive.btn--to-violet-700:hover .btn__inline-icon, .btn--to-violet-700.btn--activated .btn__inline-icon{
- color: #000000 !important;
-}
-
.btn--red-600 .btn__body, .btn--red-600 .btn__icon{
background-color: #d60d53;
color: #ffffff;
@@ -2790,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;
@@ -3001,7 +2976,7 @@ p{
.main-menu__main .menu-link{
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.main-menu__main .menu-link{
@@ -3018,7 +2993,7 @@ p{
.main-menu__main .menu-link{
--tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
+ color: rgb(255 255 255 / var(--tw-text-opacity));
}
.main-menu__main .menu-link:hover{
@@ -3026,14 +3001,6 @@ p{
text-decoration-line: none;
}
-@media (min-width: 1200px){
-
- .main-menu__main .menu-link{
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- }
-}
-
@media (min-width: 1200px){
.main-menu__main .menu-link{
@@ -3048,14 +3015,6 @@ p{
}
}
-@media (min-width: 1200px){
-
- .main-menu__main .menu-link{
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
-}
-
.navbar-background {
background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
min-height: 63px;
@@ -3075,22 +3034,9 @@ p{
.main-menu__external{
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-@media (min-width: 1200px){
-
- .main-menu__external{
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
-}
-
-.main-menu__external {
+ color: rgb(255 255 255 / var(--tw-text-opacity));
grid-area: external;
}
@@ -3121,31 +3067,6 @@ p{
}
}
-.container {
- display: inline-block;
- cursor: pointer;
-}
-
-.bar1, .bar2, .bar3 {
- width: 35px;
- height: 5px;
- background-color: white;
- margin: 6px 0;
- transition: 0.4s;
-}
-
-#menuToggle:checked + label .bar1 {
- transform: rotate(-45deg) translate(-9px, 6px);
- background-color: black;
-}
-
-#menuToggle:checked + label .bar2 {opacity: 0;}
-
-#menuToggle:checked + label .bar3 {
- transform: rotate(45deg) translate(-8px, -8px);
- background-color: black;
-}
-
.newsletter-grid{
display: grid;
@@ -3251,14 +3172,6 @@ p{
z-index: 10;
}
-.z-50{
- z-index: 50;
-}
-
-.z-40{
- z-index: 40;
-}
-
.col-span-4{
grid-column: span 4 / span 4;
}
@@ -3287,10 +3200,6 @@ p{
grid-column-end: 3;
}
-.m-0{
- margin: 0px;
-}
-
.mx-1{
margin-left: 0.25rem;
margin-right: 0.25rem;
@@ -3386,10 +3295,6 @@ p{
margin-bottom: 2.5rem;
}
-.-mt-20{
- margin-top: -5rem;
-}
-
.mt-20{
margin-top: 5rem;
}
@@ -3622,16 +3527,6 @@ p{
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
-.space-x-10 > :not([hidden]) ~ :not([hidden]){
- --tw-space-x-reverse: 0;
- margin-right: calc(2.5rem * var(--tw-space-x-reverse));
- margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.overflow-auto{
- overflow: auto;
-}
-
.rounded-full{
border-radius: 9999px;
}
@@ -3836,14 +3731,6 @@ p{
padding-top: 1rem;
}
-.pt-20{
- padding-top: 5rem;
-}
-
-.pb-8{
- padding-bottom: 2rem;
-}
-
.pb-32{
padding-bottom: 8rem;
}
@@ -4010,12 +3897,6 @@ p{
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.shadow-2xl{
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
.drop-shadow-xl{
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4446,10 +4327,6 @@ a.icon-link:hover span{
@media (min-width: 1200px){
- .xl\:static{
- position: static;
- }
-
.xl\:absolute{
position: absolute;
}
@@ -4520,14 +4397,6 @@ a.icon-link:hover span{
margin-bottom: 7rem;
}
- .xl\:mr-0{
- margin-right: 0px;
- }
-
- .xl\:-mt-0{
- margin-top: -0px;
- }
-
.xl\:mt-0{
margin-top: 0px;
}
@@ -4560,8 +4429,8 @@ a.icon-link:hover span{
height: 100vh;
}
- .xl\:h-auto{
- height: auto;
+ .xl\:min-h-screen{
+ min-height: 100vh;
}
.xl\:w-36{
@@ -4580,10 +4449,6 @@ a.icon-link:hover span{
width: 100%;
}
- .xl\:w-auto{
- width: auto;
- }
-
.xl\:max-w-xl{
max-width: 36rem;
}
@@ -4600,10 +4465,6 @@ a.icon-link:hover span{
flex-direction: column;
}
- .xl\:flex-wrap{
- flex-wrap: wrap;
- }
-
.xl\:items-start{
align-items: flex-start;
}
@@ -4612,10 +4473,6 @@ a.icon-link:hover span{
align-items: center;
}
- .xl\:justify-start{
- justify-content: flex-start;
- }
-
.xl\:justify-end{
justify-content: flex-end;
}
@@ -4628,12 +4485,6 @@ a.icon-link:hover span{
gap: 1.25rem;
}
- .xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){
- --tw-space-x-reverse: 0;
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
- }
-
.xl\:justify-self-end{
justify-self: end;
}
@@ -4669,18 +4520,6 @@ a.icon-link:hover span{
padding-bottom: 9rem;
}
- .xl\:pt-0{
- padding-top: 0px;
- }
-
- .xl\:pb-0{
- padding-bottom: 0px;
- }
-
- .xl\:pr-5{
- padding-right: 1.25rem;
- }
-
.xl\:pt-8{
padding-top: 2rem;
}
@@ -4689,8 +4528,8 @@ a.icon-link:hover span{
padding-top: 3.5rem;
}
- .xl\:text-left{
- text-align: left;
+ .xl\:pb-0{
+ padding-bottom: 0px;
}
.xl\:text-center{
@@ -4713,17 +4552,6 @@ a.icon-link:hover span{
font-size: 7.5rem;
}
- .xl\:text-white{
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
-
- .xl\:shadow-none{
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
- }
-
.xl\:duration-200{
transition-duration: 200ms;
}
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/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
index 73216944f7cc2364386d106d0323de5ff95e880f..7e40cb3b801e7b697b3b6d76102087907a560776 100644
--- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
@@ -1,4 +1,4 @@
-<div class="bg-cover bg-no-repeat section-clip py-16 xl:h-screen lg:py-36"
+<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36"
style="background-image: url('../../images/background-images/bg-join-us.jpg')">
<div class="container--wide mx-auto z-10">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
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/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
index 9ce82e9d28a4b7f6c636a5a52fc284484fbf05ed..afad100b8dcb9b53f1b57f88147a3e32a49e9695 100644
--- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
@@ -1,4 +1,4 @@
-<div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:h-screen relative z-10">
+<div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:min-h-screen relative z-10">
<img src="../../images/background-images/bg-bartos-newsletter.jpg" alt="" class="absolute h-full w-full object-cover">
<div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
<div class="grid-full newsletter-grid">
diff --git a/main/styleguide/source/_patterns/organisms/representatives-section.mustache b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
index 3589a2ea65859342628610d97757b7dbbb02f02d..a3ce163b98c9e745266e87b6595808a3dc4c100c 100644
--- a/main/styleguide/source/_patterns/organisms/representatives-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
@@ -1,11 +1,13 @@
-<div class="container--medium mb-8 xl:h-screen flex flex-col justify-center lg:mb-16">
- <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
- Piráti zastupují občany
- </h2>
- <div class="flex flex-wrap space-x-1 justify-center gap-2 md:gap-1 items-center">
- {{> molecules-representative-box }}
- {{> molecules-representative-box }}
- {{> molecules-representative-box }}
- {{> molecules-representative-box }}
+<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36">
+ <div class="container--wide mx-auto z-10">
+ <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
+ Piráti zastupují občany
+ </h2>
+ <div class="flex flex-wrap gap-2 md:gap-1 justify-center items-center md:flex-row">
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ {{> molecules-representative-box }}
+ </div>
</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/boxes_block.html b/main/templates/main/blocks/boxes_block.html
index 638b941a816fb420220e08569ad486a59862e2e5..2facaba344ca0de84179472c559340f78a920784 100644
--- a/main/templates/main/blocks/boxes_block.html
+++ b/main/templates/main/blocks/boxes_block.html
@@ -1,6 +1,6 @@
{% load static wagtailimages_tags %}
-<div class="bg-cover bg-no-repeat section-clip py-16 xl:h-screen lg:py-36"
+<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36"
style="background-image:
{% if self.image %}
{% image self.image original as original_image %}
diff --git a/main/templates/main/blocks/people_overview_block.html b/main/templates/main/blocks/people_overview_block.html
index 322d84c820d3386caa3688d22bccf5caf3264c6b..bbb8c4c3e1ab7140cb34533a90fa93328b4b9ac7 100644
--- a/main/templates/main/blocks/people_overview_block.html
+++ b/main/templates/main/blocks/people_overview_block.html
@@ -1,13 +1,13 @@
{% load wagtailimages_tags %}
-<div class="container--medium mb-8 xl:h-screen flex flex-col justify-center lg:mb-16">
+<div class="container--medium mb-8 xl:min-h-screen flex flex-col justify-center lg:mb-16">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
<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/newsletter_section.html b/main/templates/main/includes/newsletter_section.html
index 82dddf3626d4145a1ee92ececbb77430fcd88e6f..ffca9ac218769ee54bd290c66f2bb6258a0904e8 100644
--- a/main/templates/main/includes/newsletter_section.html
+++ b/main/templates/main/includes/newsletter_section.html
@@ -1,6 +1,6 @@
{% load static %}
-<div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:h-screen relative z-10">
+<div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:min-h-screen relative z-10">
<img src="{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}" alt="" class="absolute h-full w-full object-cover">
<div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
<div class="grid-full newsletter-grid">
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">