diff --git a/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache b/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache new file mode 100644 index 0000000000000000000000000000000000000000..8b1eee25b7883a62bfb06e95603affe4db0668c7 --- /dev/null +++ b/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache @@ -0,0 +1,15 @@ +<div class="flex mb-6"> + <i class="{{ icon }} mr-6 text-6xl"></i> + <div class="flex flex-col"> + <h3 class="font-alt mb-4 text-4xl"> + DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT + </h3> + <p class="leading-6"> + Bydlení je jednou ze základních věcí pro každou obec nebo město. Nevnímáme bydlení jako + zásluhu. Bydlet + podle nás potřebuje každý, a právě obecní bydlení může poskytovat zázemí pro všechny skupiny obyvatel od + znevýhodněných rodin a jednotlivců, přes rodiny se středními příjmy, seniory až například po potřebná + povolání. A bydlet nesmí znamenat zadlužit se. + </p> + </div> +</div> diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache index 580c756a5be2c88375e881e154da6deec2e9b435..a746fea16ea5c08f27e3a30d3e5c6967e4120fbf 100644 --- a/main/styleguide/source/_patterns/molecules/simple_header.mustache +++ b/main/styleguide/source/_patterns/molecules/simple_header.mustache @@ -1,7 +1,7 @@ <header class="bg-black flex items-center h-80 header-clip mb-36 py-32 w-full"> <div class="container--narrow flex items-center"> <h1 class="font-alt text-7xl text-white"> - Kontakty + {{ title }} </h1> </div> </header> diff --git a/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache b/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache new file mode 100644 index 0000000000000000000000000000000000000000..dd163ee2368a7037429cc4aa4d74772b9df64cbe --- /dev/null +++ b/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache @@ -0,0 +1,6 @@ +<div class="switch"> + <a class="switch__item switch__item--active">{{ cta }}</a> + <a class="switch__item">{{ cta }}</a> + <a class="switch__item">{{ cta }}</a> + <a class="switch__item">{{ cta }}</a> +</div> diff --git a/main/styleguide/source/_patterns/pages/program.mustache b/main/styleguide/source/_patterns/pages/program.mustache new file mode 100644 index 0000000000000000000000000000000000000000..862ea4db9c29eca7bcf35d62440ec62618f03034 --- /dev/null +++ b/main/styleguide/source/_patterns/pages/program.mustache @@ -0,0 +1 @@ +{{> templates-program }} diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache index 51f3e8686d3c9c32792467ae9bc96689b15e1084..a155052204a6f3c2970062f9bc0173b0dbf64f58 100644 --- a/main/styleguide/source/_patterns/templates/contact.mustache +++ b/main/styleguide/source/_patterns/templates/contact.mustache @@ -1,6 +1,6 @@ {{> organisms-header }} -{{> molecules-simple_header }} +{{> molecules-simple_header(title: "Kontakty") }} <main role="main"> <section class="container--middle flex flex-wrap mb-16 pl-44"> diff --git a/main/styleguide/source/_patterns/templates/program.mustache b/main/styleguide/source/_patterns/templates/program.mustache new file mode 100644 index 0000000000000000000000000000000000000000..6e97716363ce3e6dc1cee4f43cb572c5be1f74fd --- /dev/null +++ b/main/styleguide/source/_patterns/templates/program.mustache @@ -0,0 +1,26 @@ +{{> organisms-header }} + +{{> molecules-simple_header(title: "Program") }} + +<main role="main"> + <div class="container--narrow mx-auto"> + <h2 class="max-w-xl font-alt leading-6 mx-auto mb-12"> + 23. a 24. září 2022 nás čekají volby do zastupitelstev obcí a do třetiny Senátu Parlamentu České republiky. + Níže předkládáme zásadní body společného programu pro komunální volby. <br> Kompletní program ve formátu pdf. <br> + Programy jednotlivých sdružení naleznete na jejich stránkách. + </h2> + <div class="mb-12"> + {{> molecules-multi-state-switch }} + </div> + <div class="mb-12"> + {{> molecules-icon-title-text-block(icon: "ico--book") }} + {{> molecules-icon-title-text-block(icon: "ico--search") }} + {{> molecules-icon-title-text-block(icon: "ico--eye") }} + </div> + </div> + {{> organisms-newsletter-section }} +</main> + + + +{{> organisms-footer }} diff --git a/main/styleguide/source/css/molecules/switch.pcss b/main/styleguide/source/css/molecules/switch.pcss new file mode 100644 index 0000000000000000000000000000000000000000..a65505c16bec1f222801d23ca9bb2ce1495b436b --- /dev/null +++ b/main/styleguide/source/css/molecules/switch.pcss @@ -0,0 +1,16 @@ +.switch { + @apply inline-flex; +} + +.switch__item { + @apply py-4 px-8 bg-grey-150 mr-2 font-alt font-normal text-xl text-white text-center cursor-pointer; + + &:hover { + @apply no-underline bg-grey-400; + } + + &.switch__item--active, + &.switch__item--active:hover { + @apply bg-turquoise-500; + } +} diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss index 2b8e9845094701b99c793699cbbab79321a9fbe4..9885fa89fb9f625cbb352f09706cc34738173469 100644 --- a/main/styleguide/source/css/style.pcss +++ b/main/styleguide/source/css/style.pcss @@ -28,6 +28,7 @@ @import "./molecules/person_box.pcss"; @import "./molecules/photo_header.pcss"; @import "./molecules/sliding_button.pcss"; +@import "./molecules/switch.pcss"; @import "./organisms/footer.pcss"; @import "./organisms/navbar.pcss"; diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js index 2f5374bad75cd281410ff3c6c3f880588aa3b54b..359b32203c47818fe52c893e64fba7ea98a9109a 100644 --- a/main/styleguide/tailwind.config.js +++ b/main/styleguide/tailwind.config.js @@ -71,6 +71,7 @@ module.exports = { '50': '#f7f7f7', '100': '#f3f3f3', '125': '#f0f0f0', + '150': '#CDCDCD', '200': '#ECECEC', '300': '#4c4c4c', '400': '#343434',