<header class="c-header flex items-center z-50 absolute pin-l pin-r pin-t " data-bg-item data-behaviour="Header">
<div class="wrapper w-full flex justify-between items-center">
<a href="/" class="c-header__logo leading-none inline-flex items-center justify-center text-white z-20 lg:text-blush">
<span class="u-vh">Asta Valentaite</span>
<svg id="logo-svg" viewBox="0 0 200 27.95" preserveAspectRatio midXmidY class="fill-current c-header__logo overflow-visible">
<title>Asta Valentaite</title>
<path class="logo-part" id="a1" d="M25.24 22.51L16.36 0h-1.6L6.68 21.29a11.77 11.77 0 0 1-2.6 4.28A7.41 7.41 0 0 1 0 28h10.39s-4.09-.48-4.09-4a6.58 6.58 0 0 1 .33-1.83l5.73-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76h14.57c-2.06-.31-3.71-2.02-5.13-5.45z" />
<path class="logo-part" id="s1" d="M74.9 11.07c-3.75-2-6.48-3.3-6.48-6.47A4.47 4.47 0 0 1 70 1.12a5.58 5.58 0 0 1 4.52-.61 7.29 7.29 0 0 1 4 2.38 6.3 6.3 0 0 1 1 1.61.21.21 0 0 0 .19.13.21.21 0 0 0 .21-.21.22.22 0 0 0 0-.06 6.7 6.7 0 0 0-3-3.32C73-1 67 .19 64.44 3.77a6.85 6.85 0 0 0-1.23 4c0 4.29 3.53 6.64 7.1 8.59 4 2.13 6.35 3.51 6.35 6.33a4.73 4.73 0 0 1-3.14 4.68A9.46 9.46 0 0 1 67 26.22a7 7 0 0 1-2-1.81 8.63 8.63 0 0 1-1.56-4.68.23.23 0 1 0-.46 0 9.1 9.1 0 0 0 1.65 4.94c2.7 3.65 7.94 3.93 11.91 2.44A7.84 7.84 0 0 0 82 19.66c0-4.73-3.49-6.55-7.1-8.59z" />
<path class="logo-part" id="t1" d="M130.83 0h-15.1v5.26l.41-.55c.43-.59 2.85-3.79 5-4.23h.24c1.06-.11 2.16-.11 3.22-.12h1.55V24.41a4.7 4.7 0 0 1-.63 2.86l-.4.66h6.77l-.4-.66a4.7 4.7 0 0 1-.64-2.86V.3h1.55c1.06 0 2.16 0 3.22.12 2.69.29 4.14 2.87 5.61 4.82V0z" />
<path class="logo-part" id="logo-a2" d="M194.87 22.51L186 0h-1.61l-8.08 21.29a11.63 11.63 0 0 1-2.6 4.28 7.41 7.41 0 0 1-4.08 2.43H180s-4.1-.43-4.1-3.92a6.24 6.24 0 0 1 .34-1.83l5.72-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76H200c-2-.39-3.7-2.1-5.13-5.53z" />
</svg>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block absolute z-20 c-nav__btn lg:hidden">
<span class="u-vh">Open Menu</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav data-behaviour="MobileMenu" id="site-menu" class="invisible lg:visible z-10 c-nav fixed lg:relative pin-t pin-l w-full lg:w-auto h-screen lg:h-auto" role="navigation" aria-label="Main menu">
<div id="site-menu-inner" class="w-full p-6 pb-12 flex flex-col items-center bg-black lg:flex-row lg:bg-transparent lg:p-0 lg:justify-end">
<div class="c-nav__logo opacity-0 lg:hidden">
<i class="icon icon--ui-logo-a">
<svg>
<use class="no-barba" xlink:href="#ui-logo-a"></use>
</svg>
</i>
</div>
<ul class="c-nav__list list-reset lg:flex relative mt-8 pt-8 mb-6 text-body lg:m-0 lg:p-0">
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/about">About</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Fashion</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/post">Beauty</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/vertical">Lifestyle</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/collaborations">Collaborations</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Press</a>
</li>
</ul>
<div class="hidden lg:flex items-center lg:ml-4">
<a data-text-item data-transition-item href="#0" class="block text-white mr-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Instagram</span>
<i class="icon icon--ui-instagram">
<svg>
<use class="no-barba" xlink:href="#ui-instagram"></use>
</svg>
</i>
</a>
<a data-text-item data-transition-item href="#0" class="block text-white ml-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Twitter</span>
<i class="icon icon--ui-twitter">
<svg>
<use class="no-barba" xlink:href="#ui-twitter"></use>
</svg>
</i>
</a>
</div>
</div>
</nav>
</div>
</header>
{% import '@helpers' as h %}
<header class="c-header flex items-center z-50 absolute pin-l pin-r pin-t " data-bg-item data-behaviour="Header">
<div class="wrapper w-full flex justify-between items-center">
<a href="/" class="c-header__logo leading-none inline-flex items-center justify-center text-white z-20 lg:text-blush">
<span class="u-vh">{{ siteTitle }}</span>
<svg id="logo-svg" viewBox="0 0 200 27.95" preserveAspectRatio midXmidY class="fill-current c-header__logo overflow-visible">
<title>{{ siteTitle }}</title>
<path class="logo-part" id="a1" d="M25.24 22.51L16.36 0h-1.6L6.68 21.29a11.77 11.77 0 0 1-2.6 4.28A7.41 7.41 0 0 1 0 28h10.39s-4.09-.48-4.09-4a6.58 6.58 0 0 1 .33-1.83l5.73-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76h14.57c-2.06-.31-3.71-2.02-5.13-5.45z" />
<path class="logo-part" id="s1" d="M74.9 11.07c-3.75-2-6.48-3.3-6.48-6.47A4.47 4.47 0 0 1 70 1.12a5.58 5.58 0 0 1 4.52-.61 7.29 7.29 0 0 1 4 2.38 6.3 6.3 0 0 1 1 1.61.21.21 0 0 0 .19.13.21.21 0 0 0 .21-.21.22.22 0 0 0 0-.06 6.7 6.7 0 0 0-3-3.32C73-1 67 .19 64.44 3.77a6.85 6.85 0 0 0-1.23 4c0 4.29 3.53 6.64 7.1 8.59 4 2.13 6.35 3.51 6.35 6.33a4.73 4.73 0 0 1-3.14 4.68A9.46 9.46 0 0 1 67 26.22a7 7 0 0 1-2-1.81 8.63 8.63 0 0 1-1.56-4.68.23.23 0 1 0-.46 0 9.1 9.1 0 0 0 1.65 4.94c2.7 3.65 7.94 3.93 11.91 2.44A7.84 7.84 0 0 0 82 19.66c0-4.73-3.49-6.55-7.1-8.59z" />
<path class="logo-part" id="t1" d="M130.83 0h-15.1v5.26l.41-.55c.43-.59 2.85-3.79 5-4.23h.24c1.06-.11 2.16-.11 3.22-.12h1.55V24.41a4.7 4.7 0 0 1-.63 2.86l-.4.66h6.77l-.4-.66a4.7 4.7 0 0 1-.64-2.86V.3h1.55c1.06 0 2.16 0 3.22.12 2.69.29 4.14 2.87 5.61 4.82V0z" />
<path class="logo-part" id="logo-a2" d="M194.87 22.51L186 0h-1.61l-8.08 21.29a11.63 11.63 0 0 1-2.6 4.28 7.41 7.41 0 0 1-4.08 2.43H180s-4.1-.43-4.1-3.92a6.24 6.24 0 0 1 .34-1.83l5.72-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76H200c-2-.39-3.7-2.1-5.13-5.53z" />
</svg>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block absolute z-20 c-nav__btn lg:hidden">
<span class="u-vh">{{ text|default('Open Menu') }}</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav data-behaviour="MobileMenu" id="site-menu" class="invisible lg:visible z-10 c-nav fixed lg:relative pin-t pin-l w-full lg:w-auto h-screen lg:h-auto" role="navigation" aria-label="Main menu">
<div id="site-menu-inner" class="w-full p-6 pb-12 flex flex-col items-center bg-black lg:flex-row lg:bg-transparent lg:p-0 lg:justify-end">
<div class="c-nav__logo opacity-0 lg:hidden">
{{ h.symbol('ui-logo-a') }}
</div>
<ul class="c-nav__list list-reset lg:flex relative mt-8 pt-8 mb-6 text-body lg:m-0 lg:p-0">
{% for entry in sitemenu %}
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="{{ entry.slug }}">{{ entry.title }}</a>
</li>
{% endfor %}
</ul>
<div class="hidden lg:flex items-center lg:ml-4">
<a data-text-item data-transition-item href="{{ instagramUrl }}" class="block text-white mr-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Instagram</span>
{{ h.symbol('ui-instagram') }}
</a>
<a data-text-item data-transition-item href="{{ twitterUrl }}" class="block text-white ml-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Twitter</span>
{{ h.symbol('ui-twitter') }}
</a>
</div>
</div>
</nav>
</div>
</header>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"instagramUrl": "#0",
"twitterUrl": "#0"
}
.c-nav__btn {
top: 0;
bottom: 0;
margin: auto;
right: gutter(0.75);
}
.c-header__logo {
transition: transform 300ms ease;
}
.logo-part {
transition: opacity 300ms 150ms ease-in-out, transform 300ms 150ms ease-in-out;
&:nth-of-type(2) {
transition-delay: 100ms;
}
&:nth-of-type(3) {
transition-delay: 50ms;
}
&:nth-of-type(4) {
transition-delay: 0ms;
}
}
[id='logo-svg'] {
width: rem(130px);
overflow: visible !important;
@include mq($from: breakpoint('md')) {
width: rem(220px);
}
&.is-menu-open {
.logo-part {
opacity: 0;
transform: translate3d(0, rem(5px), 0);
}
.logo-part {
transition-delay: 150ms;
&:nth-of-type(2) {
transition-delay: 200ms;
}
&:nth-of-type(3) {
transition-delay: 260ms;
}
&:nth-of-type(4) {
transition-delay: 320ms;
}
}
}
}
[id='site-menu'] {
pointer-events: none;
opacity: 0;
transition: opacity 300ms ease, transform 300ms ease, visibility 0ms 300ms;
transform: translate3d(0, rem(-5px), 0);
background: rgba(0, 0, 0, 0.05);
&.is-visible {
pointer-events: auto;
opacity: 1;
visibility: visible;
transition-delay: 0ms;
transform: translate3d(0, 0, 0);
.c-nav__logo {
@apply .text-blush;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.c-nav__item {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.c-nav__list {
&::before {
transform: scale(1, 1);
}
}
}
@include mq($from: breakpoint('lg')) {
opacity: 1;
transform: none;
transition: none;
pointer-events: auto;
visibility: visible;
position: static;
height: auto;
background: none;
}
}
.c-nav__logo {
transform: translate3d(0, rem(5px), 0);
transition: opacity 300ms 750ms ease, transform 160ms 750ms ease,
color 550ms 750ms ease;
color: $white;
opacity: 0;
.icon--ui-logo-a {
width: rem(60px);
}
}
.c-nav__item {
&:last-child {
margin-bottom: 0;
}
}
.c-nav__social {
transition: opacity 300ms ease;
&:hover {
opacity: 0.5;
}
.icon {
width: rem(20px);
}
}
.c-nav__item {
opacity: 0;
transition: opacity 300ms 250ms ease, transform 300ms 250ms ease;
transform: translate3d(0, rem(5px), 0) scale(0.95);
@include mq($from: breakpoint('lg')) {
opacity: 1;
transform: none;
}
}
.c-nav__list {
&::before {
@apply .absolute .pin-t .pin-l .w-full .h-px .bg-white-15 .block;
transform: scale(0, 1);
transition: transform 150ms 500ms ease;
content: ' ';
@include mq($from: breakpoint('lg')) {
display: none;
}
}
}
@include mq($from: breakpoint('lg')) {
.c-nav__item {
position: relative;
&::after {
@apply .w-full .h-px .bg-blush .block .absolute .pin-b;
left: 0;
transform: scale(0, 1);
transition: transform 300ms ease;
content: ' ';
}
&.is-current,
&:hover {
&::after {
transform: scale(1, 1);
}
}
}
}
[data-theme='float-header'] {
.c-header {
@apply .bg-transparent .absolute .pin-t .pin-l .w-full;
}
.o-burger__slice {
@apply .bg-white;
}
.c-header__logo {
@apply .text-white;
}
@include mq($from: breakpoint('lg')) {
.c-nav__item {
&::after {
@apply .bg-white;
}
}
}
// .c-hero {
// padding-top: rem(80px);
// }
[data-text-item] {
@apply .text-white;
}
}
.has-hero {
[id='barba-wrapper'] {
margin-top: rem(80px);
}
}
[data-theme='static-header'] {
.c-header {
@apply .bg-transparent .absolute .pin-t .pin-l .w-full;
}
.o-burger__slice {
@apply .bg-blush;
}
.c-header__logo {
@apply .text-blush;
}
// .c-hero {
// padding-top: rem(80px);
// }
[data-text-item] {
@apply .text-black-50;
}
}
.c-header {
height: rem(110px);
will-change: height;
transition: transform 300ms ease, background-color 300ms ease,
height 300ms ease;
&.is-sticky {
transform: translate3d(0, 0, 0);
width: 100%;
top: 0;
left: 0;
}
&.is-scrolling {
height: rem(70px);
position: fixed;
.o-burger__slice {
@apply .bg-white;
}
.c-header__logo {
@apply .text-white;
@include mq($from: breakpoint('lg')) {
transform: scale(0.75);
}
}
// .c-hero {
// padding-top: rem(80px);
// }
[data-text-item] {
@apply .text-white;
}
.c-nav__item::after {
background-color: $white;
}
}
&.is-out-of-view {
transform: translate3d(0, -100%, 0);
}
&.is-in-view {
transform: translate3d(0, 0%, 0);
@apply .bg-blush;
}
&.is-no-transition {
transition: none;
}
}
There are no notes for this item.