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

feat: many design changes

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-14 00:03:09 +01:00
parent 9e4a2e90ec
commit 16344b6994
35 changed files with 2692 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/base/Configuration/RTE/Default.yaml
View File

@@ -9,6 +9,8 @@ editor:
stylesSet:
- { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
- { name: "Small", element: "p", attributes: { 'class': 'small' } }
- { name: "Big Number", element: "span", attributes: { 'class': 'big-number' } }
toolbarGroups:
- { name: styles, groups: [ format, styles ] }

3
packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript
View File

@@ -38,7 +38,7 @@ page {
}
includeCSS {
main = EXT:base/Resources/Public/Scss/main.scss
main = EXT:base/Resources/Public/Css/main.css
}
includeJSLibs {
@@ -72,3 +72,4 @@ lib.parseFunc_RTE {
}
}
}

74
packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
View File

@@ -1,13 +1,19 @@
.frame-type-cloonar_hero {
position: relative;
z-index: 1;
/* Use a relative path to correctly load the image */
background: #cecece;
background-repeat: repeat;
background: url('../../../Images/background.jpg') repeat;
}
.frame-type-cloonar_hero + .frame {
margin-top: -10rem;
}
.frame-type-cloonar_hero .container {
padding-bottom: 3rem;
}
/* Inner container with white background and padding */
.frame-type-cloonar_hero .hero-inner {
@@ -23,22 +29,26 @@
}
.frame-type-cloonar_hero .hero-subheader {
font-size: 1rem;
color: #3c6418;
margin-bottom: 0.5rem;
font-size: 2rem;
color: var(--bs-primary);
margin-bottom: 0rem;
line-height: 1;
}
.frame-type-cloonar_hero .hero-title {
font-size: 1.5rem;
font-weight: bold;
color: #3c6418;
margin: 0 0 1rem 0;
line-height: 1.2;
text-transform: uppercase;
font-size: 4rem;
color: var(--bs-primary);
line-height: 1;
margin-bottom: 2rem;
}
.frame-type-cloonar_hero h4 {
text-transform: uppercase;
}
.frame-type-cloonar_hero .hero-text {
font-size: 0.9rem;
font-size: 1rem;
color: #333;
line-height: 1.4;
margin-bottom: 1rem;
@@ -49,19 +59,19 @@
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.frame-type-cloonar_hero .social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
background: #3c6418;
color: #fff;
font-size: 1rem;
background: var(--bs-primary);
color: var(--bs-yellow);
font-size: 1.5rem;
padding: 2.375rem;
text-decoration: none;
border-radius: 50%;
width: 2rem;
height: 2rem;
transition: background 0.3s;
}
@@ -71,23 +81,30 @@
.frame-type-cloonar_hero .hero-image-wrapper {
margin-top: 1rem;
align-self: flex-end;
}
.frame-type-cloonar_hero .hero-image {
max-width: 200px;
width: 100%;
height: auto;
border-radius: 0.5rem;
}
.frame-type-cloonar_hero img {
width: 100%;
}
@media (min-width: 768px) {
.frame-type-cloonar_hero .container {
padding-bottom: 4rem;
}
.frame-type-cloonar_hero .hero-subheader {
font-size: 1.2rem;
font-size: 3rem;
}
.frame-type-cloonar_hero .hero-title {
font-size: 2rem;
margin-bottom: 1.2rem;
font-size: 5rem;
}
.frame-type-cloonar_hero .hero-text {
@@ -96,24 +113,23 @@
.frame-type-cloonar_hero .social-icon {
width: 2.5rem;
height: 2.5rem;
font-size: 1.2rem;
height: 2rem;
font-size: 2rem;
}
.frame-type-cloonar_hero .hero-image {
max-width: 250px;
}
}
@media (min-width: 992px) {
.frame-type-cloonar_hero .hero {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-columns: 1fr 40% 7.125rem;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"subheader image icons"
"title image icons"
"text image icons"
"social image icons";
"subheader image social"
"title image social"
"text image social";
align-items: start;
justify-items: start;
text-align: left;
@@ -121,14 +137,10 @@
.frame-type-cloonar_hero .hero-subheader {
grid-area: subheader;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.frame-type-cloonar_hero .hero-title {
grid-area: title;
font-size: 3rem;
margin-bottom: 1.5rem;
}
.frame-type-cloonar_hero .hero-text {
@@ -144,6 +156,7 @@
gap: 1rem;
margin-bottom: 0;
align-items: flex-start;
align-self: center;
}
.frame-type-cloonar_hero .hero-image-wrapper {
@@ -155,6 +168,5 @@
}
.frame-type-cloonar_hero .hero-image {
max-width: 300px;
}
}

3
packages/base/ContentBlocks/ContentElements/hero/config.yaml
View File

@@ -4,6 +4,9 @@ group: default
prefixFields: true
prefixType: full
fields:
-
identifier: subheader
useExistingField: true
-
identifier: header
useExistingField: true

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

@@ -7,16 +7,16 @@
<f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
<div class="hero-inner">
<!-- Inline style with f:uri.resource to ensure correct path -->
<div class="hero">
<div class="hero-subheader">{data.subheader}</div>
<h2 class="hero-title">{data.header}</h2>
<h2 class="hero-subheader">{data.subheader}</h2>
<h1 class="hero-title">{data.header}</h1>
<div class="hero-text">
<f:format.html>{data.bodytext}</f:format.html>
</div>
<div class="hero-social-icons">
<a href="#" class="social-icon">X</a>
<a href="#" class="social-icon">Instagram</a>
<a href="#" class="social-icon">TikTok</a>
<a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
<a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
</div>
<div class="hero-image-wrapper">
<f:if condition="{data.image}">

57
packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css
View File

@@ -1,46 +1,41 @@
.frame-type-cloonar_stats .stats-wrapper {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 10; /* Ensure it's on top of the hero container */
background: #fff;
padding: 3rem 1rem;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 10; /* Ensure it's on top of the hero container */
background: #fff;
padding: 2rem 1rem;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
/* Each paragraph is treated as a column */
.frame-type-cloonar_stats .stats-wrapper p {
flex: 1 1 calc(25% - 2rem);
min-width: 150px;
text-align: center;
margin-bottom: 1rem;
flex: 1 1 100%;
text-align: center;
margin-bottom: 1rem;
text-transform: uppercase;
color: var(--bs-primary);
}
/* Lead paragraphs have larger text for numbers */
.frame-type-cloonar_stats .stats-wrapper p.lead {
font-size: 2rem;
font-weight: bold;
color: #3c6418;
margin-bottom: 0.5rem;
.frame-type-cloonar_stats .stats-wrapper span.big-number {
font-size: 4rem;
font-family: 'Hajime Sans', sans-serif;
text-transform: none;
}
.frame-type-cloonar_stats .stats-wrapper p:not(.lead) {
font-size: 0.9rem;
color: #444;
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.frame-type-cloonar_stats .stats-wrapper {
gap: 1rem;
padding: 2rem 1rem;
margin-top: -5rem; /* Adjust as needed for smaller screens */
gap: 2rem;
padding: 3rem 1rem;
}
.frame-type-cloonar_stats .stats-wrapper p {
flex: 1 1 100%;
flex: 1 1 calc(25% - 2rem);
}
}

4
packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
View File

@@ -1,6 +1,8 @@
<nav class="main-nav" id="mainNav">
<div class="container">
<a href="/" class="nav-logo">Brand Logo</a>
<a href="/" class="nav-logo">
<f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" />
</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle Menu">
<span class="nav-toggle-icon"></span>
</button>

BIN
packages/base/Resources/Public/Fonts/Hajime Sans.otf Normal file
View File

Binary file not shown.

BIN
packages/base/Resources/Public/Fonts/Hajime Sans.ttf Normal file
View File

Binary file not shown.

BIN
packages/base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf Normal file
View File

Binary file not shown.

BIN
packages/base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf Normal file
View File

Binary file not shown.

3
packages/base/Resources/Public/Icons/email.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.875 0.5C0.839844 0.5 0 1.33984 0 2.375C0 2.96484 0.277344 3.51953 0.75 3.875L9.25 10.25C9.69531 10.582 10.3047 10.582 10.75 10.25L19.25 3.875C19.7227 3.51953 20 2.96484 20 2.375C20 1.33984 19.1602 0.5 18.125 0.5H1.875ZM0 4.875V13C0 14.3789 1.12109 15.5 2.5 15.5H17.5C18.8789 15.5 20 14.3789 20 13V4.875L11.5 11.25C10.6094 11.918 9.39062 11.918 8.5 11.25L0 4.875Z" fill="#2E2E2E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

3
packages/base/Resources/Public/Icons/instagram.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4417 0.776626C13.3967 0.686626 14.0201 0.666626 19.0001 0.666626C23.9801 0.666626 24.6034 0.688293 26.5567 0.776626C28.5101 0.864959 29.8434 1.17663 31.0101 1.62829C32.2317 2.08996 33.3401 2.81163 34.2567 3.74496C35.1901 4.65996 35.9101 5.76663 36.3701 6.98996C36.8234 8.15663 37.1334 9.48996 37.2234 11.44C37.3134 13.3983 37.3334 14.0216 37.3334 19C37.3334 23.98 37.3117 24.6033 37.2234 26.5583C37.1351 28.5083 36.8234 29.8416 36.3701 31.0083C35.9101 32.2318 35.1889 33.3403 34.2567 34.2566C33.3401 35.19 32.2317 35.91 31.0101 36.37C29.8434 36.8233 28.5101 37.1333 26.5601 37.2233C24.6034 37.3133 23.9801 37.3333 19.0001 37.3333C14.0201 37.3333 13.3967 37.3116 11.4417 37.2233C9.49175 37.135 8.15842 36.8233 6.99175 36.37C5.76828 35.9099 4.65978 35.1887 3.74341 34.2566C2.81071 33.3411 2.08894 32.2331 1.62841 31.01C1.17675 29.8433 0.866748 28.51 0.776748 26.56C0.686748 24.6016 0.666748 23.9783 0.666748 19C0.666748 14.02 0.688415 13.3966 0.776748 11.4433C0.865081 9.48996 1.17675 8.15663 1.62841 6.98996C2.08962 5.76676 2.81195 4.65881 3.74508 3.74329C4.66015 2.81079 5.76754 2.08903 6.99008 1.62829C8.15675 1.17663 9.49008 0.866626 11.4401 0.776626H11.4417ZM26.4084 4.07663C24.4751 3.98829 23.8951 3.96996 19.0001 3.96996C14.1051 3.96996 13.5251 3.98829 11.5917 4.07663C9.80342 4.15829 8.83342 4.45663 8.18675 4.70829C7.33175 5.04163 6.72008 5.43663 6.07842 6.07829C5.47016 6.67005 5.00205 7.39043 4.70842 8.18663C4.45675 8.83329 4.15841 9.80329 4.07675 11.5916C3.98841 13.525 3.97008 14.105 3.97008 19C3.97008 23.895 3.98841 24.475 4.07675 26.4083C4.15841 28.1966 4.45675 29.1666 4.70842 29.8133C5.00175 30.6083 5.47008 31.33 6.07842 31.9216C6.67008 32.53 7.39175 32.9983 8.18675 33.2916C8.83342 33.5433 9.80342 33.8416 11.5917 33.9233C13.5251 34.0116 14.1034 34.03 19.0001 34.03C23.8967 34.03 24.4751 34.0116 26.4084 33.9233C28.1967 33.8416 29.1667 33.5433 29.8134 33.2916C30.6684 32.9583 31.2801 32.5633 31.9217 31.9216C32.5301 31.33 32.9984 30.6083 33.2918 29.8133C33.5434 29.1666 33.8418 28.1966 33.9234 26.4083C34.0117 24.475 34.0301 23.895 34.0301 19C34.0301 14.105 34.0117 13.525 33.9234 11.5916C33.8418 9.80329 33.5434 8.83329 33.2918 8.18663C32.9584 7.33163 32.5634 6.71996 31.9217 6.07829C31.33 5.47008 30.6096 5.00198 29.8134 4.70829C29.1667 4.45663 28.1967 4.15829 26.4084 4.07663ZM16.6584 24.6516C17.9662 25.196 19.4224 25.2695 20.7783 24.8595C22.1342 24.4495 23.3057 23.5815 24.0928 22.4037C24.8798 21.2259 25.2335 19.8114 25.0935 18.4018C24.9535 16.9922 24.3284 15.6749 23.3251 14.675C22.6855 14.0358 21.9121 13.5463 21.0606 13.2419C20.2092 12.9374 19.3008 12.8256 18.4009 12.9143C17.501 13.0031 16.632 13.2903 15.8564 13.7552C15.0808 14.2201 14.418 14.8512 13.9156 15.603C13.4132 16.3549 13.0837 17.2088 12.9509 18.1032C12.8182 18.9977 12.8853 19.9104 13.1476 20.7758C13.41 21.6412 13.8609 22.4376 14.4679 23.1078C15.075 23.778 15.8231 24.3053 16.6584 24.6516ZM12.3367 12.3366C13.2118 11.4616 14.2506 10.7675 15.3939 10.2939C16.5372 9.82033 17.7626 9.57658 19.0001 9.57658C20.2376 9.57658 21.463 9.82033 22.6063 10.2939C23.7495 10.7675 24.7884 11.4616 25.6634 12.3366C26.5385 13.2117 27.2326 14.2505 27.7061 15.3938C28.1797 16.5371 28.4235 17.7625 28.4235 19C28.4235 20.2375 28.1797 21.4628 27.7061 22.6061C27.2326 23.7494 26.5385 24.7883 25.6634 25.6633C23.8962 27.4305 21.4993 28.4233 19.0001 28.4233C16.5008 28.4233 14.104 27.4305 12.3367 25.6633C10.5695 23.8961 9.57671 21.4992 9.57671 19C9.57671 16.5007 10.5695 14.1039 12.3367 12.3366ZM30.5134 10.98C30.7303 10.7754 30.9039 10.5294 31.0239 10.2566C31.144 9.98374 31.2081 9.68957 31.2124 9.39151C31.2168 9.09344 31.1613 8.79754 31.0492 8.52131C30.9372 8.24508 30.7708 7.99414 30.56 7.78336C30.3492 7.57257 30.0983 7.40622 29.8221 7.29416C29.5458 7.18209 29.2499 7.12659 28.9519 7.13093C28.6538 7.13528 28.3596 7.19938 28.0868 7.31945C27.8139 7.43952 27.568 7.61312 27.3634 7.82996C26.9656 8.25168 26.7478 8.81183 26.7563 9.39151C26.7647 9.97119 26.9987 10.5248 27.4087 10.9347C27.8186 11.3446 28.3722 11.5787 28.9519 11.5871C29.5315 11.5956 30.0917 11.3778 30.5134 10.98Z" fill="#F5AE07"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

3
packages/base/Resources/Public/Icons/linkedin.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22175 6.969H11.894V8.819C12.423 7.755 13.7796 6.799 15.8174 6.799C19.724 6.799 20.6515 8.917 20.6515 12.803V20H16.6964V13.688C16.6964 11.475 16.1675 10.227 14.8208 10.227C12.953 10.227 12.1768 11.572 12.1768 13.687V20H8.22175V6.969ZM1.43982 19.83H5.39487V6.799H1.43982V19.83ZM5.96143 2.55C5.96158 2.88528 5.89584 3.21724 5.76802 3.52659C5.6402 3.83594 5.45287 4.11651 5.21689 4.352C4.73873 4.83262 4.09149 5.10165 3.41734 5.1C2.74438 5.09954 2.09864 4.8312 1.61977 4.353C1.38465 4.11671 1.19795 3.83582 1.07036 3.52643C0.942766 3.21704 0.876793 2.88522 0.876221 2.55C0.876221 1.873 1.14319 1.225 1.62076 0.747C2.09921 0.268158 2.74522 -0.000299211 3.41833 2.50265e-07C4.09267 2.50265e-07 4.73932 0.269 5.21689 0.747C5.69348 1.225 5.96143 1.873 5.96143 2.55Z" fill="#2E2E2E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 931 B

3
packages/base/Resources/Public/Icons/phone.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.44141 0.960964C6.14062 0.234401 5.34766 -0.152317 4.58984 0.0547138L1.15234 0.992214C0.472656 1.17971 0 1.7969 0 2.50003C0 12.1641 7.83594 20 17.5 20C18.2031 20 18.8203 19.5274 19.0078 18.8477L19.9453 15.4102C20.1523 14.6524 19.7656 13.8594 19.0391 13.5586L15.2891 11.9961C14.6523 11.7305 13.9141 11.9141 13.4805 12.4492L11.9023 14.375C9.15234 13.0742 6.92578 10.8477 5.625 8.09768L7.55078 6.52346C8.08594 6.08596 8.26953 5.35159 8.00391 4.71487L6.44141 0.96487V0.960964Z" fill="#2E2E2E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

3
packages/base/Resources/Public/Icons/tiktok.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35 16.3984C31.5593 16.4058 28.2033 15.3318 25.4063 13.3281V27.2969C25.4055 29.884 24.6148 32.4091 23.1399 34.5346C21.6651 36.6602 19.5765 38.2847 17.1533 39.1911C14.7302 40.0974 12.0881 40.2422 9.58042 39.6063C7.07272 38.9703 4.81898 37.5838 3.12062 35.6323C1.42225 33.6807 0.36023 31.2572 0.0765895 28.6857C-0.207051 26.1142 0.301214 23.5174 1.53341 21.2426C2.7656 18.9678 4.66297 17.1235 6.97177 15.9562C9.28057 14.789 11.8907 14.3545 14.4531 14.7109V21.7344C13.2815 21.3655 12.0232 21.3763 10.858 21.7652C9.69288 22.1541 8.68036 22.9012 7.96508 23.8998C7.24979 24.8984 6.86831 26.0974 6.8751 27.3258C6.88189 28.5541 7.27661 29.7489 8.00289 30.7395C8.72917 31.7302 9.74988 32.466 10.9193 32.842C12.0887 33.2179 13.347 33.2148 14.5145 32.8331C15.682 32.4513 16.6991 31.7104 17.4204 30.7162C18.1418 29.722 18.5306 28.5252 18.5313 27.2969V0H25.4063C25.4024 0.581456 25.4521 1.16203 25.5547 1.73438C25.7938 3.01016 26.2905 4.22379 27.0145 5.30109C27.7386 6.37839 28.6747 7.29674 29.7656 8C31.3186 9.02566 33.1389 9.57177 35 9.57031V16.3984Z" fill="#F5AE07"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
packages/base/Resources/Public/Icons/x.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8952 0.0625H18.8947L12.3434 7.63359L20.0503 17.9375H14.0173L9.28864 11.6898L3.88442 17.9375H0.880665L7.8866 9.83789L0.498291 0.0625H6.68425L10.9541 5.77305L15.8952 0.0625ZM14.8415 16.1242H16.5028L5.7793 1.78125H3.99489L14.8415 16.1242Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 368 B

BIN
packages/base/Resources/Public/Images/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
packages/base/Resources/Public/Images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
packages/base/Resources/Public/Images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

65
packages/base/Resources/Public/Scss/abstracts/_fonts.scss Normal file
View File

@@ -0,0 +1,65 @@
// The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
// but we'll use TTF/OTF here.
// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
// Hajime Sans (no weight variations provided other than normal)
@font-face {
font-family: 'Hajime Sans';
src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
url('../Fonts/Hajime Sans.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
// Inter as a variable font:
// The Inter variable fonts likely contain multiple weights.
// We'll define one face for normal and one for italic using the variable font files.
// Define the weight range if needed (e.g., font-weight: 100 900 for variable range).
@font-face {
font-family: 'Inter';
src: url('../Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900; // Adjust as needed for variable font range
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('../Fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
}
// Use Inter for body text
body {
font-family: 'Inter', sans-serif;
font-weight: 500;
}
// Use Hajime Sans for headlines
h1, h2, h3 {
font-family: 'Hajime Sans', sans-serif;
font-weight: 400;
}
h2 {
font-size: 4rem;
}
h4 {
font-size: 1.5rem;
}
a {
color: var(--cl-primary);
text-decoration: none;
font-weight: 700;
}
// Use Hajime Sans for buttons as well
button, .btn {
font-family: 'Hajime Sans', sans-serif;
font-weight: 400;
}

62
packages/base/Resources/Public/Scss/abstracts/_icons.scss Normal file
View File

@@ -0,0 +1,62 @@
.ci {
position: relative;
}
.ci::before {
position: relative;
top: 3px;
display: inline-block;
content: ' ';
width: 1em;
height: 1em;
mask-size: 1em;
mask-repeat: no-repeat;
background-color: currentColor;
mask-position: center;
}
.ci-instagram::before {
mask-image: url(../Icons/instagram.svg);
}
.ci-tiktok::before {
mask-image: url(../Icons/tiktok.svg);
}
.ci-linkedin::before {
mask-image: url(../Icons/linkedin.svg);
}
.ci-x::before {
mask-image: url(../Icons/x.svg);
}
.ci-email::before {
mask-image: url(../Icons/email.svg);
}
.ci-phone::before {
mask-image: url(../Icons/phone.svg);
}
a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
position: relative;
top: 3px;
display: inline-block;
content: ' ';
width: 1em;
height: 1em;
mask-size: 1em;
mask-repeat: no-repeat;
background-color: currentColor;
mask-position: center;
}
a[href*="instagram.com*"]::before {
mask-image: url(../Icons/instagram.svg);
}
a[href*="tiktok.com"]::before {
mask-image: url(../Icons/tiktok.svg);
}
a[href*="linkedin.com"]::before {
mask-image: url(../Icons/linkedin.svg);
}
a[href*="x.com"]::before {
mask-image: url(../Icons/x.svg);
}

4
packages/base/Resources/Public/Scss/abstracts/_variables.scss
View File

@@ -22,6 +22,10 @@ $xl: 1200px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--bs-primary: #233600;
--bs-yellow: #F5AE07;
--cl-primary: #233600;
}
// Additional global variables can be added here

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

@@ -1,5 +1,3 @@
body {
font-family: $font-stack;
color: $primary-color;
line-height: 1.5;
}

16
packages/base/Resources/Public/Scss/components/_footer.scss
View File

@@ -63,19 +63,3 @@
font-size: 0.9rem;
}
}
/* Social links styling based on href */
a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
display: inline-block;
text-decoration: none;
color: #4b4b4b;
transition: color 0.3s ease;
}
a[href*="instagram.com"]:hover,
a[href*="tiktok.com"]:hover,
a[href*="linkedin.com"]:hover,
a[href*="twitter.com"]:hover,
a[href*="x.com"]:hover {
color: #6B8E23;
}

42
packages/base/Resources/Public/Scss/components/_navigation.scss
View File

@@ -2,11 +2,15 @@
// so that when it becomes sticky, the content doesn't jump.
$nav-height: 60px; // Adjust as needed
// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
// Ensure this path is correct for your TYPO3 installation.
// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
header {
width: 100%;
height: $nav-height;
line-height: $nav-height;
background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
background: url('../Images/background.jpg') repeat;
position: sticky;
top: 0;
z-index: 1000;
@@ -17,7 +21,6 @@ header {
.container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
height: 100%;
padding: 0 1rem;
@@ -86,22 +89,30 @@ header {
display: flex;
list-style: none;
align-items: center;
margin: auto;
.nav-item {
margin: 0 1rem;
font-family: 'Hajime Sans', sans-serif;
font-size: 1.75rem;
.nav-link {
text-decoration: none;
color: $primary-color;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1rem;
@include transition(color);
a {
font-weight: 400;
}
}
&:hover {
color: $brand-color;
}
.nav-item {
margin: 0 1rem;
.nav-link {
text-decoration: none;
color: $primary-color;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1rem;
@include transition(color);
&:hover {
color: $brand-color;
}
}
}
@@ -117,7 +128,6 @@ header {
left: 0;
right: 0;
flex-direction: column;
background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
max-height: 0;
overflow: hidden;
@include transition(max-height, 0.4s);

12
packages/base/Resources/Public/Scss/components/_news.scss
View File

@@ -9,13 +9,13 @@
max-width: 100%;
}
@media (max-width: $breakpoint-md) {
.news-list-item {
grid-column: span 2;
}
}
// @media (min-width: $breakpoint-md) {
// .news-list-item {
// grid-column: span 2;
// }
// }
@media (min-width: $breakpoint-xl) {
@media (min-width: $breakpoint-lg) {
.news-list-item {
grid-column: span 2;

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

@@ -1,5 +1,7 @@
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/fonts';
@import 'abstracts/icons';
@import 'base/base';
@import 'components/navigation';
@import 'components/contentElements';