<div id="hero" class="c-hero c-hero--base pt-8 lg:pt-15 bgi-gradient-lilac">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto py-16 lg:py-18">
<ul class="list-reset flex justify-center mb-4 z-20 relative -mt-4">
<li class="mx-1" data-animate>
<a href="" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</li>
<li class="mx-1" data-animate>
<a href="" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Food</span></a>
</li>
<li class="mx-1" data-animate>
<a href="" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Gifts</span></a>
</li>
</ul>
<h1 class="text-xl lg:text-2xl leading-2xl text-black-50 text-center font-thin mb-4 w-10/12 m-auto" data-animate>
</h1>
<time data-animate class="font-light text-center text-black-20 block tracking-wide text-sm -mb-4"></time>
</div>
</div>
</div>
<div id="hero" class="c-hero c-hero--base pt-8 lg:pt-15 bgi-gradient-lilac">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto py-16 lg:py-18">
<ul class="list-reset flex justify-center mb-4 z-20 relative -mt-4">
{% for tag in tags %}
<li class="mx-1" data-animate>
{% include '@tags--sm' with { text: tag.text } %}
</li>
{% endfor %}
</ul>
<h1 class="text-xl lg:text-2xl leading-2xl text-black-50 text-center font-thin mb-4 w-10/12 m-auto" data-animate>
{{ heading }}
</h1>
<time data-animate class="font-light text-center text-black-20 block tracking-wide text-sm -mb-4">{{ date }}</time>
</div>
</div>
</div>
{
"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"
}
],
"target": "#page",
"image": {
"url": "/dist/images/asta-valentaite-5885cab3a8aa3.jpg",
"alt": null,
"width": null,
"height": null
},
"tags": [
{
"text": "Lifestyle"
},
{
"text": "Food"
},
{
"text": "Gifts"
}
]
}
.c-hero__icon {
.o-icon {
transform: translate3d(0, 50%, 0);
}
}
.c-hero--home {
@include mq($from: breakpoint('lg')) {
margin-bottom: rem(200px);
}
}
.c-hero__img {
transform: translate3d(0, rem(60px), 0);
@include mq($from: breakpoint('lg')) {
transform: translate3d(0, rem(120px), 0);
}
}
.c-hero {
//aspect-ratio: '1:1';
@include mq($from: breakpoint('md')) {
&::before {
display: none;
}
& > div {
position: relative;
}
}
}
.c-hero__inner {
@include mq($from: breakpoint('md')) {
padding-top: rem(100px);
padding-bottom: rem(100px);
}
}
.c-hero--tags {
min-height: rem(300px);
[data-accordion-btn].is-active {
@apply .text-white;
}
}
[id='tags'] {
li {
opacity: 0;
transform: translate3d(0, rem(10px), 0);
transition: opacity 300ms 100ms ease, transform 300ms 100ms ease;
@include mq($from: breakpoint('lg')) {
opacity: 1;
transform: none;
}
}
&.is-expanded {
li {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 0ms;
}
}
}
There are no notes for this item.