Merge branch 'feature/pirati-cz' into feature/pirati-cz-ondra

district/blocks.py

@@ -256,6 +256,7 @@ class InteractiveProgramBlock(StructBlock):
             ("verejne-sluzby", "Veřejné služby"),
             ("zdravotni-pece", "Zdravotní péče"),
             ("sport", "Sport"),
+            ("sport-plavec", "Sport - plavec"),
             ("socialni-politika", "Sociální politika"),
             ("aktivni-verejnost", "Aktivní veřejnost"),
             ("priroda", "Příroda"),

district/migrations/0096_districtelectioncampaignpage_show_program_points_inline_and_more.py

+# Generated by Django 4.0.7 on 2022-08-11 16:38
+
+from django.db import migrations, models
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0095_alter_districtpersonpage_options_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='districtelectioncampaignpage',
+            name='show_program_points_inline',
+            field=models.BooleanField(default=False, help_text='Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku.', verbose_name='Zobrazit obsah celého programu na jedné stránce'),
+        ),
+        migrations.AlterField(
+            model_name='districtinteractiveprogrampage',
+            name='content',
+            field=wagtail.fields.StreamField([('interactive_program_block', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock(label='Název části programu', required=True)), ('heading', wagtail.blocks.CharBlock(label='Nadpis', required=True)), ('description', wagtail.blocks.RichTextBlock(blank=True, label='Krátký popis, BEZ BODŮ', required=False)), ('icon', wagtail.blocks.ChoiceBlock(choices=[('verejne-sluzby', 'Veřejné služby'), ('zdravotni-pece', 'Zdravotní péče'), ('sport', 'Sport'), ('sport-plavec', 'Sport - plavec'), ('socialni-politika', 'Sociální politika'), ('aktivni-verejnost', 'Aktivní veřejnost'), ('priroda', 'Příroda'), ('vzdelavani', 'Vzdělávání'), ('kultura', 'Kultura'), ('otevrena-radnice', 'Otevřená radnice'), ('cestovni-ruch', 'Cestovní ruch'), ('doprava', 'Doprava'), ('bydleni', 'Bydlení')], label='Ikona')), ('program_items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('content', wagtail.blocks.RichTextBlock(label='Obsah', required=True))]), label='Seznam bodů', required=True))]))], use_json_field=None, verbose_name='Části programu'),
+        ),
+    ]

district/migrations/0097_alter_districtelectioncampaignpage_show_program_points_inline.py

+# Generated by Django 4.0.7 on 2022-08-11 16:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0096_districtelectioncampaignpage_show_program_points_inline_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='districtelectioncampaignpage',
+            name='show_program_points_inline',
+            field=models.BooleanField(default=False, help_text='Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku.', verbose_name='Zobrazit obsah programu na jedné stránce'),
+        ),
+    ]

district/migrations/0098_alter_districtelectionprogrampage_guarantor.py

+# Generated by Django 4.0.7 on 2022-08-11 19:26
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0097_alter_districtelectioncampaignpage_show_program_points_inline'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='districtelectionprogrampage',
+            name='guarantor',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.PROTECT, to='district.districtpersonpage', verbose_name='Garant'),
+        ),
+    ]

district/migrations/0099_alter_districtelectionprogrampage_guarantor.py

+# Generated by Django 4.0.7 on 2022-08-11 19:27
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0098_alter_districtelectionprogrampage_guarantor'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='districtelectionprogrampage',
+            name='guarantor',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, to='district.districtpersonpage', verbose_name='Garant'),
+        ),
+    ]

district/models.py

@@ -856,7 +856,11 @@ class DistrictElectionProgramPage(
     ### FIELDS
 
     guarantor = models.ForeignKey(
-        "district.DistrictPersonPage", verbose_name="Garant", on_delete=models.PROTECT
+        "district.DistrictPersonPage",
+        verbose_name="Garant",
+        on_delete=models.PROTECT,
+        blank=True,
+        null=True,
     )
     image = models.ForeignKey(
         "wagtailimages.Image",
@@ -917,6 +921,11 @@ class DistrictElectionCampaignPage(DistrictElectionBasePage):
         max_length=128,
         help_text="Např. Program pro magistrát.",
     )
+    show_program_points_inline = models.BooleanField(
+        "Zobrazit obsah programu na jedné stránce",
+        default=False,
+        help_text="Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku."
+    )
     hero_headline = models.CharField(
         "Banner headline",
         max_length=128,
@@ -976,6 +985,7 @@ class DistrictElectionCampaignPage(DistrictElectionBasePage):
                 FieldPanel("number"),
                 FieldPanel("candidate_list_title"),
                 FieldPanel("program_point_list_title"),
+                FieldPanel("show_program_points_inline"),
                 FieldPanel("content"),
             ],
             "Personalizace",

district/static/district/svg/theme-icons/sport-plavec.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="50mm"
+   height="50mm"
+   version="1.1"
+   viewBox="0 0 50 50"
+   id="svg7">
+  <defs
+     id="defs11" />
+  <metadata
+     id="metadata2">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     d="m 33.448763,31.618729 c -5.495869,0 -4.690306,-3.439903 -8.266348,-3.470254 -3.688769,0.03184 -2.758339,3.470254 -8.31664,3.470254 -3.405219,0 -4.831647,-1.596384 -5.394414,-2.153084 L 23.645862,19.39827 c -0.28546,-0.146458 -2.745333,-1.578176 -6.525151,-1.578176 -1.089982,0 -2.183433,0.121139 -3.254338,0.365062 l -3.346254,0.76689 c -0.209151,0.04849 -0.418303,0.07173 -0.6243332,0.07173 -1.3796033,0 -2.7713466,-1.110793 -2.7713466,-2.778283 0,-1.264275 0.8697312,-2.408019 2.1539504,-2.701976 l 3.3462534,-0.766891 c 1.479324,-0.338528 2.988129,-0.506145 4.492599,-0.506145 10.414229,0 15.382881,7.446044 15.443579,7.632476 l 2.041224,2.463498 c 1.820973,2.427964 2.748801,5.246136 2.956912,8.185704 -1.083911,0.66769 -2.540688,1.06657 -4.110194,1.06657 z M 0.18566731,38.295627 c 0,-1.312833 0.93823429,-2.479122 2.27621549,-2.72452 4.2073133,-0.770705 3.9454403,-2.556299 6.0352229,-2.556299 2.1695583,0 2.7045773,2.756607 8.3400533,2.756607 4.213383,0 6.305767,-1.91289 6.362998,-1.961449 0.532504,-0.533892 1.236527,-0.796719 1.944105,-0.796719 2.146147,0 2.739263,2.75834 8.341789,2.75834 4.213381,0 6.303163,-1.910287 6.365597,-1.958846 0.531117,-0.533892 1.239996,-0.801661 1.947574,-0.801661 0.699947,0 1.397812,0.262393 1.940637,0.771832 2.515542,2.276216 6.395082,1.08738 6.395082,4.516012 0,1.394343 -1.107326,2.780884 -2.749669,2.780884 -0.847185,0 -3.43817,-0.636473 -5.572175,-1.89381 -1.696106,0.999974 -4.462251,2.066544 -8.32965,2.066544 -3.867398,0 -6.63354,-1.137674 -8.324444,-2.138344 -1.693504,0.999802 -4.463117,2.132274 -8.324445,2.132274 -3.866532,0 -6.638745,-1.135073 -8.3296481,-2.134875 C 6.3622323,40.375006 3.7582418,41.004542 2.9344685,41.004542 1.2955933,41.079112 0.18566731,39.70905 0.18566731,38.295627 Z M 41.885934,23.294284 c -3.065301,0 -5.54963,-2.484326 -5.54963,-5.54963 0,-3.065303 2.484329,-5.54963 5.54963,-5.54963 3.065304,0 5.549633,2.484327 5.549633,5.54963 0,3.060968 -2.562371,5.54963 -5.549633,5.54963 z"
+     id="icon"
+     style="stroke-width:0.0867129" />
+</svg>

district/templates/district/district_election_campaign_page.html

@@ -106,8 +106,34 @@
 
           {% if page.program_points %}
             <template v-if="isCurrentView('program')">
-              <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">{{ page.program_point_list_title|default:"Volební program" }}</h1>
+              <h1
+                class="head-alt-md text-center py-8 lg:pt-24 {% if not page.show_program_points_inline %}lg:pb-8{% else %}pb-0{% endif %}"
+              >{{ page.program_point_list_title|default:"Volební program" }}</h1>
+              {% if page.show_program_points_inline %}
+                {% for program_point in page.program_points %}
+                  <h2 class="head-alt-md mb-2 mt-8">
+                    {{ program_point.title }}
+                  </h2>
+                  <p
+                    class="font-bold text-lg leading-normal {% if program_point.guarantor is not none %}mb-3{% else %}mb-5{% endif %}"
+                  >
+                    {{ program_point.perex }}
+                  </p>
 
+                  {% if program_point.guarantor is not none %}
+                    <p class="mb-5 text-grey-300">
+                      Garant:
+                      <a
+                        href="{{ program_point.guarantor.url }}"
+                      >{{ program_point.guarantor }}</a>
+                    </p>
+                  {% endif %}
+
+                  {% for block in program_point.content %}
+                    {% include_block block %}
+                  {% endfor %}
+                {% endfor %}
+              {% else %}
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                   {% for program_point in page.program_points %}
                     <div class="card card--hoveractive">
@@ -128,6 +154,7 @@
                     </div>
                   {% endfor %}
                 </div>
+              {% endif %}
             </template>
           {% endif %}
         </section>

district/templates/district/district_election_program_page.html

@@ -3,7 +3,11 @@
 
 {% block content %}
   <div class="lg:flex lg:space-x-8 xl:space-x-16">
-    <section class="lg:w-3/5 xl:w-2/3">
+    <section
+      {% if page.guarantor is not none %}
+        class="lg:w-3/5 xl:w-2/3"
+      {% endif %}
+    >
       <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">
         {{ page.title }}
       </h1>
@@ -16,6 +20,7 @@
       {% endfor %}
     </section>
 
+    {% if page.guarantor is not none %}
       <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
         <div class="lg:card lg:elevation-10">
           <div class="lg:card__body">
@@ -28,5 +33,6 @@
           </div>
         </div>
       </section>
+    {% endif %}
   </div>
 {% endblock content %}

main/menu.py

+from wagtail.core.fields import StreamField
+
+from shared.blocks import MenuItemBlock as MenuItemBlockBase
+from shared.models import MenuMixin as MenuMixinBase
+
+
+class MenuItemBlock(MenuItemBlockBase):
+    class Meta:
+        label = "Položka v menu"
+        template = "main/includes/menu_item.html"
+
+
+#
+#
+# class MenuParentBlock(MenuParentBlockBase):
+#     class Meta:
+#         label = "Podmenu"
+#         template = "styleguide/2.3.x/menu_parent.html"
+
+
+class MenuMixin(MenuMixinBase):
+    menu = StreamField(
+        [("menu_item", MenuItemBlock())],  # , ("menu_parent", MenuParentBlock())
+        verbose_name="Menu",
+        blank=True,
+    )
+
+    class Meta:
+        abstract = True

main/migrations/0008_alter_mainhomepage_menu.py

+# Generated by Django 4.0.7 on 2022-08-23 14:46
+
+import wagtail.blocks
+import wagtail.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("main", "0007_mainarticlepage_region_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="mainhomepage",
+            name="menu",
+            field=wagtail.fields.StreamField(
+                [
+                    (
+                        "menu_item",
+                        wagtail.blocks.StructBlock(
+                            [
+                                (
+                                    "title",
+                                    wagtail.blocks.CharBlock(
+                                        label="Titulek", required=True
+                                    ),
+                                ),
+                                (
+                                    "page",
+                                    wagtail.blocks.PageChooserBlock(
+                                        label="Stránka", required=False
+                                    ),
+                                ),
+                                (
+                                    "link",
+                                    wagtail.blocks.URLBlock(
+                                        label="Odkaz", required=False
+                                    ),
+                                ),
+                            ]
+                        ),
+                    )
+                ],
+                blank=True,
+                use_json_field=None,
+                verbose_name="Menu",
+            ),
+        ),
+    ]

main/migrations/0009_rename_footer_social_links_mainhomepage_social_links.py

+# Generated by Django 4.0.7 on 2022-08-23 15:15
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("main", "0008_alter_mainhomepage_menu"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="mainhomepage",
+            old_name="footer_social_links",
+            new_name="social_links",
+        ),
+    ]

main/models.py

@@ -20,11 +20,10 @@ from wagtailmetadata.models import MetadataPageMixin
 from elections2021.constants import REGION_CHOICES  # pozor, import ze sousedního modulu
 from shared.const import RICH_TEXT_DEFAULT_FEATURES
 from shared.forms import SubscribeForm
-from shared.models import (
+from shared.models import (  # MenuMixin,
     ArticleMixin,
     ExtendedMetadataHomePageMixin,
     ExtendedMetadataPageMixin,
-    MenuMixin,
     SubpageMixin,
 )
 from shared.utils import make_promote_panels, subscribe_to_newsletter
@@ -32,15 +31,11 @@ from tuning import admin_help
 from twitter_utils.models import Tweet
 
 from . import blocks
+from .menu import MenuMixin
 
 
 class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page):
 
-    # settings
-    matomo_id = models.IntegerField(
-        "Matomo ID pro sledování návštěvnosti", blank=True, null=True
-    )
-
     # header
 
     contact_newcomers = models.URLField(
@@ -68,14 +63,6 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
     )
 
     # footer
