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

Restyle most of footer

parent 48b2b575
No related branches found
No related tags found
No related merge requests found
Pipeline #776 passed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
source/_patterns/02-organisms/00-global/footer.mustache
+ 86
− 103
View file @ ca964226
<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"> <img
<div class="grid grid-cols-12"> src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
<div class="md:col-span-3 col-span-12 footer-copy"> alt=""
<img class="footer-brand w-32 md:w-40 pb-6"
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg" />
alt="" <p class="para hidden md:block md:mb-4 lg:mb-0">
class="footer-brand w-32 md:w-40 pb-6" Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
/> ostatní sdílet za stejných podmínek.
<p class="para hidden md:block"> </p>
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte </section>
ostatní sdílet za stejných podmínek. <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
</p> <div class="pt-8 pb-4 lg:py-0">
</div> <span class="text-xl uppercase text-white">Nová sekce</span>
<div class="md:col-span-2 col-span-12"> <ul class="mt-6 space-y-2">
<span class="text-xl uppercase text-white">Nová sekce</span> <li>
<ul class="mt-6"> <a href="#">Lorem ipsum</a>
<li class="mb-2"> </li>
<a href="#">Lorem ipsum</a> <li>
</li> <a href="#">Lorem ipsum</a>
<li class="mb-2"> </li>
<a href="#">Lorem ipsum</a> <li>
</li> <a href="#">Lorem ipsum</a>
<li class="mb-2"> </li>
<a href="#">Lorem ipsum</a> </ul>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-6">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-6">
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-3 col-span-12 footer-social mb-6 md:mb-0">
<div class="mb-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") }}
</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: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div>
</div>
</div> </div>
</div> <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
</section> <span class="text-xl uppercase text-white">Nová sekce</span>
<hr class="hr--unstyled footer-splitter" /> <ul class="mt-6 space-y-2">
<section class="footer-section footer-section--dense bg-grey-700"> <li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<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>
<ul class="mt-6 space-y-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
</section>
<section class="footer__social lg:text-right">
<div class="mb-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") }}
</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: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</section>
</div>
<section class="footer__sub-links lg:border-t border-grey-400">
<div class="container container--default"> <div class="container container--default">
<div class="grid grid-cols-12 justify-content-left"> <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">
<div class="md:col-span-3 col-span-12"> <span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span>
<span class="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">
</div> <li>
<div class="lg:col-span-2 md:col-span-3 col-span-12"> <a href="#">Transparentní účet</a>
<ul> </li>
<li> <li>
<a href="#">Transparentní účet</a> <a href="#">Registr smluv</a>
</li> </li>
</ul> <li>
</div> <a href="#">Otevřené účetnictví</a>
<div class="lg:col-span-2 md:col-span-3 col-span-12"> </li>
<ul> </ul>
<li>
<a href="#">Registr smluv</a>
</li>
</ul>
</div>
<div class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
<li>
<a href="#">Otevřené účetnictví</a>
</li>
</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>
......
source/css/organisms/footer.pcss
+ 26
− 13
View file @ ca964226
.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 lg {
.footer__main {
@apply gap-4;
@screen xl { grid-template-areas: "brand main-links social";
@apply col-span-3; grid-template-columns: 25% 1fr 25%;
} }
} }
source/dist/style.pkgd.css
+ 1
− 1
View file @ ca964226
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft