Skip to content
Snippets Groups Projects
Commit ca964226 authored by xaralis's avatar xaralis
Browse files

Restyle most of footer

parent 48b2b575
Branches
Tags
No related merge requests found
<footer class="footer"> <footer class="footer bg-grey-700 text-white">
<section class="footer-section bg-grey-700"> <div class="footer__main py-4 lg:py-8 container container--default">
<div class="top"> <section class="footer__brand">
<div class="container container--default">
<div class="grid grid-cols-12">
<div class="md:col-span-3 col-span-12 footer-copy">
<img <img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg" src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt="" alt=""
class="footer-brand w-32 md:w-40 pb-6" class="footer-brand w-32 md:w-40 pb-6"
/> />
<p class="para hidden md:block"> <p class="para hidden md:block md:mb-4 lg:mb-0">
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
ostatní sdílet za stejných podmínek. ostatní sdílet za stejných podmínek.
</p> </p>
</div> </section>
<div class="md:col-span-2 col-span-12"> <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
<div class="pt-8 pb-4 lg:py-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-6"> <ul class="mt-6 space-y-2">
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-2 col-span-12"> <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-6"> <ul class="mt-6 space-y-2">
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-2 col-span-12"> <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-6"> <ul class="mt-6 space-y-2">
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="mb-2"> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-3 col-span-12 footer-social mb-6 md:mb-0"> </section>
<section class="footer__social lg:text-right">
<div class="mb-4"> <div class="mb-4">
{{> molecules-basic-social-icon-group(classes: "text-white pb-4") }} {{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div> </div>
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth mb-2") }} {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth mb-2") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }} {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div>
</div>
</div>
</div>
</section> </section>
<hr class="hr--unstyled footer-splitter" />
<section class="footer-section footer-section--dense bg-grey-700">
<div class="container container--default">
<div class="grid grid-cols-12 justify-content-left">
<div class="md:col-span-3 col-span-12">
<span class="text-xl uppercase text-white">Otevřenost</span>
</div> </div>
<div class="lg:col-span-2 md:col-span-3 col-span-12"> <section class="footer__sub-links lg:border-t border-grey-400">
<ul> <div class="container container--default">
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0">
<span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span>
<ul class="lg:w-2/4 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0">
<li> <li>
<a href="#">Transparentní účet</a> <a href="#">Transparentní účet</a>
</li> </li>
</ul>
</div>
<div class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
<li> <li>
<a href="#">Registr smluv</a> <a href="#">Registr smluv</a>
</li> </li>
</ul>
</div>
<div class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
<li> <li>
<a href="#">Otevřené účetnictví</a> <a href="#">Otevřené účetnictví</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
</section> </section>
<section class="footer-section bg-black"> <section class="footer-section bg-black py-4 md:py-8">
<div class="container container--default"> <div class="container container--default">
<div class="footer-contacts"> <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
<div class="mt-8 lg:mt-0 lg:text-right footer-contacts__item"> <div class="lg:col-span-3 xl:col-span-1 lg:mt-0 lg:text-center xl:text-right">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }} {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth lg:btn--autowidth text-lg btn--fading") }}
</div> </div>
</div> </div>
</div> </div>
......
.footer { /* .footer {
@apply text-grey-200; @apply text-grey-200;
} }
.footer-section { .footer-section {
@apply py-6; @apply py-4;
@screen md { @screen md {
@apply py-12; @apply py-12;
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
@apply pr-16; @apply pr-16;
order: -2; order: -2;
@screen sm { @screen lg {
order: 0; order: 0;
} }
} }
...@@ -30,24 +30,37 @@ ...@@ -30,24 +30,37 @@
.footer-social { .footer-social {
order: -1; order: -1;
@screen sm { @screen lg {
@apply text-right; @apply text-right;
order: 1; order: 1;
} }
} */
.footer__main {
@apply grid;
grid-template-areas: "brand"
"social"
"main-links"
} }
.footer-contacts { .footer__brand {
@apply grid grid-cols-12 gap-4; grid-area: brand;
} }
.footer-contacts .footer-contacts__item { .footer__social {
@apply col-span-12 text-white; grid-area: social;
}
@screen lg { .footer__main-links {
@apply col-span-6; grid-area: main-links;
} }
@screen xl { @screen lg {
@apply col-span-3; .footer__main {
@apply gap-4;
grid-template-areas: "brand main-links social";
grid-template-columns: 25% 1fr 25%;
} }
} }
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment