88 lines
2.0 KiB
Plaintext
88 lines
2.0 KiB
Plaintext
---
|
|
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
|
|
---
|
|
|
|
<header id="header" class="hidden sm:block">
|
|
|
|
<div id="header-grid" class="grid relative bg-white items-end gap-x-4 pt-4 px-0
|
|
|
|
grid-cols-1
|
|
sm:grid-cols-1
|
|
md:grid-cols-1
|
|
|
|
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
|
|
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
|
|
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
|
|
|
|
<div class="justify-self-start">
|
|
|
|
<div class="w-full grid grid-cols-[48px_1fr] px-2 gap-2 gap-y-1 self-end
|
|
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
|
md:gap-y-4
|
|
lg:px-0 lg:gap-x-4">
|
|
|
|
<div class="justify-self-start">
|
|
<a href="/">
|
|
<img id="header-logo" class="w-full
|
|
xs:max-w-[64px]
|
|
sm:max-w-[64px]
|
|
md:max-w-[64px] md:ml-6
|
|
lg:max-w-[64px] lg:ml-0
|
|
xl:max-w-[94px] xl:ml-0
|
|
"
|
|
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="self-end">
|
|
|
|
<div id="header-text-1"class="text-secondary justify-self-start
|
|
[font-size:_clamp(16px,6vw,36px)]
|
|
xs:[font-size:_clamp(15px,6vw,36px)] xs:justify-self-start xs:leading-[3.5rem]
|
|
|
|
lg:[font-size:_clamp(15px,3vw,26px)]
|
|
|
|
xl:[font-size:_clamp(15px,3vw,36px)]
|
|
">
|
|
Energieausweis online erstellen</div>
|
|
|
|
<div id="header-text-2"class="text-primary justify-self-start
|
|
[font-size:_clamp(10px,4vw,22px)] leading-[10px]
|
|
|
|
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[1rem]
|
|
|
|
lg:[font-size:_clamp(15px,3vw,20px)]
|
|
|
|
xl:[font-size:_clamp(15px,3vw,24px)]
|
|
">
|
|
Energieausweise nach aktuellem GEG</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-full justify-self-center">
|
|
<HeaderLogin client:load />
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-start-1 col-span-3">
|
|
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
|
lg:h-[12px] xl:h-[12px]"></div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<style>
|
|
.header-button {
|
|
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
|
|
}
|
|
</style> |