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">
<section class="footer-section bg-grey-700">
<div class="top">
<div class="container container--default">
<div class="grid grid-cols-12">
<div class="md:col-span-3 col-span-12 footer-copy">
<img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt=""
class="footer-brand w-32 md:w-40 pb-6"
/>
<p class="para hidden md:block">
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
ostatní sdílet za stejných podmínek.
</p>
</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-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>
<footer class="footer bg-grey-700 text-white">
<div class="footer__main py-4 lg:py-8 container container--default">
<section class="footer__brand">
<img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt=""
class="footer-brand w-32 md:w-40 pb-6"
/>
<p class="para hidden md:block md:mb-4 lg:mb-0">
Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
ostatní sdílet za stejných podmínek.
</p>
</section>
<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>
<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>
</div>
</section>
<hr class="hr--unstyled footer-splitter" />
<section class="footer-section footer-section--dense bg-grey-700">
<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>
<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>
<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="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 class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
<li>
<a href="#">Transparentní účet</a>
</li>
</ul>
</div>
<div class="lg:col-span-2 md:col-span-3 col-span-12">
<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 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>
<a href="#">Transparentní účet</a>
</li>
<li>
<a href="#">Registr smluv</a>
</li>
<li>
<a href="#">Otevřené účetnictví</a>
</li>
</ul>
</div>
</div>
</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="footer-contacts">
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
{{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
<div class="mt-8 lg:mt-0 lg:text-right footer-contacts__item">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }}
<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(hideOccupation: true) }}
<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 lg:btn--autowidth text-lg btn--fading") }}
</div>
</div>
</div>
......
source/css/organisms/footer.pcss
+ 26
− 13
View file @ ca964226
.footer {
/* .footer {
@apply text-grey-200;
}
.footer-section {
@apply py-6;
@apply py-4;
@screen md {
@apply py-12;
......@@ -22,7 +22,7 @@
@apply pr-16;
order: -2;
@screen sm {
@screen lg {
order: 0;
}
}
......@@ -30,24 +30,37 @@
.footer-social {
order: -1;
@screen sm {
@screen lg {
@apply text-right;
order: 1;
}
} */
.footer__main {
@apply grid;
grid-template-areas: "brand"
"social"
"main-links"
}
.footer-contacts {
@apply grid grid-cols-12 gap-4;
.footer__brand {
grid-area: brand;
}
.footer-contacts .footer-contacts__item {
@apply col-span-12 text-white;
.footer__social {
grid-area: social;
}
@screen lg {
@apply col-span-6;
}
.footer__main-links {
grid-area: main-links;
}
@screen lg {
.footer__main {
@apply gap-4;
@screen xl {
@apply col-span-3;
grid-template-areas: "brand main-links social";
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