elections2021: Articles list and detail

elections2021/migrations/0001_initial.py

+# Generated by Django 3.1.7 on 2021-04-29 23:24
+
+import django.db.models.deletion
+import django.utils.timezone
+import modelcluster.contrib.taggit
+import modelcluster.fields
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtailmetadata.models
+from django.db import migrations, models
+
+import shared.models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ("wagtailcore", "0060_fix_workflow_unique_constraint"),
+        ("wagtailimages", "0023_add_choose_permissions"),
+        ("taggit", "0003_taggeditem_add_unique_index"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Elections2021ArticlePage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                (
+                    "date",
+                    models.DateField(
+                        default=django.utils.timezone.now, verbose_name="datum"
+                    ),
+                ),
+                ("perex", models.TextField(verbose_name="perex")),
+                (
+                    "author",
+                    models.CharField(
+                        blank=True, max_length=250, null=True, verbose_name="autor"
+                    ),
+                ),
+                (
+                    "text",
+                    wagtail.core.fields.RichTextField(
+                        blank=True, verbose_name="článek"
+                    ),
+                ),
+                (
+                    "card_style",
+                    models.CharField(
+                        choices=[
+                            ("white", "bílé pozadí"),
+                            ("black", "černé pozadí"),
+                            ("yellow", "žluté pozadí"),
+                            ("green", "zelené pozadí"),
+                        ],
+                        default="white",
+                        max_length=10,
+                        verbose_name="styl karty článku",
+                    ),
+                ),
+                (
+                    "image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.PROTECT,
+                        to="wagtailimages.image",
+                        verbose_name="obrázek",
+                    ),
+                ),
+                (
+                    "search_image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                        verbose_name="Search image",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Aktualita",
+            },
+            bases=(
+                shared.models.SubpageMixin,
+                wagtailmetadata.models.WagtailImageMetadataMixin,
+                "wagtailcore.page",
+                models.Model,
+            ),
+        ),
+        migrations.CreateModel(
+            name="Elections2021HomePage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                (
+                    "header_links",
+                    wagtail.core.fields.StreamField(
+                        [
+                            (
+                                "link",
+                                wagtail.core.blocks.StructBlock(
+                                    [
+                                        (
+                                            "title",
+                                            wagtail.core.blocks.CharBlock(
+                                                label="titulek"
+                                            ),
+                                        ),
+                                        (
+                                            "url",
+                                            wagtail.core.blocks.URLBlock(label="odkaz"),
+                                        ),
+                                    ]
+                                ),
+                            )
+                        ],
+                        blank=True,
+                        verbose_name="odkazy v záhlaví",
+                    ),
+                ),
+                (
+                    "footer_links",
+                    wagtail.core.fields.StreamField(
+                        [
+                            (
+                                "link",
+                                wagtail.core.blocks.StructBlock(
+                                    [
+                                        (
+                                            "title",
+                                            wagtail.core.blocks.CharBlock(
+                                                label="titulek"
+                                            ),
+                                        ),
+                                        (
+                                            "url",
+                                            wagtail.core.blocks.URLBlock(label="odkaz"),
+                                        ),
+                                    ]
+                                ),
+                            )
+                        ],
+                        blank=True,
+                        verbose_name="odkazy v zápatí",
+                    ),
+                ),
+                (
+                    "matomo_id",
+                    models.IntegerField(
+                        blank=True,
+                        null=True,
+                        verbose_name="Matomo ID pro sledování návštěvnosti",
+                    ),
+                ),
+                (
+                    "search_image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                        verbose_name="Search image",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Koaliční web 2021",
+            },
+            bases=(
+                "wagtailcore.page",
+                wagtailmetadata.models.WagtailImageMetadataMixin,
+                models.Model,
+            ),
+        ),
+        migrations.CreateModel(
+            name="Elections2021ArticleTag",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "content_object",
+                    modelcluster.fields.ParentalKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        to="elections2021.elections2021articlepage",
+                    ),
+                ),
+                (
+                    "tag",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="elections2021_elections2021articletag_items",
+                        to="taggit.tag",
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+        ),
+        migrations.CreateModel(
+            name="Elections2021ArticlesPage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                (
+                    "photo",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.PROTECT,
+                        to="wagtailimages.image",
+                        verbose_name="hlavní fotka",
+                    ),
+                ),
+                (
+                    "search_image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                        verbose_name="Search image",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Aktuality",
+            },
+            bases=(
+                shared.models.SubpageMixin,
+                wagtailmetadata.models.WagtailImageMetadataMixin,
+                "wagtailcore.page",
+                models.Model,
+            ),
+        ),
+        migrations.AddField(
+            model_name="elections2021articlepage",
+            name="tags",
+            field=modelcluster.contrib.taggit.ClusterTaggableManager(
+                blank=True,
+                help_text="A comma-separated list of tags.",
+                through="elections2021.Elections2021ArticleTag",
+                to="taggit.Tag",
+                verbose_name="Tags",
+            ),
+        ),
+    ]

elections2021/models.py

+from django.core.paginator import Paginator
+from django.db import models
+from modelcluster.contrib.taggit import ClusterTaggableManager
+from modelcluster.fields import ParentalKey
+from taggit.models import TaggedItemBase
+from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
+from wagtail.core import blocks
+from wagtail.core.fields import RichTextField, StreamField
+from wagtail.core.models import Page
+from wagtail.images.edit_handlers import ImageChooserPanel
+from wagtailmetadata.models import MetadataPageMixin
+
+from shared.models import ArticleMixin, SubpageMixin
+from shared.utils import get_subpage_url
+
+ARTICLES_PER_PAGE = 9
+
+
+class LinkBlock(blocks.StructBlock):
+    title = blocks.CharBlock(label="titulek")
+    url = blocks.URLBlock(label="odkaz")
+
+    class Meta:
+        icon = "link-external"
+        label = "odkaz"
+
+
+class Elections2021HomePage(Page, MetadataPageMixin):
+    ### FIELDS
+
+    header_links = StreamField(
+        [("link", LinkBlock())], verbose_name="odkazy v záhlaví", blank=True
+    )
+    footer_links = StreamField(
+        [("link", LinkBlock())], verbose_name="odkazy v zápatí", blank=True
+    )
+    matomo_id = models.IntegerField(
+        "Matomo ID pro sledování návštěvnosti", blank=True, null=True
+    )
+
+    ### PANELS
+
+    settings_panels = [
+        FieldPanel("matomo_id"),
+        StreamFieldPanel("header_links"),
+        StreamFieldPanel("footer_links"),
+    ]
+
+    ### RELATIONS
+
+    parent_page_types = []
+    subpage_types = ["elections2021.Elections2021ArticlesPage"]
+
+    ### OTHERS
+
+    class Meta:
+        verbose_name = "Koaliční web 2021"
+
+    @property
+    def root_page(self):
+        return self
+
+    @property
+    def articles_page_url(self):
+        # TODO instance cache
+        return get_subpage_url(self, Elections2021ArticlesPage)
+
+
+class Elections2021ArticleTag(TaggedItemBase):
+    content_object = ParentalKey(
+        "elections2021.Elections2021ArticlePage", on_delete=models.CASCADE
+    )
+
+
+class Elections2021ArticlePage(ArticleMixin, SubpageMixin, MetadataPageMixin, Page):
+    WHITE = "white"
+    BLACK = "black"
+    YELLOW = "yellow"
+    GREEN = "green"
+
+    STYLE_CHOICES = (
+        (WHITE, "bílé pozadí"),
+        (BLACK, "černé pozadí"),
+        (YELLOW, "žluté pozadí"),
+        (GREEN, "zelené pozadí"),
+    )
+
+    STYLE_CSS = {
+        WHITE: "",
+        BLACK: "emphasized-black",
+        YELLOW: "emphasized-lemon",
+        GREEN: "emphasized-acidgreen",
+    }
+
+    RICH_TEXT_FEATURES = [
+        "h2",
+        "h3",
+        "h4",
+        "bold",
+        "italic",
+        "ul-elections2021",
+        "ol-elections2021",
+        "blockquote-elections2021",
+        "link",
+        "image",
+        "document-link",
+    ]
+
+    ### FIELDS
+
+    text = RichTextField("článek", blank=True, features=RICH_TEXT_FEATURES)
+    tags = ClusterTaggableManager(through=Elections2021ArticleTag, blank=True)
+    card_style = models.CharField(
+        "styl karty článku", choices=STYLE_CHOICES, default=WHITE, max_length=10
+    )
+
+    ### PANELS
+
+    content_panels = ArticleMixin.content_panels + [
+        FieldPanel("tags"),
+        FieldPanel("card_style"),
+    ]
+
+    ### RELATIONS
+
+    parent_page_types = ["elections2021.Elections2021ArticlesPage"]
+    subpage_types = []
+
+    ### OTHERS
+
+    class Meta:
+        verbose_name = "Aktualita"
+
+    def card_css_class(self):
+        return self.STYLE_CSS[self.card_style]
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context["related_articles"] = (
+            self.get_siblings(inclusive=False)
+            .live()
+            .specific()
+            .order_by("-uniwebarticlepage__date")[:3]
+        )
+        return context
+
+
+class Elections2021ArticlesPage(SubpageMixin, MetadataPageMixin, Page):
+    ### FIELDS
+
+    photo = models.ForeignKey(
+        "wagtailimages.Image",
+        on_delete=models.PROTECT,
+        blank=True,
+        null=True,
+        verbose_name="hlavní fotka",
+    )
+
+    ### PANELS
+
+    content_panels = Page.content_panels + [ImageChooserPanel("photo")]
+
+    settings_panels = []
+
+    ### RELATIONS
+
+    parent_page_types = ["elections2021.Elections2021HomePage"]
+    subpage_types = ["elections2021.Elections2021ArticlePage"]
+
+    ### OTHERS
+
+    class Meta:
+        verbose_name = "Aktuality"
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context["articles"] = Paginator(
+            self.get_children().live().specific(),
+            ARTICLES_PER_PAGE,
+        ).get_page(request.GET.get("page"))
+        return context

elections2021/static/elections2021/css/styleguide.min.css

