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
Pipeline #776 passed
Stage: build
Show 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">
<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">
<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>
</div>
<div class="md:col-span-2 col-span-12">
</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">
<li class="mb-2">
<ul class="mt-6 space-y-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</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>
<ul class="mt-6">
<li class="mb-2">
<ul class="mt-6 space-y-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</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>
<ul class="mt-6">
<li class="mb-2">
<ul class="mt-6 space-y-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li class="mb-2">
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</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">
{{> 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>
</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 class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
<section class="footer__sub-links lg:border-t border-grey-400">
<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>
<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>
</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 xl {
@apply col-span-3;
@screen lg {
.footer__main {
@apply gap-4;
grid-template-areas: "brand main-links social";
grid-template-columns: 25% 1fr 25%;
}
}
source/dist/style.pkgd.css
+ 1
− 1
View file @ ca964226
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft