diff --git a/README.md b/README.md
index bf21502c09cda866df601f9f16c1172585950792..655746e690b51b7252bea4060cfcfbf21b757ec1 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,6 @@ python manage.py migrate --settings=majak_uistyleguide.settings.dev
python manage.py runserver --settings=majak_uistyleguide.settings.dev
```
-
### Setup Vite
#### Install requirements
@@ -57,6 +56,11 @@ python manage.py runserver --settings=majak_uistyleguide.settings.dev
npm i
```
+### Dev mode (with setting DJANGO_VITE_DEV_MODE = True)
+cp majak_uistyleguide/settings/local.py.example majak_uistyleguide/settings/local.py
+npm run dev
+python manage.py runserver --settings=majak_uistyleguide.settings.local
+
### Build
The build command compiles the styleguide CSS To build, run:
diff --git a/majak_uistyleguide/settings/local-example.py b/majak_uistyleguide/settings/local.py.example
similarity index 100%
rename from majak_uistyleguide/settings/local-example.py
rename to majak_uistyleguide/settings/local.py.example
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html
deleted file mode 100644
index 56f76e81561172ea99ea00a9297919eca47a7bb0..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<a href="{{ target_url }}" class="btn btn__slide__wrap {{ classes }}">
- <span class="btn text-lg bg-black px-1 text-white lg:text-base">{{ btn_text }}</span>
- <span class="btn text-lg bg-white px-1 text-black lg:text-base">{{ btn_text }}</span>
-</a>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html
deleted file mode 100644
index f0202a9663896cffd53a282a0a2686b8ddb7e7bc..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<button type="submit" class="btn btn__slide__wrap {{ classes }}">
- <span class="btn text-base bg-black px-1 text-white"> {{ btn_text_form }} </span>
- <span class="btn text-base bg-white px-1 text-black"> {{ btn_text_form }} </span>
-</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..a645a0537f1c457b0b57f855e2a166fffc5d5ac9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html
@@ -0,0 +1,7 @@
+<a href="{{ target_url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text }}
+ </span>
+ </span>
+</a>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..330e383fe586f367dbbcc9cb33975e5991e7db08
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html
@@ -0,0 +1,7 @@
+<a href="{{ target_url }}" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text }}
+ </span>
+ </span>
+</a>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..9dcb21c6e0a27a32fbd1d032b30635976e045e35
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html
@@ -0,0 +1,7 @@
+<button type="button" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text }}
+ </span>
+ </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a02f75465e09571d2b63ae31beeb5be3e93091f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml
@@ -0,0 +1,4 @@
+context:
+ target_url: 'https://example.com'
+ btn_text: 'Zobrazit další'
+ classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html
deleted file mode 100644
index a4cd4ac6bc2a50cb7cb7a80722fd95ddc442e6aa..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<button type="button" class="btn btn__slide__wrap {{ classes }}">
- <span class="btn text-base bg-black px-1 text-white">
- {{ btn_text }}
- </span>
- <span class="btn text-base bg-white px-1 text-black">
- {{ btn_text }}
- </span>
-</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..79c31a478a3cdf827a64f92a6b8611a5c47f51d9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html
@@ -0,0 +1,7 @@
+<button type="button" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text }}
+ </span>
+ </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a02f75465e09571d2b63ae31beeb5be3e93091f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml
@@ -0,0 +1,4 @@
+context:
+ target_url: 'https://example.com'
+ btn_text: 'Zobrazit další'
+ classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..a00dcd9af17d531f3f68faeaa40f916f9c36d6df
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html
@@ -0,0 +1,7 @@
+<button type="submit" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text_form }}
+ </span>
+ </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..53edd45a86ad972331c874e81e943304c1767a22
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html
@@ -0,0 +1,7 @@
+<button type="submit" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+ <span class="btn__body-wrap w-36 h-11">
+ <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+ {{ btn_text_form }}
+ </span>
+ </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..ed4c7f75a40972fd1ca46f0833cc9731957b9266
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml
@@ -0,0 +1,3 @@
+context:
+ btn_text_form: 'Zobrazit další'
+ classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
index 73684af74514a695e383f1117096306fc3f0e9f9..5b76cc4a26041eb1786914b39220ebd948f9270e 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
@@ -11,7 +11,7 @@
{{ text_carousel }}
</h4>
</a>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zjistit více' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zjistit více' %}
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
index be1fc7a57b6b70828b9a8fcc9412365fd9a68b0b..f8393fb433e0a585fe392a05e4f83ef90c05454d 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
@@ -14,6 +14,6 @@
{{ work_article_text }}
</p>
<div>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
index 754e51dde756305f3be4589ff7f8e011b97d5689..cc77b94220eec81ecf83b0013df019293dffea10 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
@@ -1,26 +1,26 @@
<div class="grid-container mb-2 lg:mb-12 relative">
<div class="grid-left-side h-full bg-grey-150 left-tab">
<div class="p-6 flex flex-wrap flex-row items-center justify-between xl:items-start xl:flex-col">
- <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span>
- <span>
+ <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span>
+ <div>
<div class="flex flex-row static bottom-0 xl:absolute sm:bottom-5">
- <a href="" class="flex hover:no-underline">
- <i class="ico--facebook mx-1"></i>
- </a>
- <a href="" class="flex hover:no-underline">
- <i class="ico--twitter mx-2"></i>
- </a>
- <a href="" class="flex hover:no-underline">
- <i class="ico--instagram mx-1"></i>
- </a>
+ <a href="" class="flex hover:no-underline">
+ <i class="ico--facebook mx-1"></i>
+ </a>
+ <a href="" class="flex hover:no-underline">
+ <i class="ico--twitter mx-2"></i>
+ </a>
+ <a href="" class="flex hover:no-underline">
+ <i class="ico--instagram mx-1"></i>
+ </a>
</div>
- </span>
+ </div>
</div>
</div>
<div class="grid-content leading-6">
- <h2 class="head-xl">
+ <p class="font-condensed text-xl leading-7 mb-5">
{{ text_perex }}
- </h2>
+ </p>
</div>
<div class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
index 716716726b4503a4942c44fe8bb4d769fcade528..2872ebc9a4cb5fa0423043eeba7e3c301368be90 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
@@ -1,14 +1,13 @@
<div class="flex flex-wrap mb-5 lg:mb-10">
<a href="#">
- <img src="../../../../static/images/person-table.png" alt=""
- class="lg:max-w-lg lg:mr-11">
+ <img src="../../../../static/images/person-table.png" alt="" class="lg:max-w-lg lg:mr-11">
</a>
<div class="flex flex-col max-w-xl items-start">
- <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8"> {{ main_article_date }} </span>
+ <span class="text-green-500 head-3xl mb-4 lg:mb-8"> {{ main_article_date }} </span>
<a href="#" class="head-4xl mb-5 lg:mb-10"> {{ main_article_title }} </a>
<p class="leading-6 mb-4 lg:mb-8">
{{ main_article_text }}
</p>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
index 76eb79f6251dfb794208d7becfb1338b82f02305..f0053b9ad2e9fb69b43e1508d84d82073882e047 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
@@ -11,5 +11,5 @@
<p class="mb-6">
{{ perston_article_text }}
</p>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
index 6a5b144d2662d17559616ae9c2cf522d7e179ba6..f9d1d28be36ca41f7a628ac0738c285e4c80a1d9 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
@@ -9,6 +9,6 @@
<h4 class="font-alt leading-5 text-base uppercase lg:text-base mb-2">
{{ small_article_text }}
</h4>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
index b947c28501c464effc732a5c8e9eadeca23e0d75..c5c4eac45b9047979da1593ae6ed3d0adbad8693 100644
--- a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
+++ b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
@@ -7,6 +7,6 @@
<span class="font-bold mr-1">Stáhnout soubor:</span>
<span class="overflow-hidden text-ellipsis">{{ block_dowload_file_title }}</span>
</div>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Stáhnout' classes='h-11 p-0' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Stáhnout' classes='h-11 p-0' %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
index 4b51345319df092314ce7fc853329eab2e6121b2..fcb15f618b9322d89fc8070e1bea8118de293226 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
@@ -1,5 +1,5 @@
<div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80 hover:no-underline"
style="background-image: url('../../../../static/images/person-table.png')">
<h5 class="head-alt-md text-white mt-24 mb-8">{{ representative_title }}</h5>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Poslanecký klub' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Poslanecký klub' %}
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
index 8a35689c7c650d16f6669e7d0f34439f183d2e87..d298be8f1820df0c8ff4da878b38e60e9e9f8121 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
@@ -2,5 +2,5 @@
<img src="../../../../static/images/person-table.png" alt=""
class="mb-8 max-w-20 max-h-20">
<h5 class="head-4xl mb-8">{{ box_link_title }}</h5>
- {% include 'patterns/atoms/buttons/plain_button_animated.html' with btn_text='Přidat se k nám' classes='shrink-0' %}
+ {% include 'patterns/atoms/buttons/plain_button.html' with btn_text='Přidat se k nám' classes='shrink-0' %}
</a>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
index 1cefb011085d82a51cf6084f45a8603d0bbac3fd..9e34b2f14372730113f541ff009e173f934368b2 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
@@ -1,11 +1,14 @@
<a href="#" class="mb-5 p-4 w-full flex flex-col items-center justify-between text-center border border-grey-100 sm:mb-0 hover:no-underline">
<div>
- <div class="flex flex-row sm:flex-col items-center">
- <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="../../../../static/images/person-table.png"
- alt="user image"/>
+ <div class="flex flex-row sm:flex-col items-start sm:items-center">
+ <img
+ class="rounded-full shadow-sm w-12 mr-2 sm:mr-0 mb-0 sm:mb-2"
+ src="../../../../static/images/person-table.png"
+ alt="user image"
+ />
<div class="flex flex-col sm:flex-col">
- <h5 class="font-alt text-xl mb-2 sm:text-base">{{ twitter_person }}</h5>
- <small class="mb-4 text-turquoise-400">{{ twitter_mail }}</small>
+ <h5 class="font-alt text-xl mb-2 sm:text-base text-left sm:text-center">{{ twitter_person }}</h5>
+ <small class="mb-4 text-turquoise-400 text-left sm:text-center">{{ twitter_mail }}</small>
</div>
</div>
<p class="text-small sm:text-base leading-6 mb-2">
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
index 7dd4d247dbdceada3b3cf2fb5557cba6e8147b45..2fc3269567249152752fd86fc27bbcf9a725db37 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
@@ -9,5 +9,5 @@
{{ address_more }}
</p>
</div>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Lidé' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Lidé' %}
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
index fbb649286c26073d01fdbb1d77ea0c6aae39e26d..248e39fdcfa1b97bc16c9d57e4ba36d71767aee4 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
@@ -22,7 +22,7 @@
</span>
</div>
<div>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
</div>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
index 7d3aa27e267db42bd2c7de5df9f7046f170d20bc..78c00445650c15d88b7b4410598b267188d5f4e8 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
@@ -16,7 +16,7 @@
</span>
</div>
<div>
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
</div>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
index 015ef2b6863a26cc50fab32ad9ad08a987699a65..fccf70f1d7be4e606b85fb5aee078913cec24275 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
@@ -1,19 +1,20 @@
<div class="__js-root">
<ui-header-carousel>
{% for content in carousel_content %}
- <div class="xl:h-screen relative">
+ <div class="xl:min-h-screen relative">
<img src="../../../../static/images/background-images/bg-bartos-newsletter.jpg" draggable="false">
<div class="header-carousel--text grid-container">
- <div class="grid-content-with-right-side h-fit">
+ <div class="h-fit">
<h1 class="text-white">{{ content.label_first }}</h1>
- <h1 class="text-orange-250 mb-2">{{ content.label_second }}</h1>
- <a href="" class="btn btn__slide__wrap btn-carousel">
- <span class="btn text-lg bg-white px-1 lg:text-base">{{ content.button_text }}</span>
- <span class="btn text-lg bg-black text-white px-1 lg:text-base">{{ content.button_text }}</span>
+ <h1 class="text-yellow-500 mb-2">{{ content.label_second }}</h1>
+ <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase">
+ <div class="btn__body-wrap w-32 h-11">
+ <div class="btn__body w-32 h-11 text-lg xl:text-base xl:w-auto">{{ content.button_text }}</div>
+ </div>
</a>
</div>
</div>
</div>
{% endfor %}
</ui-header-carousel>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
index 155dcd8a2884b0a5b184247eb6134e1c78b5abbb..1de0dff52f61fec801048fef4ff7e31436dda113 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
@@ -2,12 +2,12 @@ context:
carousel_content:
- label_first: '+72% domácností bylo'
label_second: 'násilně digitalizováno'
- button_text: 'Zjistit více1'
- - label_first: '+72% domácností bylo'
- label_second: 'násilně digitalizováno'
- button_text: 'Zjistit více1'
- - label_first: 'Pokud si tady'
- label_second: 'Tak si na konci'
+ button_text: 'Zjistit více'
+ - label_first: '+52% domácností bylo'
+ label_second: 'násilně zachráněno'
+ button_text: 'Zjistit vícero'
+ - label_first: 'Pokud jsi tady'
+ label_second: 'Tak jsi na konci'
button_text: 'Díky'
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
index 6e51358b1748c67df02c2808b4261c564335d2b2..4cb7922ba838734711a1d26ba21dc5578aeca355 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
@@ -4,15 +4,15 @@
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ articles_section_title }}
</h2>
- {% include 'patterns/molecules/articles/main_article_preview.html' %}
+ {% include 'patterns/molecules/articles/main_article_preview.html' %}
<div class="__js-root">
<ui-article-carousel>
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
- {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+ {% include 'patterns/molecules/articles/article_carousel_item.html' %}
</ui-article-carousel>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
index 6fc9646ce689817af477c5c69e4eb2362d001aeb..2b7591af8420fc646434ff3a2ed0ebec988f95f3 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
@@ -8,7 +8,7 @@
{% include 'patterns/molecules/articles/person_article_preview.html' %}
</div>
<div class="flex justify-center">
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
</div>
</div>
</section>
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
index f63aca9377ba7de2285eaa9588d5f12393f17bb3..63438d5bd0d42a33cda40b586e32a582bbf08fb0 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
@@ -37,7 +37,7 @@
</div>
</div>
<div class="flex justify-center">
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
</div>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
index 033fd049c60bf318d9dbb78481ac0789e99d6c2d..8cb65017a666b535ca5d2df9ffeb19e76506e6d8 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
@@ -11,7 +11,7 @@
class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
<!-- Hamburger Icon -->
<input class="hidden" type="checkbox" id="menuToggle"/>
- <label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+ <label class="pl-3 py-3 z-50 hamb mr-1 mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
<span class="container">
<span class="bar1"></span>
<span class="bar2"></span>
@@ -42,15 +42,14 @@
</div>
<div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
<a href="#"
- class="btn btn--green-500 btn--hoveractive font-condensed uppercase">
+ class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive xl:w-auto uppercase">
<div class="btn__body-wrap w-32 h-11">
- <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div>
+ <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div>
</div>
</a>
- <a href="#"
- class="btn btn--violet-700 btn--hoveractive font-condensed xl:w-auto uppercase">
+ <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase">
<div class="btn__body-wrap w-32 h-11">
- <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div>
+ <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div>
</div>
</a>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
index 77c2d9baba7e298f1df37419b82b68f39bcea4bb..d7ea844ae8dd84fafd08f5b7b7e3482a8cc9a45a 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
@@ -9,15 +9,17 @@
<div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
<div class="grid-full newsletter-grid">
<i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i>
- <span class="newsletter-grid__additional-text uppercase text-xl xl:text-base font-bold mb-2 xl:w-full">
- {{ newsletter_section_label }}
- </span>
- <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">{{ newsletter_section_text }}</h5>
+ <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">
+ {{ newsletter_section_text }}<br>
+ <span class="uppercase text-sm xl:text-base leading-1 mb-2 xl:w-full">
+ {{ newsletter_section_label }}
+ </span>
+ </h5>
<div class="newsletter-grid__input flex flex-col items-start">
<form method="post" class="w-full max-w-md" action=".">
{% include 'patterns/atoms/form_fields/form_input.html' with form_placeholder='Tvůj email' classes='mb-3 w-full' %}
{% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %}
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Odebírat' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Odebírat' %}
</form>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
index ae51314f6d03cc3501ad36e6344abab00b4923d6..841c0dcd833d33f44e4e22e274ed85831218facc 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
@@ -23,6 +23,6 @@
</div>
</div>
<div class="flex justify-center mt-8 lg:mt-24">
- {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+ {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/templates/article/article_list.html b/majak_uistyleguide/templates/patterns/templates/article/article_list.html
index ca908eaac4550d947927a56d780726bc02dccfcb..900ee074cfcb2664f77155b9addc3c60a7eb4875 100644
--- a/majak_uistyleguide/templates/patterns/templates/article/article_list.html
+++ b/majak_uistyleguide/templates/patterns/templates/article/article_list.html
@@ -1,14 +1,14 @@
- {% include 'patterns/organisms/layout/navbar.html' %}
- {% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %}
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %}
<main role="main">
- <div class="grid-container mb-2 xl:mb-12">
- <div class="grid-content leading-6">
- <h2 class="head-xl mb-2">
+ <div class="grid-container">
+ <div class="grid-content">
+ <p class="font-condensed text-xl leading-7 mb-5">
{{ how_we_works_text_1 }}
- </h2>
- <h2 class="head-xl mb-2">
+ </p>
+ <p class="font-condensed text-xl leading-7 mb-5">
{{ how_we_works_text_2 }}
- </h2>
+ </p>
</div>
</div>
<div class="__js-root">
diff --git a/majak_uistyleguide/templates/patterns/templates/people/people.html b/majak_uistyleguide/templates/patterns/templates/people/people.html
index 256e30f442d9ae3f58d9c078b8fada761c499c81..9f902b2d31ed6f00b0d2c3584488b179579c81f6 100644
--- a/majak_uistyleguide/templates/patterns/templates/people/people.html
+++ b/majak_uistyleguide/templates/patterns/templates/people/people.html
@@ -3,7 +3,7 @@
<main role="main" class="mb-4 xl:mb-20">
<div class="grid-container">
<div class="grid-content">
- <p class="font-alt text-xl leading-7 mb-5">
+ <p class="font-condensed text-xl leading-7 mb-5">
{{ people_text }}
</p>
</div>
diff --git a/majak_uistyleguide/templates/patterns/templates/people/person.html b/majak_uistyleguide/templates/patterns/templates/people/person.html
index 1ebdf04ac8cf0746911403c0c5520b692328c2c5..dbbac5334dfb97eac381a7bb454f6df5e337799a 100644
--- a/majak_uistyleguide/templates/patterns/templates/people/person.html
+++ b/majak_uistyleguide/templates/patterns/templates/people/person.html
@@ -6,7 +6,7 @@
<section class="grid-container person-grid-container">
<div class="grid-content leading-6">
<article class="mb-4 xl:mb-24 xl:mr-2">
- <p class="font-alt text-xl leading-7 mb-5">
+ <p class="font-condensed text-xl leading-7 mb-5">
{{ person_text_1 }}
</p>
<p class="mb-5">
diff --git a/majak_uistyleguide/templates/patterns/templates/program/program.html b/majak_uistyleguide/templates/patterns/templates/program/program.html
index 95548b91a3e2138bcccc707cbbfaddbece9d5985..df37e7202778961c892bf275f9b40c9178018c09 100644
--- a/majak_uistyleguide/templates/patterns/templates/program/program.html
+++ b/majak_uistyleguide/templates/patterns/templates/program/program.html
@@ -4,7 +4,7 @@
<main role="main" class="mb-4 xl:mb-20">
<div class="grid-container">
<div class="grid-content">
- <p class="font-alt text-xl leading-7 mb-5 program-perex">
+ <p class="font-condensed text-xl leading-7 mb-5 program-perex">
{{ program_text }}
</p>
</div>
diff --git a/src/css/atoms/heading.pcss b/src/css/atoms/heading.pcss
index 43114d592635f4d279b0fa2abc5a2a40bc876993..5ae0d9982a22890fe3f1a3e5a2ccfe1e7ee4d701 100644
--- a/src/css/atoms/heading.pcss
+++ b/src/css/atoms/heading.pcss
@@ -143,8 +143,6 @@
clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
}
-
-
.head-xl {
@apply font-alt text-base lg:text-xl font-medium leading-7 uppercase;
}
diff --git a/src/css/molecules/carousels.pcss b/src/css/molecules/carousels.pcss
index 5fdb49d9e08a55ed1c4715d6c1fcd1d9997ff807..828e23a0c47ceb1791b061246024d618019369c6 100644
--- a/src/css/molecules/carousels.pcss
+++ b/src/css/molecules/carousels.pcss
@@ -36,14 +36,16 @@
.header-carousel--text {
@apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
max-width: 1200px;
- white-space: nowrap;
position: absolute;
- top: 50%;
- margin-left: 10%;
+ top: 20%;
+
@screen sm {
margin-left: 10%;
top: 35%;
}
+ @screen md {
+ white-space: nowrap;
+ }
@screen lg {
top: 25%;
}
@@ -51,6 +53,7 @@
top: 30%;
}
@screen 2xl {
+ margin-left: 15%;
top: 40%;
}
}
diff --git a/src/css/molecules/sliding_button.pcss b/src/css/molecules/sliding_button.pcss
index 03ce560c6e22be8ca8ade3ee6cfac9d11cb3e51f..d1f78c05963706f805a77c1de91738ffd02be127 100644
--- a/src/css/molecules/sliding_button.pcss
+++ b/src/css/molecules/sliding_button.pcss
@@ -3,7 +3,8 @@
min-width: 8rem;
}
-.btn__slide__wrap {
+/*
+.btn__slide__wrap { // removed on request of MO in 2022/11
overflow: hidden;
position: relative;
@@ -28,3 +29,4 @@
}
}
}
+*/
diff --git a/src/css/organisms/footer.pcss b/src/css/organisms/footer.pcss
index b34783ca19c0f482d2854c798682725d1126fd42..4a51164d17066649698c3a43c112c1cfe9d8bc24 100644
--- a/src/css/organisms/footer.pcss
+++ b/src/css/organisms/footer.pcss
@@ -28,7 +28,7 @@
display: block;
height: 40px;
line-height: 40px;
- min-width: 150px;
+ min-width: 200px;
}
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index f20bc87b2d01f06d9d567a703b63ab6dfc4cb67a..f62a7694da204bc12f91c4628f176556c8947cca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,6 +74,7 @@ module.exports = {
'100': '#f3f3f3',
'125': '#f0f0f0',
'150': '#ECECEC',
+ '175': '#d0d0d0',
'200': '#ADADAD',
'300': '#4c4c4c',
'350': '#4F4F4F',
@@ -97,6 +98,8 @@ module.exports = {
'200': '#f7f38a',
'300': '#ffea5a',
'400': '#fde119',
+ '500': '#f9ce05',
+ '600': '#d7b103',
},
'red': {
'600': '#d60d53'
@@ -186,6 +189,10 @@ module.exports = {
text: 'black',
background: 'grey.125',
},
+ 'grey-175': {
+ text: 'black',
+ background: 'grey.175',
+ },
'white': {
text: 'black',
background: 'white',
@@ -211,6 +218,14 @@ module.exports = {
text: 'black',
background: 'green.500',
},
+ 'yellow-500': {
+ text: 'black',
+ background: 'yellow.500',
+ },
+ 'yellow-600': {
+ text: 'black',
+ background: 'yellow.600',
+ },
'orange-300': {
text: 'white',
background: 'orange.300',
@@ -223,7 +238,7 @@ module.exports = {
text: 'black',
background: 'violet.500',
},
- 'violet-700': {
+ 'violet-700': {
text: 'black',
background: 'violet.700',
},