Cloonar/lena-schilling-website
2
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: design changes

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-14 17:13:33 +01:00
parent 78bffc5b46
commit ee73d44aaf
6 changed files with 82 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.chatgpt_config.yaml
View File

@@ -2,5 +2,3 @@ project_name: "lena-schilling-website"
default_prompt_blocks:
- "basic-prompt"
- "typo3-development"
directories:
- "packages"

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

@@ -7,7 +7,6 @@
<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">
<h2 class="hero-subheader">{data.subheader}</h2>
<h1 class="hero-title">{data.header}</h1>
@@ -21,7 +20,24 @@
<div class="hero-image-wrapper">
<f:if condition="{data.image}">
<f:then>
<f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
<picture>
<source
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
{f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 430w"
sizes="(max-width: 320px) 80vw,
(max-width: 768px) 80vw,
430px" />
<f:image
image="{data.image.0}"
treatIdAsReference="1"
cropVariant="default"
width="430c"
alt="Hero Image"
loading="lazy"
class="hero-image" />
</picture>
</f:then>
<f:else>
<p>No image available</p>

18
packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
View File

@@ -8,7 +8,23 @@
<div class="textimage-image-wrapper">
<f:if condition="{data.image}">
<f:then>
<f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
<picture>
<source
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
{f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default')} 1024w"
sizes="(max-width: 320px) 90vw,
(max-width: 768px) 600px,
600px" />
<f:image
image="{data.image.0}"
treatIdAsReference="1"
cropVariant="default"
width="1024c"
alt="{data.header}"
class="textimage-image" />
</picture>
</f:then>
<f:else>
<p>No image available</p>

20
packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
View File

@@ -1,7 +1,25 @@
<div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
<f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
<f:if condition="{newsItem.media}">
<f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
<f:then>
<picture>
<source
srcset="
{f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
{f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
{f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default')} 1024w"
sizes="(max-width: 320px) 100vw,
(max-width: 768px) 50vw,
400px" />
<f:image
image="{newsItem.media.0}"
treatIdAsReference="1"
cropVariant="default"
width="1024c"
alt="{newsItem.title}"
class="news-item-grid-image" />
</picture>
</f:then>
</f:if>
<div class="news-item-content">
<f:if condition="{newsItem.firstCategory}">

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

@@ -40,6 +40,7 @@ body {
// Use Hajime Sans for headlines
h1, h2, h3 {
font-family: 'Hajime Sans', sans-serif;
color: var(--bs-primary);
font-weight: 400;
}

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

@@ -99,12 +99,32 @@
color: #fff;
border-top-right-radius: 1rem;
padding: 1rem;
padding-right: 3rem;
&:after {
position: absolute;
right: 1.625rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
display: block;
content: ' ';
width: 1em;
height: 1em;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: currentColor;
vertical-align: middle;
mask-image: url(../Icons/angle-right.svg);
}
}
h3 {
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
font-weight: 500;
color: #fff;
margin: 0;
}
}
@@ -114,6 +134,11 @@
a .news-item-content {
@media (min-width: $breakpoint-md) {
padding: 2.875rem;
padding-right: 5rem;
&:after {
right: 3.5rem;
}
}
}
}