+@charset "UTF-8";*{-webkit-box-sizing:border-box;box-sizing:border-box}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}#patternlab-body,#patternlab-html{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.sg-header{background:#000;color:#fff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-transform:uppercase;position:fixed;top:0;left:0;z-index:4;width:100%}.sg-header ul{padding:0;margin:0;list-style:none}.sg-header a{font-size:70%;color:grey;text-decoration:none;line-height:1;padding:1em .7em;-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-header a.active,.sg-header a:focus,.sg-header a:hover{color:#fff;background:#222}.sg-nav-toggle{display:inline-block;position:relative;text-transform:uppercase;z-index:2}@media all and (min-width:42em){.sg-nav-toggle{display:none}}@media all and (max-width:42em){.sg-nav-container{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-nav-container.active{max-height:50em}}.sg-nav{z-index:1;margin:0;padding:0;list-style:none}.sg-nav>li{cursor:pointer}@media all and (min-width:42em){.sg-nav>li{border-bottom:0;float:left;position:relative}.sg-nav>li>ol{position:absolute;top:2em;left:0}}.sg-nav a{display:block}.sg-acc-handle:after{content:'▼';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:-1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}@media all and (min-width:42em){.sg-acc-handle:after{float:none}}.sg-acc-handle:focus:after,.sg-acc-handle:hover:after{color:grey}.sg-acc-handle.active{color:#fff;background:#222}.sg-acc-handle.active:after{top:-2px;color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-acc-panel{overflow:hidden;max-height:0;margin:0;padding:0;list-style:none;min-width:10em;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-acc-panel li{background:#222}.sg-acc-panel li:last-child,.sg-acc-panel li:last-child a{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.sg-acc-panel a{display:block}.sg-acc-panel.active{max-height:120em;overflow:auto}.sg-acc-panel.sg-right{position:absolute;left:auto;right:0}.sg-sub-nav{list-style:none}.sg-sub-nav a{text-transform:none;padding-left:1rem}.sg-controls{border:0;position:absolute;top:0;right:0;z-index:2}.sg-control>li{float:left}.sg-size{width:135px}@media all and (min-width:42em){.sg-size{width:auto}}.sg-current-size{font-size:70%;color:grey;padding:.85em .7em}@media all and (min-width:53em){.sg-current-size{float:left}}#sg-form{margin:0;border:0;padding:0}.sg-input{margin:-2px 0 0;padding:.1em;border:0;border-radius:3px;background:#000;color:grey;width:25px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-input:hover{color:#fff;background:#222}.sg-input:active,.sg-input:focus{outline:0;background:grey;color:#fff}@media all and (min-width:42em){.sg-input{width:35px}.sg-input.sg-size-px{width:30px}}.sg-size-options{display:none}.sg-size-options a{display:block}@media all and (min-width:53em){.sg-size-options{display:block;float:left;position:static}.sg-size-options>li{float:left}}.sg-tools-toggle{font-size:70%;background:#000;color:grey;text-decoration:none;line-height:1;border:0;cursor:pointer;padding:.9em .7em .6em}.sg-tools-toggle:after{display:none;content:""}.sg-find{position:relative}.twitter-typeahead{width:100%}.typeahead{border:0;background:#222;color:grey;width:100%;right:0;padding:.8em;text-transform:lowercase}.typeahead:focus{background:grey;color:#fff}.tt-input{background:grey;color:#fff;text-transform:uppercase}.tt-input:focus{text-transform:lowercase}.tt-hint{text-transform:lowercase;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-suggestion{color:#eee;font-size:75%;padding:.8em}.tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.tt-suggestion p{margin:0}.sg-pattern-state{text-transform:none!important}.sg-pattern-state:before{content:"\2022";margin-right:4px;font-size:18px;vertical-align:bottom;display:inline-block;text-decoration:none}.sg-pattern-lineage .sg-pattern-state:before{font-size:12px}#sg-patterns .sg-pattern-state:before{font-size:14px}#sg-patterns .sg-pattern-state{color:#666}.sg-nav .sg-pattern-state:before{margin-top:-4px;margin-bottom:0;margin-left:-4px;height:20px;display:block;float:left}.inprogress:before{color:#FF4136!important}.inreview:before{color:#FC0!important}.complete:before{color:#2ECC40!important}#sg-vp-wrap{text-align:center;width:100%;position:fixed;top:2em;bottom:0;left:0;right:0;z-index:0}#sg-cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:col-resize}#sg-gen-container{height:100%;position:relative;text-align:center;margin:0 auto;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}#sg-gen-container.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-viewport{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}#sg-viewport.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-rightpull-container{width:14px;float:right;margin:0;height:100%;cursor:col-resize}#sg-rightpull{margin:0;width:100%;height:100%;background:#c2c2c2;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}#sg-rightpull:hover{background:grey}#sg-rightpull:active{cursor:col-resize;background:#666}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.sg-pattern{margin-bottom:2em;position:relative;clear:both}.sg-pattern-head{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.sg-pattern-head:empty{padding:0}.sg-pattern-title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:700!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.sg-pattern-title a{display:inline-block;padding:1em 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer;font-weight:700}.sg-pattern-title a:focus,.sg-pattern-title a:hover{color:#000!important}.sg-pattern-title .sg-pattern-state{font-size:80%;font-weight:400;color:#ccc}.sg-pattern-extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em;line-height:1;color:grey;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.sg-pattern-extra-toggle span{display:inline-block}.sg-pattern-extra-toggle.active,.sg-pattern-extra-toggle:focus,.sg-pattern-extra-toggle:hover{background:#eee;color:#000}.sg-pattern-extra-toggle.active{border-bottom-color:#eee}.sg-pattern-extra-toggle.active span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-pattern-extra{background:#eee;border-top:1px solid #ddd;margin-bottom:1em;overflow:hidden;max-height:1px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-pattern-extra a{text-decoration:underline;color:#222}.sg-pattern-extra a:focus,.sg-pattern-extra a:hover{color:grey}.sg-pattern-extra.active{border:1px solid #ddd;border-radius:6px 0 6px 6px;max-height:50em}@media all and (min-width:42em){.sg-pattern-extra-inner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}}.sg-pattern-extra-info{padding:.5rem .5rem 0;line-height:1.4;font-size:90%;color:grey;overflow:auto;-webkit-overflow-scrolling:touch}.sg-pattern-extra-info:empty{padding:0}@media all and (min-width:42em){.sg-pattern-extra-info{padding:1em;width:40%}}.sg-pattern-desc{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ccc}.sg-pattern-desc p:last-child{margin:0}.sg-pattern-lineage{font-size:90%;font-style:italic}.sg-pattern-extra-code{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font-size:90%;padding:.5rem;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.sg-pattern-extra-code pre{overflow:scroll!important;-webkit-overflow-scrolling:touch;padding:0 .5rem .5rem!important;margin:0!important;line-height:1!important;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:0 6px 6px!important;position:absolute;top:0;bottom:0;left:0;right:0}.sg-pattern-extra-code code{display:block;-moz-tab-size:2!important;-o-tab-size:2!important;tab-size:2!important}@media all and (min-width:42em){.sg-pattern-extra-code{width:60%;padding:1em}}.sg-pattern-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.sg-pattern-category:first-of-type{margin-top:2rem}.sg-pattern-category-title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.sg-pattern-category-title a{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-pattern-category-body{font-size:80%;line-height:1.3}.sg-pattern-category-body:empty{display:none}.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre-wrap}@media all and (min-width:42em){.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre}}.sg-tabs{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.sg-tabs-list{overflow:hidden;position:relative;bottom:-1px;list-style:none;margin:0;padding:0}.sg-tabs-list li{float:left;margin-right:3px}.sg-tabs-list a{display:block;font-size:90%;font-weight:700;line-height:1;padding:.5em 1em;background:#eee;border:1px solid #ccc;border-bottom:0;color:grey;border-top-right-radius:6px;border-top-left-radius:6px;text-decoration:none;text-transform:capitalize}.sg-tabs-list a:hover{color:#222}.sg-tab-title-active a{background:#f5f2f0;color:#222}.sg-tab-title-active a:focus,.sg-tab-title-active a:hover{color:#222}.sg-tabs-content{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid #ccc;border-radius:0 6px 6px;overflow:hidden}.sg-tabs-panel{display:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;min-height:12em}@media all and (min-width:42em){.sg-tabs-panel{min-height:7em}}.sg-modal{font-family:HelveticaNeue,Helvetica,Arial,sans-serif;line-height:1.4;font-size:90%;background:#000;color:#ccc;position:fixed;top:auto;bottom:0;left:0;z-index:2;width:100%;height:50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.sg-modal.anim-ready{-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.sg-modal .sg-pattern-breadcrumb{font-size:70%;color:grey;margin-bottom:.5rem}.sg-modal .sg-pattern-head{margin-bottom:.5rem}.sg-modal .sg-pattern-title{font-size:1.4rem!important;color:#eee}.sg-modal .sg-pattern-extra{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;max-height:none;padding:0}.sg-modal .sg-pattern-extra.active{max-height:none}.sg-modal .sg-pattern-extra-info a{color:#ccc}.sg-modal .sg-pattern-extra-info a:focus,.sg-modal .sg-pattern-extra-info a:hover{color:#eee}.sg-modal .sg-pattern-desc{border-bottom-color:grey}.sg-modal .sg-annotations{border-top-color:grey}.sg-modal .sg-tabs-content{border:0}.sg-modal-close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.9em .7em .1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:absolute;right:0;top:1rem;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-modal.active .sg-modal-close-btn{top:-1.5rem}.sg-modal-close-btn:focus,.sg-modal-close-btn:hover{background:#222;color:#eee}.sg-modal-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sg-modal-content-inner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.has-annotation{cursor:help!important;-webkit-box-shadow:0 0 10px grey;box-shadow:0 0 10px grey}.has-annotation a,.has-annotation input{cursor:help!important}.has-annotation:hover{-webkit-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000}.has-annotation.active{-webkit-box-shadow:inset 0 0 20px grey;box-shadow:inset 0 0 20px grey}.annotation-tip{display:block;position:absolute;margin-top:-10px!important;margin-left:-10px!important;width:25px!important;height:25px!important;border-radius:13px!important;text-align:center!important;background:#444!important;color:#fff!important;font-weight:700!important;font-size:16px!important;z-index:100}.sg-annotations{margin:1rem 0;border-top:1px solid #ddd;padding-top:.5rem}.sg-annotations-title{font-size:1rem!important;margin:0 0 .5rem}.sg-annotations-list{padding:0;margin:0;list-style:none;counter-reset:the-count}.sg-annotations-list>li{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background .1s ease;transition:background .1s ease}.sg-annotations-list>li:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:#ccc;color:#222;position:absolute;top:1px;left:0}.sg-annotations-list>li.active{background:rgba(255,255,255,.15)}.sg-annotations-list-title{display:inline;font-size:100%}.sg-annotations-list-title:after{content:"—"}#sg-comments-container{max-width:60em;margin:0 auto}.sg-comment-container{padding-bottom:2em;margin-bottom:1em;border-bottom:1px solid rgba(255,255,255,.25)}.sg-comment-container p:last-child{margin-bottom:0}.sg-comment-container h2{margin-bottom:.25em}

elections2021/static/elections2021/images/logo-koalicni-resp.svg

+<svg id="Group_1" data-name="Group 1" xmlns="http://www.w3.org/2000/svg" width="48.067" height="21.271" viewBox="0 0 48.067 21.271">
+  <path id="Path_17" data-name="Path 17" d="M-391.257,829.452a10.579,10.579,0,0,0,10.521-10.635,10.578,10.578,0,0,0-10.521-10.635,10.579,10.579,0,0,0-10.521,10.635,10.579,10.579,0,0,0,10.521,10.635" transform="translate(401.778 -808.181)" fill="#fff"/>
+  <rect id="Rectangle_65" data-name="Rectangle 65" width="21.042" height="21.27" transform="translate(27.025 0)" fill="#fff"/>
+</svg>

elections2021/static/elections2021/images/logo-koalicni.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="95.855" height="54" viewBox="0 0 95.855 54"><g transform="translate(429.214 -712.274)"><path d="M-225.381,756.58l-1.51,2.466h1.644l2.266-2.466Z" transform="translate(-110.681 -24.238)" fill="#fff"/><path d="M-229.861,766.062h4.221V763.84h-6.665v15.551h6.665v-2.222h-4.221v-4.554h3.355v-2.221h-3.355Z" transform="translate(-107.719 -28.209)" fill="#fff"/><path d="M-251.255,763.84h-2.465l2.4,15.551h3.643l2.4-15.551h-2.244l-1.866,12.685Z" transform="translate(-96.004 -28.209)" fill="#fff"/><g transform="translate(-429.214 712.274)"><path d="M-272.321,775.443c0,2.488,1.31,3.91,3.709,3.91s3.711-1.422,3.711-3.91v-8.086c0-2.489-1.31-3.91-3.711-3.91s-3.709,1.422-3.709,3.91Zm2.443-8.242c0-1.111.489-1.533,1.266-1.533s1.267.422,1.267,1.533v8.4c0,1.111-.489,1.533-1.267,1.533s-1.266-.422-1.266-1.533Z" transform="translate(343.386 -740.268)" fill="#fff"/><path d="M-290.419,766.062h2.554v13.329h2.444V766.062h2.555V763.84h-7.553Z" transform="translate(353.286 -740.483)" fill="#fff"/><path d="M-307.373,767.358c0,4.443,4.776,5.042,4.776,8.242,0,1.111-.489,1.511-1.266,1.511s-1.266-.4-1.266-1.511v-1.111h-2.311v.955c0,2.488,1.244,3.91,3.644,3.91s3.644-1.422,3.644-3.91c0-4.443-4.776-5.043-4.776-8.242,0-1.111.444-1.533,1.221-1.533s1.222.422,1.222,1.533v.645h2.311v-.489c0-2.488-1.222-3.91-3.6-3.91s-3.6,1.421-3.6,3.91" transform="translate(362.597 -740.269)" fill="#fff"/><path d="M-326.293,775.443c0,2.488,1.311,3.91,3.71,3.91s3.711-1.422,3.711-3.91v-8.086c0-2.489-1.311-3.91-3.711-3.91s-3.71,1.422-3.71,3.91Zm2.444-8.242c0-1.111.489-1.533,1.266-1.533s1.266.422,1.266,1.533v8.4c0,1.111-.489,1.533-1.266,1.533s-1.266-.422-1.266-1.533Z" transform="translate(372.911 -740.268)" fill="#fff"/><path d="M-342.12,766.061c.867,0,1.244.489,1.244,1.6v1.533c0,1.244-.555,1.644-1.467,1.644h-.955v-4.776Zm3.976,13.329a4.581,4.581,0,0,1-.266-1.888v-2.4c0-1.622-.4-2.8-1.622-3.31,1.088-.511,1.6-1.555,1.6-3.155v-1.222c0-2.4-1.088-3.576-3.621-3.576h-3.687v15.551h2.443v-6.331h.844c1.111,0,1.6.534,1.6,1.977v2.444a4.785,4.785,0,0,0,.222,1.911Z" transform="translate(383.55 -740.483)" fill="#fff"/><path d="M-363.249,766.594l1.177,7.865h-2.354Zm1.911-2.754h-3.576l-2.488,15.551h2.243l.422-2.821h3l.422,2.821h2.466Z" transform="translate(395.4 -740.483)" fill="#fff"/><path d="M-383.08,766.062h2.554v13.329h2.444V766.062h2.555V763.84h-7.553Z" transform="translate(403.976 -740.483)" fill="#fff"/><path d="M-400.308,767.358c0,4.443,4.776,5.042,4.776,8.242,0,1.111-.489,1.511-1.266,1.511s-1.266-.4-1.266-1.511v-1.111h-2.311v.955c0,2.488,1.244,3.91,3.643,3.91s3.644-1.422,3.644-3.91c0-4.443-4.776-5.043-4.776-8.242,0-1.111.444-1.533,1.221-1.533s1.222.422,1.222,1.533v.645h2.311v-.489c0-2.488-1.222-3.91-3.6-3.91s-3.6,1.421-3.6,3.91" transform="translate(413.438 -740.269)" fill="#fff"/><path d="M-425.126,764.367l2.71,10.886h-5.354Zm2.8,11.331.911,3.665h.488l-3.844-15.573h-.689l-3.754,15.573h.445l.91-3.665Z" transform="translate(429.214 -740.456)" fill="#fff"/><rect width="2.444" height="15.551" transform="translate(51.412 3.287)" fill="#fff"/><path d="M-334.777,721.753h2.555v13.33h2.444v-13.33h2.554v-2.221h-7.553Z" transform="translate(377.552 -716.245)" fill="#fff"/><path d="M-348.175,712.274l-1.51,2.465h1.644l2.266-2.465Zm-.333,6.042,1.177,7.864h-2.354Zm1.911-2.755h-3.577l-2.488,15.551h2.244l.422-2.821h3l.422,2.821h2.466Z" transform="translate(387.337 -712.274)" fill="#fff"/><path d="M-367.489,721.753c.866,0,1.244.489,1.244,1.6v1.533c0,1.244-.555,1.644-1.467,1.644h-.955v-4.776Zm3.976,13.33a4.582,4.582,0,0,1-.267-1.888v-2.4c0-1.622-.4-2.8-1.622-3.311,1.089-.511,1.6-1.555,1.6-3.154v-1.222c0-2.4-1.088-3.576-3.621-3.576h-3.687v15.551h2.443v-6.331h.844c1.111,0,1.6.533,1.6,1.977v2.444a4.786,4.786,0,0,0,.222,1.911Z" transform="translate(397.428 -716.245)" fill="#fff"/><rect width="2.444" height="15.551" transform="translate(22.251 3.287)" fill="#fff"/><path d="M-395.058,721.753c.777,0,1.2.356,1.2,1.467v2.333c0,1.111-.423,1.466-1.2,1.466h-1.155v-5.266Zm0-2.221h-3.6v15.551h2.444v-5.843h1.155c2.444,0,3.643-1.356,3.643-3.844v-2.021c0-2.488-1.2-3.843-3.643-3.843" transform="translate(412.498 -716.245)" fill="#fff"/><path d="M-396.555,818.74a5.252,5.252,0,0,0,5.223-5.28,5.251,5.251,0,0,0-5.223-5.28,5.251,5.251,0,0,0-5.223,5.28,5.252,5.252,0,0,0,5.223,5.28" transform="translate(414.205 -764.74)" fill="#fff"/><rect width="10.446" height="10.559" transform="translate(25.843 43.441)" fill="#fff"/></g></g></svg>

elections2021/templates/elections2021/_article_card.html

+{% load wagtailcore_tags wagtailimages_tags %}
+<article class="card card--hoveractive article-card article-card-pirati-stan {{ article.card_css_class }}">
+  <div class="article-card-cover">
+    <a href="{% pageurl article %}">
+      {% image article.image width-400 as img %}
+      <img src="{{ img.url }}" alt="{{ article.title }}">
+    </a>
+    <div class="article-card-cover__details">
+      <div class="article-card-sharing">
+        <div class="social-icon-group {{ article.card_css_class }}">
+          {% include "elections2021/_share_icon_facebook.html" with content_url=article.full_url %}
+          {% include "elections2021/_share_icon_twitter.html" with content_url=article.full_url title=article.title %}
+        </div>
+      </div>
+      <div class="article-card-meta">
+        <span class="article-card-meta__item">{{ article.date|date:"SHORT_DATE_FORMAT" }}</span>
+        {% if article.author %}
+          <span class="article-card-meta__item">{{ article.author }}</span>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  <div class="card__body article-card__body">
+    <a href="{% pageurl article %}">
+      <h1 class="card-headline mb-4">{{ article.title }}</h1>
+    </a>
+    <p class="card-body-text flex-grow">{{ article.perex }}</p>
+    {% if article.has_tags %}
+      <div class="inline-block-nogap mt-4">
+        {% for tag in article.tags.all %}
+          <a href="{{ page.root_page.articles_page_url }}?tag={{ tag }}" class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+            <div class="btn__body ">{{ tag }}</div>
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</article>