-    footer_social_links = StreamField(
-        [
-            ("social_links", blocks.SocialLinkBlock()),
-        ],
-        verbose_name="Odkazy na sociální sítě v zápatí webu",
-        blank=True,
-    )
-
     footer_other_links = StreamField(
         [
             ("other_links", blocks.OtherLinksBlock()),
@@ -91,6 +78,19 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
         max_num=6,
     )
 
+    # settings
+    matomo_id = models.IntegerField(
+        "Matomo ID pro sledování návštěvnosti", blank=True, null=True
+    )
+
+    social_links = StreamField(
+        [
+            ("social_links", blocks.SocialLinkBlock()),
+        ],
+        verbose_name="Odkazy na sociální sítě v zápatí webu",
+        blank=True,
+    )
+
     twitter_usernames = StreamField(
         [("username", CharBlock(label="Twitter uživatelské jméno"))],
         verbose_name="Uživatelská jména pro synchronizované twitter účty",
@@ -100,7 +100,6 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
 
     content_panels = Page.content_panels + [
         FieldPanel("content"),
-        FieldPanel("footer_social_links"),
         FieldPanel("footer_other_links"),
         FieldPanel("footer_person_list"),
     ]
@@ -108,6 +107,7 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
     settings_panels = [
         FieldPanel("contact_newcomers"),
         FieldPanel("donation_page"),
+        FieldPanel("social_links"),
         FieldPanel("matomo_id"),
         FieldPanel("twitter_usernames"),
     ]
@@ -212,13 +212,16 @@ class MainWorkPage(ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, P
 
         current_month_data = self.get_empty_month_data(timezone.now().date())
 
-        for idx, article in enumerate(sorted_article_qs):
-            if article.date.month != current_month_data["month_text"]:
+        article_counter = 1
+        for article in sorted_article_qs:
+            if article.date.month != current_month_data["month_number"]:
                 article_data_list.append(current_month_data)  # append completed month
                 current_month_data = self.get_empty_month_data(article.date)
+                article_counter = 1
 
-            current_column = "left_column" if idx % 2 else "right_column"
+            current_column = "left_column" if article_counter % 2 else "right_column"
             current_month_data[current_column].append(article)
+            article_counter += 1
 
         article_data_list.append(current_month_data)  # last iteration
 

main/static/main/css/styles.css

@@ -1379,6 +1379,8 @@ video {
 }
 
 .container--medium{
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
   margin: auto;
   max-width: 1300px;
 }
@@ -1425,15 +1427,8 @@ video {
   max-width: 1150px;
 }
 
-@responsive {
-    @media (min-width: 1200px) {
-  .grid-container {
-      grid-template-columns: 240px 1fr 102px;
-      grid-template-areas:
-      "left-side content right-side";
-      margin-left: 10%
-  }
-    }
+.grid-container.article-section {
+    max-width: 1400px;
   }
 
 .grid-content {
@@ -1441,8 +1436,8 @@ video {
 }
 
 .grid-full {
-  grid-column-start: left-side;;
-  grid-column-end: right-side;
+  grid-column: left-side / right-side;
+  grid-row: left-side / right-side;
 }
 
 .grid-left-side {
@@ -1454,33 +1449,11 @@ video {
 }
 
 .grid-content-with-right-side {
-  grid-column-start: content;
-  grid-column-end: right-side;
-}
-
-@responsive {
-  /* Removes default container padding from the element. */
-  /* @note: needs to be kept in sync with tailwind configuration */
-  .container-padding--zero {
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-
-    @media (min-width: 1200px) {
-  .container-padding--zero {
-      margin-left: -2rem;
-      margin-right: -2rem
-  }
-    }
-
-  .container-padding--auto {
-    margin-left: 0;
-    margin-right: 0;
-  }
+  grid-column: content / right-side;
 }
 
 .footer-section {
-  height: 981px;
+  height: 450px;
 }
 
 .person-box-medium {
@@ -1502,7 +1475,7 @@ video {
 }
 
 .simple-header-height {
- height: 26rem;
+ height: 13rem;
 }
 
 .flag {
@@ -1891,6 +1864,14 @@ video {
   max-width: 32rem;
 }
 
+.checkbox label{
+  font-size: .875rem;
+}
+
+.checkbox label{
+  font-weight: 500;
+}
+
 .checkbox label{
   text-transform: uppercase;
 }
@@ -1899,6 +1880,13 @@ video {
   line-height: 1.25;
 }
 
+@media (min-width: 1200px){
+
+  .checkbox label{
+    font-size: 1rem;
+  }
+}
+
 .checkbox:after{
   pointer-events: none;
 }
@@ -2085,191 +2073,6 @@ video {
   line-height: 1.25;
 }
 
-@responsive {
-  .head-alt-xl,
-  .content-block .head-alt-xl{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 5.3rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-lg,
-  .content-block .head-alt-lg{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 4rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-md,
-  .content-block .head-alt-md{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 2.45rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-base,
-  .content-block .head-alt-base{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 1.875rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-sm,
-  .content-block .head-alt-sm{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 1.6rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-xs,
-  .content-block .head-alt-xs{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 1.3rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-  .head-alt-2xs,
-  .content-block .head-alt-2xs{
-    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-    font-size: 1.125rem;
-    font-weight: 400;
-    line-height: 0.96;
-  }
-
-
-
-  .head-base,
-  .content-block .head-base{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.875rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  .head-sm,
-  .content-block .head-sm{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.6rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  .head-xs,
-  .content-block .head-xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.3rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  .head-2xs,
-  .content-block .head-2xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.125rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-
-
-  .head-heavy-base,
-  .content-block .head-heavy-base{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.875rem;
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  .head-heavy-sm,
-  .content-block .head-heavy-sm{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.6rem;
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  .head-heavy-xs,
-  .content-block .head-heavy-xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.3rem;
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  .head-heavy-2xs,
-  .content-block .head-heavy-2xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.125rem;
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-
-
-  .head-allcaps-2xs,
-  .content-block .head-allcaps-2xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.125rem;
-    font-weight: 400;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-
-  .head-allcaps-3xs,
-  .content-block .head-allcaps-3xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    font-weight: 400;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-
-  .head-allcaps-4xs,
-  .content-block .head-allcaps-4xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: .875rem;
-    font-weight: 400;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-
-
-
-
-  .head-allcaps-heavy-2xs,
-  .content-block .head-allcaps-heavy-2xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1.125rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-
-  .head-allcaps-heavy-3xs,
-  .content-block .head-allcaps-heavy-3xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-
-  .head-allcaps-heavy-4xs,
-  .content-block .head-allcaps-heavy-4xs{
-    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
-    font-size: .875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    line-height: 1.25;
-  }
-}
-
 .header-clip {
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
           clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
@@ -2333,6 +2136,13 @@ video {
   }
 }
 
+@media (min-width: 1200px){
+
+  .head-4xl{
+    font-size: 2.45rem;
+  }
+}
+
 .head-7xl{
   font-family: Bebas Neue, Helvetica, Arial, sans-serif;
   font-size: 1.875rem;
@@ -2341,13 +2151,28 @@ video {
   letter-spacing: -0.025em;
 }
 
-@media (min-width: 992px){
+@media (min-width: 1200px){
 
   .head-7xl{
     font-size: 5.3rem;
   }
 }
 
+.head-8xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 2.45rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 1200px){
+
+  .head-8xl{
+    font-size: 6.25rem;
+  }
+}
+
 p{
   font-size: .875rem;
   line-height: 1.5rem;
@@ -2382,6 +2207,13 @@ p{
   text-transform: uppercase;
 }
 
+@media (min-width: 576px){
+
+  .header-carousel .header-carousel--text{
+    font-size: 3rem;
+  }
+}
+
 @media (min-width: 992px){
 
   .header-carousel .header-carousel--text{
@@ -2390,21 +2222,28 @@ p{
 }
 
 .header-carousel .header-carousel--text {
-    left: 10%;
     max-width: 1200px;
     position: absolute;
-    top: 20%;
+    top: 35%;
+    margin-left: 15%;
   }
 
 @media (min-width: 576px) {
 
 .header-carousel .header-carousel--text {
-      top: 35%
+      margin-left: 10%
   }
     }
 
 @media (min-width: 992px) {
 
+.header-carousel .header-carousel--text {
+      top: 30%
+  }
+    }
+
+@media (min-width: 1366px) {
+
 .header-carousel .header-carousel--text {
       top: 45%
   }
@@ -2425,30 +2264,34 @@ p{
             clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
   }
 
+.header-carousel .slick-active {
+    z-index: 1000;
+  }
+
 .header-carousel .slick-active img {
       transform: scale(1, 1);
     }
 
 .header-carousel .slick-active .header-carousel--text {
-      -webkit-animation: right_to_left 500ms ease;
-              animation: right_to_left 500ms ease;
+      -webkit-animation: right_to_left 1s ease;
+              animation: right_to_left 1s ease;
     }
 
 @-webkit-keyframes right_to_left {
     from {
-      left: 15%;
+      margin-left: 20%;
     }
     to {
-      left: 10%;
+      margin-left: 10%;
     }
   }
 
 @keyframes right_to_left {
     from {
-      left: 15%;
+      margin-left: 20%;
     }
     to {
-      left: 10%;
+      margin-left: 10%;
     }
   }
 
@@ -2536,14 +2379,23 @@ p{
 }
 
 .btn{
-  display: inline-block;
-  height: 2.75rem;
+  display: inline-flex;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-family: Bebas Neue, Helvetica, Arial, sans-serif;
   line-height: 2.25rem;
 }
 
+@media (min-width: 1200px){
+
+  .btn{
+    height: 2.75rem;
+  }
+}
+
 .btn__slide__wrap {
   overflow: hidden;
   position: relative;
@@ -2569,21 +2421,24 @@ p{
     }
 
 .switch{
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .switch__item{
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   text-align: center;
   font-family: Bebas Neue, Helvetica, Arial, sans-serif;
-  font-size: 1.3rem;
+  font-size: 1.125rem;
   font-weight: 400;
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2678,10 +2533,6 @@ p{
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.main-menu__main .menu-link{
-  padding: 0.75rem;
-}
-
 .main-menu__main .menu-link{
   font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
 }
@@ -2718,10 +2569,25 @@ p{
   }
 }
 
+.navbar-background {
+  background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+}
+
+.main-menu-grid {
+  max-width: none;
+  grid-template-areas:
+  "content"
+}
+
+.menu-flag {
+  position: absolute;
+  left: 0;
+  width: 110px;
+}
+
 .main-menu__external{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-  padding: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
   grid-area: external;
@@ -2732,7 +2598,7 @@ p{
     display: flex !important;
   }
   .main-menu {
-    grid-template-areas: "logo main social external";
+    grid-template-areas: "main social external";
     flex-wrap: nowrap;
   }
 
@@ -2748,6 +2614,10 @@ p{
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
+
+  .menu-flag {
+    width: 260px;
+  }
 }
 
 /**
@@ -2783,38 +2653,22 @@ p{
   grid-column-start: 2;
 }
 
-.col-start-1{
-  grid-column-start: 1;
-}
-
 .col-end-13{
   grid-column-end: 13;
 }
 
-.col-end-2{
-  grid-column-end: 2;
-}
-
-.col-end-4{
-  grid-column-end: 4;
-}
-
 .clear-both{
   clear: both;
 }
 
-.m-3{
-  margin: 0.75rem;
-}
-
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-4{
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.my-2{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .mx-8{
@@ -2886,6 +2740,10 @@ p{
   margin-right: 1.5rem;
 }
 
+.mb-1{
+  margin-bottom: 0.25rem;
+}
+
 .mb-16{
   margin-bottom: 4rem;
 }
@@ -2894,10 +2752,6 @@ p{
   margin-right: 1.75rem;
 }
 
-.mb-1{
-  margin-bottom: 0.25rem;
-}
-
 .mb-7{
   margin-bottom: 1.75rem;
 }
@@ -2906,10 +2760,6 @@ p{
   margin-top: 6rem;
 }
 
-.mb-24{
-  margin-bottom: 6rem;
-}
-
 .mb-32{
   margin-bottom: 8rem;
 }
@@ -2934,6 +2784,10 @@ p{
   margin-right: 1.25rem;
 }
 
+.mt-4{
+  margin-top: 1rem;
+}
+
 .mb-3{
   margin-bottom: 0.75rem;
 }
@@ -2942,6 +2796,10 @@ p{
   margin-bottom: 3.5rem;
 }
 
+.mb-24{
+  margin-bottom: 6rem;
+}
+
 .mb-40{
   margin-bottom: 10rem;
 }
@@ -2954,10 +2812,6 @@ p{
   margin-top: 0.25rem;
 }
 
-.mt-4{
-  margin-top: 1rem;
-}
-
 .block{
   display: block;
 }
@@ -3010,8 +2864,8 @@ p{
   width: 100%;
 }
 
-.w-60{
-  width: 15rem;
+.w-10\/12{
+  width: 83.333333%;
 }
 
 .w-44{
@@ -3038,10 +2892,6 @@ p{
   width: 5rem;
 }
 
-.w-3\/4{
-  width: 75%;
-}
-
 .w-1\/2{
   width: 50%;
 }
@@ -3078,14 +2928,14 @@ p{
   max-width: 24rem;
 }
 
-.max-w-xs{
-  max-width: 20rem;
-}
-
 .max-w-md{
   max-width: 28rem;
 }
 
+.max-w-xs{
+  max-width: 20rem;
+}
+
 .shrink-0{
   flex-shrink: 0;
 }
@@ -3158,10 +3008,6 @@ p{
   justify-content: space-between;
 }
 
-.justify-around{
-  justify-content: space-around;
-}
-
 .gap-3{
   gap: 0.75rem;
 }
@@ -3172,12 +3018,6 @@ p{
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-x-6 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -3368,10 +3208,6 @@ p{
   padding-top: 10rem;
 }
 
-.pt-24{
-  padding-top: 6rem;
-}
-
 .pb-4{
   padding-bottom: 1rem;
 }
@@ -3392,14 +3228,6 @@ p{
   padding-bottom: 13rem;
 }
 
-.pt-8{
-  padding-top: 2rem;
-}
-
-.pt-14{
-  padding-top: 3.5rem;
-}
-
 .text-center{
   text-align: center;
 }
@@ -3448,10 +3276,6 @@ p{
   font-size: 2.45rem;
 }
 
-.text-8xl{
-  font-size: 6.25rem;
-}
-
 .text-base{
   font-size: 1rem;
 }
@@ -3460,10 +3284,6 @@ p{
   font-size: 1.3rem;
 }
 
-.text-9xl{
-  font-size: 7.5rem;
-}
-
 .font-bold{
   font-weight: 700;
 }
@@ -3488,6 +3308,10 @@ p{
   line-height: 1.25rem;
 }
 
+.leading-4{
+  line-height: 1rem;
+}
+
 .text-white{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3581,6 +3405,15 @@ p{
 
 /* @note: needs to be kept in sync with tailwind configuration */
 
+@media (min-width: 1200px) {
+    .simple-header-height {
+      height: 26rem;
+    }
+    .footer-section {
+      height: 981px;
+    }
+  }
+
 .head-alt-md,
   .content-block .head-alt-md{
   font-family: Bebas Neue, Helvetica, Arial, sans-serif;
@@ -3597,6 +3430,16 @@ p{
     line-height: 0.96;
 }
 
+@media (min-width: 1200px) {
+    .switch__item{
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    font-size: 1.3rem;
+  }
+  }
+
 .slick-track[data-v-e4caeaf8]{position:relative;top:0;left:0;display:block;transform:translateZ(0)}
 
 .slick-track.slick-center[data-v-e4caeaf8]{margin-left:auto;margin-right:auto}
@@ -3840,6 +3683,11 @@ a.icon-link:hover span{
     grid-column: span 3 / span 3;
   }
 
+  .xl\:my-3{
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
   .xl\:mb-20{
     margin-bottom: 5rem;
   }
@@ -3852,6 +3700,14 @@ a.icon-link:hover span{
     margin-bottom: 1.5rem;
   }
 
+  .xl\:mb-16{
+    margin-bottom: 4rem;
+  }
+
+  .xl\:mb-24{
+    margin-bottom: 6rem;
+  }
+
   .xl\:mb-28{
     margin-bottom: 7rem;
   }
@@ -3860,10 +3716,18 @@ a.icon-link:hover span{
     margin-bottom: 0px;
   }
 
+  .xl\:mr-2{
+    margin-right: 0.5rem;
+  }
+
   .xl\:mb-32{
     margin-bottom: 8rem;
   }
 
+  .xl\:mb-12{
+    margin-bottom: 3rem;
+  }
+
   .xl\:block{
     display: block;
   }
@@ -3880,10 +3744,26 @@ a.icon-link:hover span{
     height: 100vh;
   }
 
+  .xl\:w-60{
+    width: 15rem;
+  }
+
   .xl\:w-full{
     width: 100%;
   }
 
+  .xl\:w-1\/4{
+    width: 25%;
+  }
+
+  .xl\:max-w-xl{
+    max-width: 36rem;
+  }
+
+  .xl\:flex-row{
+    flex-direction: row;
+  }
+
   .xl\:justify-end{
     justify-content: flex-end;
   }
@@ -3892,19 +3772,81 @@ 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\:bg-transparent{
     background-color: transparent;
   }
 
-  .xl\:p-6{
-    padding: 1.5rem;
+  .xl\:py-6{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   .xl\:pt-0{
     padding-top: 0px;
   }
 
+  .xl\:pt-24{
+    padding-top: 6rem;
+  }
+
+  .xl\:pt-8{
+    padding-top: 2rem;
+  }
+
+  .xl\:pt-14{
+    padding-top: 3.5rem;
+  }
+
+  .xl\:text-4xl{
+    font-size: 2.45rem;
+  }
+
+  .xl\:text-9xl{
+    font-size: 7.5rem;
+  }
+
+  .xl\:text-base{
+    font-size: 1rem;
+  }
+
+  .xl\:text-xl{
+    font-size: 1.3rem;
+  }
+
+  .xl\:leading-6{
+    line-height: 1.5rem;
+  }
+
   .xl\:duration-200{
     transition-duration: 200ms;
   }
+
+  .xl\:head-alt-lg,
+  .content-block .xl\:head-alt-lg{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+}
+
+@media (min-width: 1366px){
+
+  .\32xl\:space-x-6 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .\32xl\: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)));
+  }
 }

main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache

 <div class="checkbox form-field__control {{ classes }}">
   <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
-  <label for="checkbox_1">{{ label }}</label>
+  <label class="text-xs font-bold" for="checkbox_1">{{ label }}</label>
 </div>

main/styleguide/source/_patterns/molecules/articles/article-perex.mustache

 <div class="grid-container mb-2 lg:mb-12">
   <div class="grid-left-side h-full bg-grey-150 left-tab">
     <div class="p-6">
-      <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
+      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
     </div>
   </div>
   <div class="grid-content leading-6">

main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache

 <header
-  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full"
+  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
   <div class="grid-container header-max-width pt-16">
-    <div class="col-start-2 col-end-13">
+    <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
       <div class="text-3xl text-green-500 mb-8">
         <span>2.3.2022</span>
       </div>
-      <h1 class="font-alt text-white text-6xl">
+      <h1 class="font-alt text-white text-3xl md:text-5xl lg:text-6xl">
         Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na
         Ukrajině
       </h1>

main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache

@@ -4,7 +4,7 @@
       Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
       rozpočtu České republiky.
     </h2>
-    <p>
+    <p class="3xl:text-lg">
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
       aperiam,
       eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum

main/styleguide/source/_patterns/molecules/box-link.mustache

+<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+  <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+  <h5 class="head-4xl mb-8">naloď se k pirátům</h5>
+  {{> atoms-button-animated(btn-text: "Přidat se k nám") }}
+</div>

main/styleguide/source/_patterns/molecules/photo_header.mustache

 <header
-  class="bg-black flex items-center header-clip photo-header mb-20 w-full"
+  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
-  <div class="container--narrow flex items-center pt-40">
+  <div class="grid-container header-max-width pt-16">
+  <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
     <h1 class="font-alt text-white">
       <span class="text-2xl">Ing.</span><br>
       <span class="font-alt text-7xl">Ivan Bartoš</span><span class="text-2xl">, PhDr. et PhD</span><br>
       <span class="font-alt">Prezident České republiky</span>
     </h1>
   </div>
+      </div>
 </header>