Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: spaces, link colors, card icon, card background and border
Some checks failed
Build / switch-stage (push) Blocked by required conditions
Details
Build / build (push) Successful in 4m22s
Details
Build / deploy-stage (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-22 22:17:48 +02:00
parent b47c20d2d9
commit 755168d0e6
7 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
View File

@@ -33,13 +33,20 @@
</div> </div>
</f:else> </f:else>
</f:if> </f:if>
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> <div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center">
<h3 class="text-white text-xl font-bold text-center p-4">{card.header}</h3> <div class="w-full">
<h3 class="text-white text-xl font-bold text-center px-4">{card.header}</h3>
</div>
<div class="w-full text-center">
<div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
<i class="ci ci-arrow-up-right"></i>
</div>
</div>
</div> </div>
</div> </div>
<div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-gray-100 shadow-lg p-6 overflow-y-auto"> <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
<h4 class="text-lg font-semibold mb-2">{card.header}</h4> <h4>{card.header}</h4>
<div class="text-sm"> <div class="text-sm">
<f:format.html>{card.bodytext}</f:format.html> <f:format.html>{card.bodytext}</f:format.html>
</div> </div>

14
packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
View File

@@ -50,7 +50,7 @@
<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" <a href="#next-section"
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-opacity-90"> 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> </a>
@@ -58,7 +58,7 @@
</div> </div>
<!-- TEXT HALF --> <!-- TEXT HALF -->
<div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center space-y-6 md:pl-24"> <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
<!-- Desktop: line + intro --> <!-- Desktop: line + intro -->
<div class="hidden md:flex items-center space-x-3"> <div class="hidden md:flex items-center space-x-3">
@@ -74,19 +74,19 @@
</h1> </h1>
<!-- Body copy --> <!-- Body copy -->
<p class="text-base md:text-lg text-gray-800 max-w-md"> <div class="text-base md:text-lg max-w-md">
<f:format.html>{data.bodytext}</f:format.html> <f:format.html>{data.bodytext}</f:format.html>
</p> </div>
<!-- Social icons --> <!-- Social icons -->
<div class="space-x-3"> <div class="space-x-3">
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center"> <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
<i class="ci ci-linkedin"></i> <i class="ci ci-linkedin"></i>
</a> </a>
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center"> <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
<i class="ci ci-instagram"></i> <i class="ci ci-instagram"></i>
</a> </a>
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center"> <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
<i class="ci ci-facebook"></i> <i class="ci ci-facebook"></i>
</a> </a>
</div> </div>

14
packages/base/Resources/Private/PageView/Layouts/Default.html
View File

@@ -26,13 +26,13 @@
<ul class="space-y-4"> <ul class="space-y-4">
<li class="flex items-center"> <li class="flex items-center">
<!-- mail --> <!-- mail -->
<a href="mailto:inquiry@dialogrelations.com" class="hover:underline text-white"> <a href="mailto:inquiry@dialogrelations.com" class="hover:text-white text-white">
inquiry@dialogrelations.com inquiry@dialogrelations.com
</a> </a>
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<!-- phone --> <!-- phone -->
<a href="tel:+4312313435" class="hover:underline text-white"> <a href="tel:+4312313435" class="hover:text-white text-white">
+43 1231 3435 +43 1231 3435
</a> </a>
</li> </li>
@@ -45,13 +45,13 @@
<div class="flex space-x-4"> <div class="flex space-x-4">
<!-- Social buttons --> <!-- Social buttons -->
<a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center"> <a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
<i class="ci ci-linkedin"></i> <i class="ci ci-linkedin"></i>
</a> </a>
<a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center"> <a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
<i class="ci ci-instagram"></i> <i class="ci ci-instagram"></i>
</a> </a>
<a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center"> <a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
<i class="ci ci-facebook"></i> <i class="ci ci-facebook"></i>
</a> </a>
</div> </div>
@@ -70,9 +70,9 @@
<!-- Privacy links --> <!-- Privacy links -->
<p> <p>
<a href="#" class="hover:underline text-white">Privacy Policy</a> <a href="#" class="hover:text-white text-white">Privacy Policy</a>
<span class="mx-1">|</span> <span class="mx-1">|</span>
<a href="#" class="hover:underline text-white">Terms and Conditions</a> <a href="#" class="hover:text-white text-white">Terms and Conditions</a>
</p> </p>
</div><!-- /Row 2 --> </div><!-- /Row 2 -->

4
packages/base/Resources/Public/Icons/arrow-up-right.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7H17V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 17L17 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

6
packages/base/Resources/Public/Scss/abstracts/_fonts.scss
View File

@@ -30,6 +30,7 @@ h1, h2, h3, h4, h5, h6 {
color: var(--color-primary); color: var(--color-primary);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
@apply mb-4
} }
h1 { h1 {
@@ -81,10 +82,7 @@ a {
color: var(--bs-primary); color: var(--bs-primary);
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
@apply text-primary hover:text-primary-dark;
&:hover {
color: var(--bs-primary)
}
} }
button, .btn { button, .btn {

3
packages/base/Resources/Public/Scss/abstracts/_icons.scss
View File

@@ -33,6 +33,9 @@
.ci-arrow-down::before { .ci-arrow-down::before {
mask-image: url(../Icons/arrow-down.svg); mask-image: url(../Icons/arrow-down.svg);
} }
.ci-arrow-up-right::before {
mask-image: url(../Icons/arrow-up-right.svg);
}
.ci-email::before { .ci-email::before {
mask-image: url(../Icons/email.svg); mask-image: url(../Icons/email.svg);

2
packages/base/Resources/Public/Scss/base/_global.scss
View File

@@ -1,6 +1,8 @@
:root { :root {
--color-primary: #0B197D; --color-primary: #0B197D;
--color-primary-dark: #08145C; --color-primary-dark: #08145C;
--color-light-grey: #F6F6F6;
--color-dark-grey: #00000026;
} }
body { body {