diff --git a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache index ba85982988ed7f3be760e09d7a6b4e8e3fa67798..7abcece0171750ec21ae089a14cdd1303ed6398b 100644 --- a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache +++ b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache @@ -1,8 +1,8 @@ <a href="" class="btn btn__slide__wrap {{ classes }}"> - <span class="btn text-sm bg-black text-white w-32 lg:text-base"> + <span class="btn text-lg bg-black text-white w-32 lg:text-base"> {{ btn-text }} </span> - <span class="btn text-sm bg-white text-black w-32 lg:text-base"> + <span class="btn text-lg bg-white text-black w-32 lg:text-base"> {{ btn-text }} </span> </a> diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache index 0385dfe589cf6264b14b4c7e55c5bd36d43b7259..ba2fb8dbd6a12a8ab0236c6f54e7354cdffb39cf 100644 --- a/main/styleguide/source/_patterns/molecules/box-link.mustache +++ b/main/styleguide/source/_patterns/molecules/box-link.mustache @@ -1,5 +1,5 @@ -<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center mr-1"> - <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> +<div class="mb-2 w-96 h-72 flex bg-white flex-col items-center justify-center mr-1 drop-shadow-xl"> + <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8 max-w-20 max-h-20"> <h5 class="head-4xl mb-8">naloď se k pirátům</h5> {{> atoms-button-animated(btn-text: "Přidat se k nám") }} </div> diff --git a/main/styleguide/source/_patterns/molecules/twitter-box.mustache b/main/styleguide/source/_patterns/molecules/twitter-box.mustache index 55d737e6c45c07c492df3f8198798784e3348e05..7a77ed3fab6a6b99d5ddf69acdb7ce6e754c587c 100644 --- a/main/styleguide/source/_patterns/molecules/twitter-box.mustache +++ b/main/styleguide/source/_patterns/molecules/twitter-box.mustache @@ -1,14 +1,16 @@ -<div class="p-4 flex flex-col items-center text-center border border-grey-100"> - <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg" - alt="user image"/> - <h5 class="font-alt mb-2">Tomáš Marný</h5> - <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small> - <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod - tempor invidunt ut labore - et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> +<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0"> + <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="https://randomuser.me/api/portraits/women/56.jpg" + alt="user image"/> + <div class="flex flex-col sm:sm:flex-col"> + <h5 class="font-alt text-xl mb-2 sm:text-base">Tomáš Marný</h5> + <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small> + </div> + </div> + <p class="text-small sm:text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et + justo duo dolores et ea rebum.</p> <a href="" class="hover:no-underline"> - <i class="ico--twitter text-turquoise-400 text-xl"></i> + <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i> </a> </div> diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache index 1f9cefd96c10017e51c16425cd81766ffa4c10f7..b8bce5a2708ceb993ea1ea2e34d6d6b163c92ec3 100644 --- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache +++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache @@ -1,6 +1,6 @@ <div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36" style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> - <div class="container--medium"> + <div class="container-collapsible"> <h2 class="head-7xl text-center mb-6 xl:mb-28"> Piráti zastupují občany </h2> diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache index 585b8005234a081bcac8db35cc226f92e2678bc0..19a0e2329914836fa1a803f82d6e6b5f0944e30b 100644 --- a/main/styleguide/source/_patterns/organisms/header.mustache +++ b/main/styleguide/source/_patterns/organisms/header.mustache @@ -1,7 +1,7 @@ <!-- Navbar --> <nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black"> <!-- Logo --> - <a href="" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3"> + <a href="" class="menu-flag flex justify-center flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3"> <img src="../../images/logo-full-black.svg" alt=""> </a> <!-- Flex container --> @@ -13,7 +13,7 @@ <i class="ico--menu text-3xl"></i> </label> <!-- Menu --> - <div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex"> + <div class="main-menu__main main-menu-items mt-4 space-x-3 xl:mt-0 2xl:space-x-6 xl:flex"> <a href="#" class="menu-link">Jak pracujeme</a> <a href="#" class="menu-link">Program</a> <a href="#" class="menu-link">O nás</a> diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache index 9e93c3fb86373bfa31bfd7485f9b3221325d2cf7..09b693c90ab74f7bd0596f46d7329faa9b8e8028 100644 --- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache +++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache @@ -1,18 +1,20 @@ <div class="container--wide mx-auto mb-8 lg:mb-16"> - <h2 class="head-7xl text-center mb-6 xl:mb-28"> + <div class="flex flex-wrap justify-center"> + <h2 class="w-full flex max-w-xs head-7xl text-left mb-6 sm:text-center xl:mb-28"> Co právě děláme </h2> + </div> <div class="flex flex-wrap justify-center mb-8 lg:mb-24"> - <div class="w-full flex max-w-xs"> + <div class="w-full flex max-w-sm sm:max-w-xs"> {{> molecules-twitter-box }} </div> - <div class="w-full flex max-w-xs"> + <div class="w-full flex max-w-sm sm:max-w-xs"> {{> molecules-twitter-box }} </div> - <div class="w-full flex max-w-xs"> + <div class="w-full flex max-w-sm sm:max-w-xs"> {{> molecules-twitter-box }} </div> - <div class="w-full flex max-w-xs"> + <div class="w-full flex max-w-sm sm:max-w-xs"> {{> molecules-twitter-box }} </div> </div> diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache index dc0b7349c2f82af05de79e4043bc2358beee71d1..01a471a4aa46024f90c277e53ff0541ca687c56b 100644 --- a/main/styleguide/source/_patterns/templates/homepage.mustache +++ b/main/styleguide/source/_patterns/templates/homepage.mustache @@ -9,9 +9,9 @@ <div class="grid-content-with-right-side"> <h1 class="text-white">72% domácností bylo</h1> <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span> + <a href="" class="btn btn__slide__wrap btn-carousel"> + <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více1</span> + <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více1</span> </a> </div> </div> @@ -22,9 +22,9 @@ <div class="grid-content-with-right-side"> <h1 class="text-white">72% domácností bylo</h1> <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span> + <a href="" class="btn btn__slide__wrap btn-carousel"> + <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více2</span> + <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více2</span> </a> </div> </div> @@ -35,9 +35,9 @@ <div class="grid-content-with-right-side"> <h1 class="text-white">72% domácností33 bylo</h1> <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> + <a href="" class="btn btn__slide__wrap btn-carousel"> + <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více3</span> + <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více3</span> </a> </div> </div> diff --git a/main/styleguide/source/css/atoms/flag.pcss b/main/styleguide/source/css/atoms/flag.pcss index f16166ec8b50376665aec4ca1a46c011cabd0720..58a71c86e601e2fc2072ad65a9ba62ca8724fa1c 100644 --- a/main/styleguide/source/css/atoms/flag.pcss +++ b/main/styleguide/source/css/atoms/flag.pcss @@ -8,6 +8,7 @@ left: 100%; top: 0; background: inherit; - clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%); + clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%); } } + diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss index 035c6744a78ab45924cb7d2575ce18a9dc5dadd5..7507f48c3511586193fcbbf829e3f5b6773ba9af 100644 --- a/main/styleguide/source/css/molecules/carousels.pcss +++ b/main/styleguide/source/css/molecules/carousels.pcss @@ -30,18 +30,20 @@ position: relative; .header-carousel--text { - @apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl; + @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl; max-width: 1200px; position: absolute; - top: 35%; - margin-left: 15%; - + top: 50%; @screen sm { margin-left: 10%; + top: 35%; } @screen lg { top: 30%; } + @screen xl { + margin-left: 15%; + } @screen 2xl { top: 45%; } @@ -56,6 +58,13 @@ transition: all 800ms ease-in-out; transform: scale(1.15, 1.15); width: 100%; + height: 458px; + object-fit: cover; + margin-bottom: -3px; + + @screen sm { + height: auto; + } } .slick-slide { @@ -85,22 +94,31 @@ .slick-arrow { font-size: 0; position: absolute; - right: 10%; + right: 20%; top: 80%; z-index: 10; + @screen sm { + right: 10%; + } @screen lg { top: 60%; } &:before, &:after { + border-right: 3px solid white; + border-bottom: 3px solid white; + color: white; + content: ''; + height: 1.3rem; + position: absolute; + width: 1.3rem; + @screen sm { border-right: 2px solid white; border-bottom: 2px solid white; - color: white; - content: ''; height: .8rem; - position: absolute; width: .8rem; + } @screen lg { height: 1rem; width: 1rem; @@ -120,16 +138,24 @@ color: white; left: 5%; position: absolute; - top: 60%; + top: 90%; z-index: 10; + @screen sm{ + top: 60%; +} li { - border: 1px solid white; - border-radius: 50%; - height: 6px; - margin-bottom: 6px; - width: 6px; - + display:inline-block; + border: 1px solid white; + border-radius: 50%; + height: 6px; + width: 6px; + margin: 3px; + + @screen sm { + display: block; + margin-bottom: 6px; + } &.slick-active { background-color: white; } @@ -140,6 +166,10 @@ } } } +.btn-carousel{ + @aplly h-11; + top: 28%; +} .article-carousel { .slick-arrow { diff --git a/main/styleguide/source/css/molecules/sliding_button.pcss b/main/styleguide/source/css/molecules/sliding_button.pcss index 15ad7d2029ce2c12db8f9db9607c8600c0353118..4e1fbdabb4c9f25ecc362d2998e4649e1282dd62 100644 --- a/main/styleguide/source/css/molecules/sliding_button.pcss +++ b/main/styleguide/source/css/molecules/sliding_button.pcss @@ -1,5 +1,5 @@ .btn { - @apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11; + @apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11; } .btn__slide__wrap { diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss index c651eabba645378bac7dc4cf885357f89af7bd4e..5f80724daf06b84d4d4c5284dbbac4f9676f23f3 100644 --- a/main/styleguide/source/css/organisms/navbar.pcss +++ b/main/styleguide/source/css/organisms/navbar.pcss @@ -38,6 +38,7 @@ .navbar-background { background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%); + min-height: 63px; } .main-menu-grid { max-width: none; @@ -48,7 +49,7 @@ .menu-flag { position: absolute; left: 0; - width: 110px; + width: 209px; } .main-menu__external {