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>
<div{{#id}} id="{{.}}"{{/id}} class="siteHeader is-simple{{#modifier}} {{.}}{{/modifier}}" data-menu>
{{#skip}}
<div class="siteHeader-skip">
<a href="#{{id}}">{{{label}}}</a>
</div>
{{/skip}}
<div class="siteHeader-home">
{{#home}}
{{#if url}}<a class="siteHeader-home-link" href="{{url}}">{{/if~}}
{{#logo}}
{{render '@logo' (contextData '@simplesiteheader' this) merge=true}}
{{/logo}}
{{~#if url}}</a>{{/if}}
{{/home}}
{{#title}}
<div class="siteHeader-title">
{{#if url}}<a href="{{url}}" title="{{title}}">{{/if}}{{{content}}}{{#if url}}</a>{{/if}}
</div>
{{/title}}
</div>
{{#if ctas}}
<div class="siteHeader-ctas">
{{#ctas}}
{{render '@button--link' (contextData '@simplesiteheader' this) merge=true}}
{{/ctas}}
</div>
{{/if}}
</div>
<div class="siteHeader-spacer"></div>
{{#skip}}
<div id="{{id}}"></div>
{{/skip}}
{
"id": "siteHeader",
"skip": {
"label": "Direkt zum Inhalt",
"id": "siteHeader-end"
},
"home": {
"logo": {},
"url": "https://psi.de",
"title": "A landing page with an overwhelmingly long page title that should never be used—but should always be tested"
},
"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;
}
}
}
}