astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

Refactor typography styles for improved readability and layout consistency

Browse source
This commit is contained in:
astosic 2025-07-31 15:11:52 +02:00
parent ba53804650
commit 421ecc1d2a
4 changed files with 98 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/scss/custom.scss
View file

@ -70,7 +70,7 @@ section {
.gif-background { .gif-background {
background-image: url('/images/BackgroundAnimation.svg'); background-image: url('/images/BackgroundAnimation.svg');
background-size: cover; background-size: cover;
background-position: center -220px; background-position: center 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;

41
assets/scss/templates/_about.scss
View file

@ -1,20 +1,43 @@
.about{ .about{
.block{ .block{
h2 { h1 {
padding-top: 30px; font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
padding-bottom: 30px; font-weight: 600;
margin:0; line-height: 1.3;
margin-bottom: 1rem;
color: #046e6e;
} }
h1.page-title {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-top: 2rem;
text-transform: capitalize;
}
h2 {
font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
font-style: italic;
font-weight: 400;
line-height: 1.4;
margin-bottom: 1rem;
color: #222;
}
h3 { h3 {
padding-top: 30px; font-size: clamp(1.2rem, 1.8vw, 1.5rem);
padding-bottom: 50px; font-weight: normal;
margin:0; line-height: 1.6;
margin-bottom: 1rem;
color: inherit;
} }
p { p {
padding-top: 20px; font-style: normal;
line-height:28px; font-size: clamp(1.3rem, 1.5vw, 1.4rem);
margin-bottom: 1.25rem;
line-height: 1.6;
} }
img { img {

45
layouts/partials/page-title.html
View file

@ -1,21 +1,40 @@
<section class="page-title gif-background" style="position: relative; padding: 64px 0 40px;"> <section class="page-title gif-background">
<div class="container1">
<!-- Transparenter Overlay für bessere Lesbarkeit -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); z-index: 1;"></div>
<div class="container" style="position: relative; z-index: 2;">
<div class="row"> <div class="row">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<h1 style="color: white; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 0;"> <div class="servie-title fade-in">
{{ .Title }} <h1>{{ .Title }}</h1>
</h1> </div>
{{ with .Params.description }} {{ with .Params.description }}
<h2 style="color: white; font-weight: 400; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); margin-top: 0;"> </div>
{{ . | markdownify }}
</h2>
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<style>
.fade-in {
animation: fadeInUp 1s ease-out
}
.container1 {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

37
resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
View file

@ -1697,19 +1697,38 @@ h2, h3 {
width: auto !important; width: auto !important;
padding: 20px; } padding: 20px; }
.about .block h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: #046e6e; }
.about .block h1.page-title {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-top: 2rem;
text-transform: capitalize; }
.about .block h2 { .about .block h2 {
padding-top: 30px; font-size: clamp(1.25rem, 2vw, 1.5rem);
padding-bottom: 30px; font-style: italic;
margin: 0; } font-weight: 400;
line-height: 1.4;
margin-bottom: 1rem;
color: #222; }
.about .block h3 { .about .block h3 {
padding-top: 30px; font-size: clamp(1.2rem, 1.8vw, 1.5rem);
padding-bottom: 50px; font-weight: normal;
margin: 0; } line-height: 1.6;
margin-bottom: 1rem;
color: inherit; }
.about .block p { .about .block p {
padding-top: 20px; font-style: normal;
line-height: 28px; } font-size: clamp(1.3rem, 1.5vw, 1.4rem);
margin-bottom: 1.25rem;
line-height: 1.6; }
.about .block img { .about .block img {
width: 100%; } width: 100%; }
@ -2563,7 +2582,7 @@ section {
.gif-background { .gif-background {
background-image: url("/images/BackgroundAnimation.svg"); background-image: url("/images/BackgroundAnimation.svg");
background-size: cover; background-size: cover;
background-position: center -220px; background-position: center 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; } position: relative; }
.gif-background::after { .gif-background::after {