feat: add hero link and smooth scrolling
All checks were successful
Build / build (push) Successful in 4m18s
Build / deploy-stage (push) Successful in 2m48s
Build / switch-stage (push) Successful in 2m5s

This commit is contained in:
2025-04-22 22:53:18 +02:00
parent 9b781d50f6
commit 8ee10d0a1c
4 changed files with 18 additions and 9 deletions

View File

@@ -15,6 +15,9 @@ fields:
type: Textarea type: Textarea
enableRichtext: true enableRichtext: true
useExistingField: true useExistingField: true
- identifier: header_link
type: Link
useExistingField: true
- identifier: image - identifier: image
type: File type: File
properties: properties:

View File

@@ -47,14 +47,16 @@
</f:if> </f:if>
<!-- Downarrow, half out on the right edge --> <!-- Downarrow, half out on the right edge -->
<f:if condition="{data.header_link}">
<div <div
class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20"> class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20">
<a href="#next-section" <f:link.typolink parameter="{data.header_link}"
class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white"> class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
<span class="sr-only">Scroll down</span> <span class="sr-only">Scroll down</span>
<i class="ci ci-arrow-down"></i> <i class="ci ci-arrow-down"></i>
</a> </f:link.typolink>
</div> </div>
</f:if>
</div> </div>
<!-- TEXT HALF --> <!-- TEXT HALF -->

View File

@@ -1,5 +1,5 @@
<div class="frame frame-type-{data.CType}"> <div class="frame frame-type-{data.CType}">
<div class="container"> <div id="c{data.uid}" class="container">
<f:render section="Header" optional="true" /> <f:render section="Header" optional="true" />
<f:render section="Main" optional="true" /> <f:render section="Main" optional="true" />
</div> </div>

View File

@@ -10,6 +10,10 @@
--color-primary-dark: #880B07; --color-primary-dark: #880B07;
} }
html {
scroll-behavior: smooth;
}
body { body {
line-height: 1.5; line-height: 1.5;
} }