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

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);
}
}