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

Basic responsive navbar

parent a3cb2e34
Branches
Tags
No related merge requests found
Pipeline #735 passed
Showing
with 143 additions and 18 deletions
<a href="mailto:example@example.com" class="contact-line contact-line--responsive {{ classes }}">
<i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
</a>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="badge__body"> <div class="badge__body">
<span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span> <span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
<p class="badge__occupation">{{ person.occupation }}</p> <p class="badge__occupation">{{ person.occupation }}</p>
{{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }} {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }} {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div> </div>
</div> </div>
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
{{> atoms-basic-avatar(classes: "avatar--sm") }} {{> atoms-basic-avatar(classes: "avatar--sm") }}
<div class="badge__body"> <div class="badge__body">
<span class="head-xs badge__title">Mikuláš Peksa</span> <span class="head-xs badge__title">Mikuláš Peksa</span>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }} {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div> </div>
</div> </div>
<div class="social-icon-group space-x-1 {{ classes }}"> <div class="social-icon-group space-x-1 {{ classes }}">
{{> atoms-basic-social-icon }} {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
{{> atoms-basic-social-icon }} {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
{{> atoms-basic-social-icon }} {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
{{> atoms-basic-social-icon }} {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
{{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
</div> </div>
...@@ -58,13 +58,7 @@ ...@@ -58,13 +58,7 @@
</div> </div>
<div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0"> <div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
<div class="mb-2"> <div class="mb-2">
<div class="social-icon-group space-x-1 text-white pb-2"> {{> molecules-basic-social-icon-group(classes: "text-white pb-2") }}
{{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
{{> atoms-basic-social-icon(icon: "fas fa-rss") }}
{{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
{{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
{{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
</div>
{{> 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 md:btn--autowidth mb-1") }} {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth md:btn--autowidth mb-1") }}
......
<nav class="navbar">
<div class="container container--wide navbar__content">
<div class="navbar__brand my-2 lg:pr-4 lg:my-0">
<a href="#">
<img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-4" />
</a>
</div>
<div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-4">
<div class="text-grey-200 text-sm lg:space-x-4 leading-loose lg:leading-normal">
{{> atoms-basic-contact-line(caption: "pirati.cz", icon: "fas fa-home", classes: "block lg:inline-block") }}
{{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "fas fa-shopping-cart", classes: "block lg:inline-block") }}
{{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "fas fa-newspaper", classes: "block lg:inline-block") }}
</div>
{{> molecules-basic-social-icon-group(classes: "text-white py-2 lg:py-0") }}
</div>
<div class="navbar__main navbar__section navbar__section--expandable">
<ul class="navbar-menu text-white">
<li class="navbar-menu__item"><a href="#">Hlavní strana</a></li>
<li class="navbar-menu__item"><a href="#">Aktuality</a></li>
<li class="navbar-menu__item"><a href="#">Volby</a></li>
<li class="navbar-menu__item"><a href="#">Kandidáti</a></li>
<li class="navbar-menu__item"><a href="#">Pirátské centrum</a></li>
<li class="navbar-menu__item"><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="navbar__actions navbar__section navbar__section--expandable flex flex-col sm:flex-row lg:flex-col sm:space-x-2 space-y-1 sm:space-y-0 lg:space-y-1 xl:flex-row xl:space-x-1 xl:space-y-0">
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
</div>
<div class="navbar__menutoggle my-2 flex justify-end lg:hidden">
<a href="#">
<img src="/images/menu-toggle.svg" class="w-4" />
</a>
</div>
</div>
</nav>
{{> organisms-navbar() }}
{{> organisms-subnav() }} {{> organisms-subnav() }}
<article class="hero hero--image py-7 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})"> <article class="hero hero--image py-7 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
......
.contact-line { .contact-line {
i { i {
@apply mr-1 hidden; @apply mr-1;
}
&.contanct-line--responsive {
i {
@apply hidden;
@screen lg { @screen lg {
@apply inline-block; @apply inline-block;
} }
} }
} }
}
.navbar {
/* overflow-hidden compensates .navbar__section--expandable */
@apply bg-grey-700 text-white overflow-hidden;
}
.navbar__content {
@apply grid items-center;
grid-template-areas: "brand menutoggle"
"main main"
"external external"
"actions actions";
grid-template-columns: 2rem 1fr;
}
.navbar__brand {
grid-area: brand;
}
.navbar__external {
grid-area: external;
}
.navbar__main {
grid-area: main;
}
.navbar__actions {
grid-area: actions;
}
.navbar__menutoggle {
grid-area: menutoggle;
}
.navbar__section--expandable {
@apply bg-black px-4 py-2;
margin: 0 -2rem;
}
.navbar-menu__item {
@apply text-xl font-condensed uppercase leading-loose;
@screen lg {
@apply text-lg;
}
@screen xl {
@apply text-xl;
}
}
@screen lg {
.navbar {
@apply py-4;
}
.navbar__content {
grid-template-areas: "brand external actions"
"brand main actions";
grid-template-columns: 8rem 1fr auto;
}
.navbar__section--expandable {
@apply bg-transparent px-0 py-0 m-0;
}
.navbar-menu__item {
@apply inline-block leading-normal;
&:not(:first-child) {
@apply ml-3;
}
}
}
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
@import "./organisms/candidate-table.pcss"; @import "./organisms/candidate-table.pcss";
@import "./organisms/footer.pcss"; @import "./organisms/footer.pcss";
@import "./organisms/hero.pcss"; @import "./organisms/hero.pcss";
@import "./organisms/navbar.pcss";
@import "./organisms/subnav.pcss"; @import "./organisms/subnav.pcss";
/** /**
......
Source diff could not be displayed: it is too large. Options to address this: view the blob.
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="30" viewBox="0 0 42 30">
<g id="Group_27" data-name="Group 27" transform="translate(-677 -34)">
<rect id="Rectangle_30" data-name="Rectangle 30" width="42" height="6" transform="translate(677 34)" fill="#fff"/>
<rect id="Rectangle_32" data-name="Rectangle 32" width="42" height="6" transform="translate(677 46)" fill="#fff"/>
<rect id="Rectangle_34" data-name="Rectangle 34" width="42" height="6" transform="translate(677 58)" fill="#fff"/>
</g>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment