No notes defined.
<div class="siteFooter">
<nav class="siteFooter-nav" data-type="sections">
<dl class="siteFooter-sections">
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Cardigan</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flannel</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Mixtape</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Dreamcatcher</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Sustainable</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Microdosing</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Raw denim</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Locavore</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Hell of letterpress</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Letterpress & Mustache</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Green juice</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Mukbang seitan</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flexitarian</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Fanny pack</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Cold-pressed</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Hashtag</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Bodega boys etsy vegan tilde vinyl small batch</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Tattooed</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Vice kinfolk</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Blackbird spyplane</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Locavore</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Flexitarian</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Dreamcatcher</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Microdosing</a>
</li>
</ul>
</dd>
</div>
</dl>
</nav>
<nav class="siteFooter-nav" data-type="channels">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a href="#" class="link is-icon-only" title="YouTube"><span class="link-label">YouTube</span><svg class="icon is-youtube-logo">
<use href="../../icons/icons-light.svg#icon--youtube-logo" xlink:href="../../icons/icons-light.svg#icon--youtube-logo"></use>
</svg>
</a>
</li>
<li class="siteFooter-nav-item">
<a href="#" class="link is-icon-only" title="LinkedIn"><span class="link-label">LinkedIn</span><svg class="icon is-linkedin-logo">
<use href="../../icons/icons-light.svg#icon--linkedin-logo" xlink:href="../../icons/icons-light.svg#icon--linkedin-logo"></use>
</svg>
</a>
</li>
</ul>
</nav>
<nav class="siteFooter-nav" data-type="legals">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Cardigan</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Letterpress & Mustache</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Hashtag</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flexitarian</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="/">PSI Software SE</a>
</li>
</ul>
</nav>
<div class="siteFooter-toplink">
<a href="#" title="Nach oben"><svg class="icon is-arrow-top">
<use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
</svg>
<span class="siteFooter-toplink-label">Nach oben</span></a>
</div>
</div>
<div class="siteFooter{{#modifier}} {{.}}{{/modifier}}">
{{#navigation}}
<nav class="siteFooter-nav" data-type="sections">
<dl class="siteFooter-sections">
{{#sections}}
<div class="siteFooter-section">
<dt class="siteFooter-section-title">{{{label}}}</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
{{#items}}
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="{{url}}">{{{label}}}</a>
</li>
{{/items}}
</ul>
</dd>
</div>
{{/sections}}
</dl>
</nav>
{{/navigation}}
{{#channels}}
<nav class="siteFooter-nav" data-type="channels">
<ul class="siteFooter-nav-list">
{{#items}}
<li class="siteFooter-nav-item"{{#type}} data-type="{{.}}"{{/type}}>
{{#link}}
{{render '@link' (contextData '@sitefooter' this) merge=true}}
{{/link}}
</li>
{{/items}}
</ul>
</nav>
{{/channels}}
{{#legals}}
<nav class="siteFooter-nav" data-type="legals">
<ul class="siteFooter-nav-list">
{{#items}}
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="{{url}}">{{{label}}}</a>
</li>
{{/items}}
</ul>
</nav>
{{/legals}}
{{#toplink}}
<div class="siteFooter-toplink">
<a href="{{url}}" title="{{label}}">{{#icon}}{{render '@icon' (contextData '@sitefooter' this) merge=true}}{{/icon}}<span class="siteFooter-toplink-label">{{{label}}}</span></a>
</div>
{{/toplink}}
</div>
{
"navigation": {
"sections": [
{
"label": "Cardigan",
"items": [
{
"label": "Flannel",
"url": "#"
},
{
"label": "Mixtape",
"url": "#"
},
{
"label": "Dreamcatcher",
"url": "#"
}
]
},
{
"label": "Sustainable",
"items": [
{
"label": "Microdosing",
"url": "#"
},
{
"label": "Raw denim",
"url": "#"
},
{
"label": "Locavore",
"url": "#"
},
{
"label": "Hell of letterpress",
"url": "#"
}
]
},
{
"label": "Letterpress & Mustache",
"items": [
{
"label": "Green juice",
"url": "#"
},
{
"label": "Mukbang seitan",
"url": "#"
},
{
"label": "Flexitarian",
"url": "#"
},
{
"label": "Fanny pack",
"url": "#"
},
{
"label": "Cold-pressed",
"url": "#"
}
]
},
{
"label": "Hashtag",
"items": [
{
"label": "Bodega boys etsy vegan tilde vinyl small batch",
"url": "#"
},
{
"label": "Tattooed",
"url": "#"
},
{
"label": "Vice kinfolk",
"url": "#"
},
{
"label": "Blackbird spyplane",
"url": "#"
},
{
"label": "Locavore",
"url": "#"
}
]
},
{
"label": "Flexitarian",
"items": [
{
"label": "Dreamcatcher",
"url": "#"
},
{
"label": "Microdosing",
"url": "#"
}
]
}
]
},
"channels": {
"items": [
{
"link": {
"label": "YouTube",
"is-icon-only": true,
"url": "#",
"icon": {
"id": "youtube-logo",
"weight": "light"
}
}
},
{
"link": {
"label": "LinkedIn",
"is-icon-only": true,
"url": "#",
"icon": {
"id": "linkedin-logo",
"weight": "light"
}
}
}
]
},
"legals": {
"items": [
{
"label": "Cardigan",
"url": "#"
},
{
"label": "Letterpress & Mustache",
"url": "#"
},
{
"label": "Hashtag",
"url": "#"
},
{
"label": "Flexitarian",
"url": "#"
},
{
"label": "PSI Software SE",
"url": "/"
}
]
},
"toplink": {
"label": "Nach oben",
"url": "#",
"icon": {
"id": "arrow-top"
}
}
}
@import "_siteFooter.settings";
@import "_siteFooter.styles";
$siteFooter_link_states: (
default: map.merge(
map.get($link-states, default),
(
text-decoration-color: transparent,
),
),
hover: map.get($link-states, hover),
focus: map.get($link-states, focus),
active: map.get($link-states, active),
) !default;
$siteFooter_icon_size: 32px !default;
$siteFooter_icons: (
linkedin: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="{{stroke-width}}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M27 4H5C4.44772 4 4 4.44772 4 5V27C4 27.5523 4.44772 28 5 28H27C27.5523 28 28 27.5523 28 27V5C28 4.44772 27.5523 4 27 4Z"/><path d="M15 14V22"/><path d="M11 14V22"/><path d="M15 17.5C15 16.5717 15.3687 15.6815 16.0251 15.0251C16.6815 14.3687 17.5717 14 18.5 14C19.4283 14 20.3185 14.3687 20.9749 15.0251C21.6313 15.6815 22 16.5717 22 17.5V22"/><circle cx="11" cy="10.5" r="0.5"/></svg>',
youtube: '<svg width="33" height="33" viewBox="0 0 33 33" fill="none" stroke="{{color}}" stroke-width="{{stroke-width}}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20.6727 16.0957L14.6727 12.0957V20.0957L20.6727 16.0957Z"/><path d="M3.6727 16.0958C3.6727 19.8346 4.05645 22.0271 4.34895 23.1546C4.4263 23.4613 4.57528 23.7452 4.78366 23.9832C4.99205 24.2211 5.25389 24.4062 5.5477 24.5233C9.7377 26.1396 16.6727 26.0958 16.6727 26.0958C16.6727 26.0958 23.6077 26.1396 27.7977 24.5233C28.0924 24.4069 28.3553 24.222 28.5646 23.9841C28.7739 23.7461 28.9236 23.4618 29.0014 23.1546C29.2939 22.0296 29.6777 19.8346 29.6777 16.0958C29.6777 12.3571 29.2939 10.1646 29.0014 9.03707C28.9245 8.72873 28.7751 8.44316 28.5658 8.20404C28.3565 7.96492 28.0932 7.77913 27.7977 7.66207C23.6077 6.05207 16.6727 6.09582 16.6727 6.09582C16.6727 6.09582 9.7377 6.05207 5.5477 7.66832C5.25224 7.78538 4.98893 7.97117 4.77959 8.21029C4.57026 8.44941 4.42092 8.73498 4.34395 9.04332C4.05645 10.1633 3.6727 12.3571 3.6727 16.0958Z"/></svg>'
) !default;
.siteFooter {
@include stack-spacing(section);
@include stack-spacing(component, (padding-top, padding-bottom));
margin-bottom: calc(-1 * var(--sp-section));
@include text-size(small);
@extend %dark-theme;
z-index: 1;
@include full-width-backdrop();
.mainContent + & {
@include stack-spacing(0);
}
&-sections {
@include stack-spacing(0);
@include grid-flowbox($max-columns: 5, $stack-spacing: var(--sp-component));
}
&-section {
&-title {
@include stack-spacing(small, margin-bottom);
font-weight: $_font-weight--bold;
padding-bottom: var(--sp-small);
&::after {
content: "";
display: block;
width: 48px;
padding-top: calc(.5 * var(--sp-small));
border-bottom: $_border-width solid $_accent-color;
}
}
&-content {
margin-left: 0;
}
&-title + &-content {
@include stack-spacing(small);
}
&-content + &-title {
@include stack-spacing(large);
}
}
&-nav {
& + & {
margin-top: var(--sp);
}
&[data-type="sections"] {
padding-bottom: var(--sp-component);
border-bottom: $_border;
}
&-list {
list-style: none;
margin-top: 0;
padding-left: 0;
display: flex;
flex-wrap: wrap;
column-gap: 3ch;
row-gap: var(--sp-small);
}
&-link {
@include state-styles($siteFooter_link_states);
@include action-states($siteFooter_link_states);
}
.link.is-icon-only {
width: $siteFooter_icon_size;
height: $siteFooter_icon_size;
.icon {
width: inherit;
height: inherit;
}
&:hover {
color: $_action-text-decoration-color--hover;
}
&:active {
color: $_action-text-decoration-color--active;
}
}
}
&-section-content &-nav-list {
flex-direction: column;
row-gap: var(--sp-small);
}
&-toplink {
$offset: 5px;
position: absolute;
bottom: 100%;
right: 0;
z-index: -1;
a {
@extend %button--icon-only;
font-size: $button_font-size;
display: block;
@include box-padding(small);
padding: nth($button_padding, 1);
border-radius: var(--br-small) var(--br-small) 0 0 !important;
background: var(--background-color);
border-bottom: (2 * $offset) solid var(--background-color);
color: inherit;
position: relative;
transform: translateY(2 * $offset);
transition: $_transition-duration--in easing();
&:hover {
transform: translateY($offset);
}
.icon {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0;
transition: inherit;
transition-timing-function: easing(quint)
}
&:hover .icon {
margin-top: -2px;
}
}
&-label {
@extend %visually-hidden;
}
}
@include only-on-mobile(){
&-sections {
$min-width: get-flowbox-item-min-width(
$max-columns: 2,
$grid_min-width: 360px - px(2 * $_page_padding--mobile, $_font-size--mobile),
$gutter: px($_grid_gutter--mobile, $_font-size--mobile)
);
grid-template-columns: repeat(auto-fill, minmax(min(100%, $min-width), 1fr));
}
}
@include only-on-desktop(){
display: grid;
grid-template-areas:
"sections sections"
"channels legals";
column-gap: var(--gg);
$types: sections, channels, legals;
&-nav {
@each $type in $types {
&[data-type="#{$type}"] {
grid-area: $type;
}
}
&[data-type="legals"] {
justify-self: end;
}
}
}
}