elections2021/templates/elections2021/_pagination.html

+{% load wagtailcore_tags %}
+
+<div class="pagination-container">
+  <nav class="pagination space-x-1">
+
+    {% if paginator.has_previous %}
+    <a href="{% pageurl page %}?page={{ paginator.previous_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon">
+      <div class="btn__body-wrap">
+        <div class="btn__body ">předchozí</div>
+        <div class="btn__icon ">
+          <i class="ico--chevron-left"></i>
+        </div>
+      </div>
+    </a>
+    {% endif %}
+
+    {% for i in paginator.paginator.page_range %}
+      {% if i == paginator.number %}
+      <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-500 btn--condensed hidden md:inline-block">
+      {% else %}
+      <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block">
+      {% endif %}
+        <div class="btn__body ">{{ i }}</div>
+      </a>
+    {% endfor %}
+
+    {% if paginator.has_next %}
+    <a href="{% pageurl page %}?page={{ paginator.next_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed">
+      <div class="btn__body-wrap">
+        <div class="btn__body ">další</div>
+        <div class="btn__icon ">
+          <i class="ico--chevron-right"></i>
+        </div>
+      </div>
+    </a>
+    {% endif %}
+
+  </nav>
+</div>

elections2021/templates/elections2021/_share_icon_facebook.html

+<a
+  href="https://www.facebook.com/sharer/sharer.php?u={{ content_url|urlencode }}"
+  onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+  class="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
+><i class="ico--facebook"></i></a>

elections2021/templates/elections2021/_share_icon_twitter.html

+<a
+  href="https://twitter.com/intent/tweet?text={{ title|urlencode }}&url={{ content_url|urlencode }}"
+  onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+  class="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
+><i class="ico--twitter"></i></a>

elections2021/templates/elections2021/base.html

+{% load static wagtailcore_tags wagtailimages_tags wagtailmetadata_tags %}
+<!DOCTYPE html>
+<html>
+
+<head>
+  <!-- Meta -->
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width" />
+  {% meta_tags %}
+  {% if settings.MAJAK_ENV == "test" %}
+    <meta name="robots" content="noindex, nofollow">
+  {% endif %}
+
+  <!-- Favicon -->
+  {% include "shared/favicon_snippet.html" %}
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="{% static "elections2021/css/styleguide.min.css" %}">
+  <link rel="stylesheet" href="{% static "elections2021/css/styles.css" %}">
+
+  {% if page.root_page.matomo_id %}
+    {% include "shared/matomo_snippet.html" with matomo_id=page.root_page.matomo_id %}
+  {% endif %}
+</head>
+
+<body class="">
+
+  <nav class="navbar navbar-pirati-stan __js-root lg:py-6">
+    <ui-app inline-template>
+      <ui-navbar inline-template>
+        <div>
+          <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+            <div class="navbar__brand my-4 flex items-center xl:hidden lg:my-0 h-full">
+              <a href="/" class="h-full flex justify-center">
+                <img src="{% static "elections2021/images/logo-koalicni-resp.svg" %}" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-4 xl:pr-8" />
+              </a>
+            </div>
+            <div class="navbar__brand my-4 items-center hidden xl:block xl:pr-8 xl:my-0">
+              <a href="/">
+                <img src="{% static "elections2021/images/logo-koalicni.svg" %}" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
+              </a>
+            </div>
+            <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+              <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+                <i class="ico--menu text-3xl"></i>
+              </a>
+            </div>
+            <div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
+              <div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
+                {% for link in page.root_page.header_links %}
+                  <a href="{{ link.value.url }}" target="_blank" class="icon-link contact-line block lg:inline-block opacity-60 hover:opacity-90">
+                    <i class="ico--home"></i> <span>{{ link.value.title }}</span>
+                  </a>
+                {% endfor %}
+              </div>
+            </div>
+            <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+              <ul class="navbar-menu text-white">
+                <li class="navbar-menu__item">
+                  <a href="{{ page.root_page.articles_page_url }}" data-href="{{ page.root_page.articles_page_url }}" class="navbar-menu__link">Aktuality</a>
+                </li>
+                <li class="navbar-menu__item">
+                  <ui-navbar-subitem label="Kandidáti" href="#">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="#" class="navbar-menu__link">Výpis kandidátů</a></li>
+                      <li><a href="#" data-href="#" class="navbar-menu__link">Výpis kandidátů podle mapy</a></li>
+                    </ul>
+                    </ui-navbar-subtitem>
+                </li>
+                <li class="navbar-menu__item">
+                  <a href="#" data-href="#" class="navbar-menu__link">FAQ</a>
+                </li>
+                <li class="navbar-menu__item">
+                  <a href="#" data-href="#" class="navbar-menu__link">Programové body</a>
+                </li>
+              </ul>
+            </div>
+            <div class="navbar__actions navbar__section lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0 h-full justify-center">
+              <button class="btn btn--icon btn--hoveractive btn--autowidth lg:text-sm xl:text-base focus:outline-none">
+                <div class="btn__body-wrap">
+                  <div class="btn__body bg-acidgreen text-black hover:bg-darkacidgreen px-1 sm:px-4 py-2 sm:py-4">Programová aplikace</div>
+                  <div class="btn__icon bg-darkacidgreen text-black">
+                    <i class="ico--app"></i>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </ui-navbar>
+    </ui-app>
+  </nav>
+
+  <main>
+    {% block content %}{% endblock %}
+  </main>
+
+  <footer class="footer footer-pirati-stan bg-black text-white __js-root">
+    <ui-app inline-template>
+      <div>
+        <div class="footer__main py-4 lg:py-16 container container--wide">
+          <section class="footer__brand">
+            <img src="{% static "elections2021/images/logo-koalicni.svg" %}" alt="Piráti a Starostové" class="w-32 mb-6 pr-8 border-r border-grey-400 border-solid" />
+            <p class="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
+              Piráti, {% now "Y" %}. Všechna práva vyhlazena. Sdílejte a nechte
+              ostatní sdílet za stejných podmínek.
+            </p>
+          </section>
+          <section class="footer__main-links text-white lg:grid lg:grid-cols-3 2xl:grid-cols-4 gap-4">
+            <div class="pt-8 pb-4 lg:py-0">
+              <ui-footer-collapsible label="Odkazy">
+                <ul class="mt-4 md:mt-6 space-y-2 text-grey-200">
+                  <li>
+                    <a href="{{ page.root_page.articles_page_url }}">Aktality</a>
+                  </li>
+                  <li>
+                    <a href="#">Kandidáti</a>
+                  </li>
+                  <li>
+                    <a href="#">Programové body</a>
+                  </li>
+                  <li>
+                    <a href="#">FAQ</a>
+                  </li>
+                </ul>
+              </ui-footer-collapsible>
+            </div>
+            <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0 2xl:col-span-2">
+              <ui-footer-collapsible label="Připoj se">
+                <div class="2xl:space-x-3">
+                  <ul class="mt-6 space-y-2 text-grey-200 block 2xl:inline-block">
+                    <li>
+                      <a href="https://www.facebook.com/starostove" class="icon-link contact-line ">
+                        <i class="ico--facebook"></i>
+                        <span>Starostové</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.instagram.com/stan.cz/" class="icon-link contact-line ">
+                        <i class="ico--instagram"></i>
+                        <span>@stan.cz</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://twitter.com/STANcz" class="icon-link contact-line ">
+                        <i class="ico--twitter"></i>
+                        <span>@STANcz</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.youtube.com/user/STAROSTOVE" class="icon-link contact-line ">
+                        <i class="ico--youtube"></i>
+                        <span>Starostové a nezávislí</span>
+                      </a>
+                    </li>
+                  </ul>
+                  <ul class="mt-6 space-y-2 text-grey-200 block 2xl:inline-block">
+                    <li>
+                      <a href="https://www.facebook.com/ceska.piratska.strana" class="icon-link contact-line ">
+                        <i class="ico--facebook"></i>
+                        <span>Česká pirátská strana</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.instagram.com/pirati.cz/" class="icon-link contact-line ">
+                        <i class="ico--instagram"></i>
+                        <span>@pirati.cz</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://twitter.com/PiratskaStrana" class="icon-link contact-line ">
+                        <i class="ico--twitter"></i>
+                        <span>@PiratskaStrana</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.youtube.com/user/CeskaPiratskaStrana" class="icon-link contact-line ">
+                        <i class="ico--youtube"></i>
+                        <span>Česká pirátská strana</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </ui-footer-collapsible>
+            </div>
+            <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
+              <ui-footer-collapsible label="Kontakt">
+                <ul class="mt-6 space-y-2 text-grey-200 inline-block">
+                  <li>Informační linka:</li>
+                  <li class="text-grey-200"><a href="tel:00420608963111">+420 608 963 111</a></li>
+                  <li class="text-grey-200"><a href="mailto:info@piratiastarostove.cz">info@piratiastarostove.cz</a></li>
+                </ul>
+              </ui-footer-collapsible>
+            </div>
+          </section>
+          <section class="footer__social lg:text-right">
+            <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
+              <button class="btn btn--icon btn--hoveractive btn--autowidth lg:text-sm xl:text-base focus:outline-none">
+                <div class="btn__body-wrap">
+                  <div class="btn__body bg-acidgreen text-black hover:bg-darkacidgreen px-1 sm:px-4 py-4">Programová aplikace</div>
+                  <div class="btn__icon bg-darkacidgreen text-black">
+                    <i class="ico--app"></i>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </section>
+        </div>
+        <section class="footer__sub-links">
+          <div class="container container--wide">
+            <div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center pt-4 pb-8 lg:pt-8 border-t border-grey-400 lg:border-t-0" slotWrapperclass="lg:w-2/4">
+              <ul class="lg:w-full lg:pr-8 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 md:space-x-4 text-grey-200">
+                {% for link in page.root_page.footer_links %}
+                  <li class="block md:inline-block">
+                    <a href="{{ link.value.url }}" class="icon-link contact-line ">
+                      <i class="ico--home"></i> <span>{{ link.value.title }}</span>
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </ui-app>
+  </footer>
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
+  <script src="{% static "elections2021/js/main.bundle.js" %}"></script>
+</body>
+</html>

elections2021/templates/elections2021/elections2021_article_page.html

+{% extends "elections2021/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block content %}
+<div class="container container--default py-8 lg:py-24">
+
+  <article>
+    <div class="pt-2 pb-1.5 md:pt-3.5 md:pb-2 mb-8">
+      <h1 class="head-alt-md md:head-alt-lg head-alt-highlighted max-w-5xl mb-4">{{ page.title }}</h1>
+    </div>
+    <div class="flex flex-col md:flex-row md:items-center">
+      <div class="inline-flex divide-x flex-grow">
+        <span class="pr-2">{{ page.date }}</span>
+        {% if page.author %}
+          <span class="pl-2">{{ page.author }}</span>
+        {% endif %}
+      </div>
+      <div class="my-4">
+        {% for tag in page.tags.all %}
+          <a href="{{ page.root_page.articles_page_url }}?tag={{ tag }}" class="btn btn--grey-125 btn--condensed">
+            <div class="btn__body ">{{ tag }}</div>
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+    <figure class="figure">
+      {% image page.image fill-1136x639 as img %}
+      <img src="{{ img.url }}" alt="{{ img.title }}">
+      <figcaption>{{ img.title }}</figcaption>
+    </figure>
+
+    <div class="lg:flex mt-20 lg:space-x-16 justify-center">
+      <div class="lg:w-2/3">
+        <div class="content-block w-full">
+
+          {{ page.text|richtext }}
+
+        </div>
+      </div>
+    </div>
+  </article>
+
+  <section class="mt-16 md:mt-24">
+    <hr>
+
+    <h1 class="head-alt-base md:head-alt-md pb-4 pt-1">Další aktuality</h1>
+    <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+      {% for article in related_articles %}
+        {% include "elections2021/_article_card.html" with article=article %}
+      {% endfor %}
+    </div>
+
+    <div class="text-center mt-8 md:mt-16">
+      <a href="{{ page.root_page.articles_page_url }}" class="btn btn--icon showfulltable text-xl btn--hoveractive btn--to-black">
+        <div class="btn__body-wrap">
+          <div class="btn__body py-4 px-11 leading-5 bg-acidgreen text-black">Všechny aktuality</div>
+          <div class="btn__icon "><i class="ico--chevron-right"></i></div>
+        </div>
+      </a>
+
+    </div>
+  </section>
+
+</div>
+{% endblock %}

elections2021/templates/elections2021/elections2021_articles_page.html

+{% extends "elections2021/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block content %}
+<article class="relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full ">
+  <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid lg:grid-rows-1 h-64  lg:grid-cols-7 items-center 2xl:mx-auto">
+    <div class="lg:row-span-1 lg:col-span-4 order-1 md:pr-20">
+      <h1 class="head-alt-md sm:head-alt-lg  pt-1 max-w-sm">{{ page.title }}</h1>
+    </div>
+    <div class="hidden lg:block lg:row-span-2 lg:col-span-3 order-2 h-full 2xl:absolute 2xl:right-0 2xl:w-1/3">
+      {% image page.photo fill-618x256 as img %}
+      <img class="object-cover w-full h-full" src="{{ img.url }}">
+    </div>
+  </div>
+</article>
+
+<div class="container container--default pt-8 lg:py-24">
+  <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+    {% for article in articles %}
+      {% include "elections2021/_article_card.html" with article=article %}
+    {% endfor %}
+  </div>
+</div>
+
+{% include "elections2021/_pagination.html" with paginator=articles %}
+
+{% endblock %}

elections2021/templates/elections2021/elections2021_home_page.html

+{% extends "elections2021/base.html" %}
+{% load wagtailcore_tags %}
+
+{% block content %}
+<main>
+
+    <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 pt-5">Aktuality</h1>
+
+    <!--  list of articles -->
+    <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+        {% for a in page.articles %}
+            {% include "shared/article_preview.html" with article=a %}
+        {% endfor %}
+    </div>
+
+</main>
+{% endblock %}

elections2021/wagtail_hooks.py

+import wagtail.admin.rich_text.editors.draftail.features as draftail_features
+from django.utils.translation import gettext
+from wagtail.admin.rich_text.converters.html_to_contentstate import (
+    BlockElementHandler,
+    ListElementHandler,
+    ListItemElementHandler,
+)
+from wagtail.core import hooks
+
+
+@hooks.register("register_rich_text_features")
+def register_blockquote_elections2021_feature(features):
+
+    feature_name = "blockquote-elections2021"
+    type_ = "blockquote"
+    tag = "blockquote"
+
+    features.register_editor_plugin(
+        "draftail",
+        feature_name,
+        draftail_features.BlockFeature(
+            {
+                "type": type_,
+                "icon": "openquote",
+                "description": gettext("Blockquote"),
+            }
+        ),
+    )
+
+    features.register_converter_rule(
+        "contentstate",
+        feature_name,
+        {
+            "from_database_format": {
+                tag: BlockElementHandler(type_),
+            },
+            "to_database_format": {
+                "block_map": {
+                    type_: {
+                        "element": tag,
+                        "props": {"class": "quote quote-pirati-stan"},
+                    }
+                }
+            },
+        },
+    )
+
+
+@hooks.register("register_rich_text_features")
+def register_ul_elections2021_feature(features):
+
+    feature_name = "ul-elections2021"
+    type_ = "unordered-list-item"
+    wrapper_tag = "ul"
+    item_tag = "li"
+
+    features.register_editor_plugin(
+        "draftail",
+        feature_name,
+        draftail_features.BlockFeature(
+            {
+                "type": type_,
+                "icon": "list-ul",
+                "description": gettext("Bulleted list"),
+            }
+        ),
+    )
+
+    features.register_converter_rule(
+        "contentstate",
+        feature_name,
+        {
+            "from_database_format": {
+                wrapper_tag: ListElementHandler(type_),
+                item_tag: ListItemElementHandler(),
+            },
+            "to_database_format": {
+                "block_map": {
+                    type_: {
+                        "element": item_tag,
+                        "wrapper": wrapper_tag,
+                        "wrapper_props": {
+                            "class": "unordered-list unordered-list-acidgreen-numbers"
+                        },
+                    }
+                }
+            },
+        },
+    )
+
+
+@hooks.register("register_rich_text_features")
+def register_ol_elections2021_feature(features):
+
+    feature_name = "ol-elections2021"
+    type_ = "ordered-list-item"
+    wrapper_tag = "ol"
+    item_tag = "li"
+
+    features.register_editor_plugin(
+        "draftail",
+        feature_name,
+        draftail_features.BlockFeature(
+            {
+                "type": type_,
+                "icon": "list-ol",
+                "description": gettext("Numbered list"),
+            }
+        ),
+    )
+
+    features.register_converter_rule(
+        "contentstate",
+        feature_name,
+        {
+            "from_database_format": {
+                wrapper_tag: ListElementHandler(type_),
+                item_tag: ListItemElementHandler(),
+            },
+            "to_database_format": {
+                "block_map": {
+                    type_: {
+                        "element": item_tag,
+                        "wrapper": wrapper_tag,
+                        "wrapper_props": {
+                            "class": "ordered-list ordered-list-acidgreen-numbers"
+                        },
+                    }
+                }
+            },
+        },
+    )