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', },