No notes defined.
<div id="siteHeader" class="siteHeader is-simple" data-menu>
<div class="siteHeader-skip">
<a href="#siteHeader-end">Direkt zum Inhalt</a>
</div>
<div class="siteHeader-home">
<a class="siteHeader-home-link" href="https://psi.de">
<div class="logo">
<img src="../../images/logo/logo.png" alt="" />
</div>
</a>
<div class="siteHeader-title">
<a href="#" title="">Title of the Landing Page</a>
</div>
</div>
<div class="siteHeader-ctas">
<a href="#" class="button is-secondary"><span class="button-label">Secondary Action</span></a>
<a href="#" class="button" data-icon-position="right"><svg class="icon is-download-simple">
<use href="../../icons/icons.svg#icon--download-simple" xlink:href="../../icons/icons.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Primary Action</span></a>
</div>
</div>
<div class="siteHeader-spacer"></div>
<div id="siteHeader-end"></div>
<main class="mainContent">
<div class="pageSection">
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</main>
<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>
{{render '@simplesiteheader' (contextData '@simplesiteheader' this) merge=true}}
<main class="mainContent">
<div class="pageSection">
{{render '@richtextblock' (contextData '@simplesiteheader' this) merge=true}}
{{render '@richtextblock' (contextData '@simplesiteheader' this) merge=true}}
{{render '@richtextblock' (contextData '@simplesiteheader' this) merge=true}}
</div>
</main>
{{render '@sitefooter' (contextData '@simplesiteheader' this) merge=true}}
{
"id": "siteHeader",
"skip": {
"label": "Direkt zum Inhalt",
"id": "siteHeader-end"
},
"home": {
"logo": {},
"url": "https://psi.de"
},
"title": {
"content": "Title of the Landing Page",
"url": "#"
},
"ctas": [
{
"modifier": "is-secondary",
"label": "Secondary Action",
"url": "#"
},
{
"label": "Primary Action",
"url": "#",
"icon": {
"id": "download-simple",
"position": "right"
}
}
]
}
@import "_simpleSiteHeader.settings";
@import "_simpleSiteHeader.styles";
$simpleSiteHeader_styles: (
font-family: monospace,
background-color: lightgray,
) !default;
.siteHeader.is-simple {
.siteHeader {
&-home {
display: flex;
column-gap: 1.5em;
align-items: baseline;
overflow: hidden;
min-width: 0;
font-family: $_font-family--secondary;
.logo {
flex-shrink: 0
}
}
&-title {
height: 0;
min-height: 0;
position: relative;
top: -4px;
flex: 1 1;
min-width: 0;
width: 100%;
a {
position: static;
width: fit-content;
max-width: 100%;
text-indent: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
text-decoration: none;
}
}
&-ctas {
@extend %buttonGroup;
@include stack-spacing(0);
flex-shrink: 0
}
}
.button {
@extend %button--small;
}
@include not-on-desktop(){
.siteHeader {
&-title {
a {
padding: 0
}
}
&-ctas {
display: none !important;
}
}
}
@include only-on-desktop(){
$padding-block: 20px;
display: flex;
align-items: stretch;
align-content: space-between;
column-gap: var(--gg);
padding-top: 0;
padding-bottom: 0;
.siteHeader {
&-home {
position: relative;
top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-block: $padding-block;
flex: 1 1;
height: auto;
font-family: $_font-family--secondary;
}
&-title {
a {
&::after {
content: "";
display: block;
position: absolute;
inset: 0;
}
}
}
&-ctas {
padding-block: .5 * $padding-block;
align-content: center;
justify-content: flex-end;
row-gap: .5 * $padding-block;
}
}
}
}