diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache index 6c25c01c8ef0458e75b9b1c078040cba060d3c2e..b73031f238f974e971f1a612308dbec6e5758c11 100644 --- a/main/styleguide/source/_patterns/templates/contact.mustache +++ b/main/styleguide/source/_patterns/templates/contact.mustache @@ -5,8 +5,8 @@ <main role="main"> <div class="grid-container"> <section class="grid-content-with-right-side flex flex-wrap mb-16"> - <div> - <h2 class="font-alt text-4xl mb-5"> + <div class="mb-12 md:mb-0"> + <h2 class="font-alt text-3xl sm:text-4xl mb-5"> Kontakty pro veřejnost </h2> <div class="flex flex-wrap justify-between"> @@ -30,7 +30,7 @@ </a><br> <br> </div> - <div class="leading-5 w-5/12"> + <div class="leading-5 w-5/6 sm:w-5/12"> <span class="font-bold">Informační linka:</span><br/> +420 703 681 682<br/> +420 608 963 111<br/> @@ -67,7 +67,7 @@ <h2 class="font-alt text-4xl mb-5"> Další kontakty </h2> - <div class="flex flex-wrap"> + <div class="flex flex-wrap xs:justify-center"> <div class="contact-box"> <div> <div class="h-16 mx-auto w-16"> @@ -138,14 +138,14 @@ <h2 class="font-alt text-4xl mb-5"> Kontakty pro média </h2> - <div class="flex flex-wrap"> + <div class="flex flex-wrap justify-center"> <div class="flex mr-4 person-box"> <div class="mr-7"> - <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" + <img class="rounded-full shadow-sm w-20 sm:w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image"> </div> <div class="flex flex-col py-4"> - <h6 class="font-bold text-3xl"> + <h6 class="font-bold text-2xl sm:text-3xl"> Veronika Šmídová </h6> <span class="mb-6 text-grey-300"> @@ -161,11 +161,11 @@ </div> <div class="flex mr-4 person-box"> <div class="mr-7"> - <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" + <img class="rounded-full shadow-sm w-20 sm:w-40" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image"> </div> <div class="flex flex-col py-4"> - <h6 class="font-bold text-3xl"> + <h6 class="font-bold text-2xl sm:text-3xl"> Veronika Šmídová </h6> <span class="mb-6 text-grey-300"> diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js index 54c49faefd012d3cf522a4ad8c49e3facc705d22..3cad95af5667a7f3c119ee692e7fc17b6c0286af 100644 --- a/main/styleguide/tailwind.config.js +++ b/main/styleguide/tailwind.config.js @@ -30,6 +30,7 @@ module.exports = { }, // Breakpoints screens: { + 'xs': '480px', 'sm': '576px', 'md': '768px', 'lg': '992px',