gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vereinheitliche Titelabstaende

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 18:04:01 +01:00
parent 018040aa4c
commit 6865b752e3
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -45,7 +45,7 @@
</section>
<section class="section section--dark process">
<div class="section-head section-head--process">
<div class="section-head section-head--boxed section-head--process">
<h2 class="section-title section-title--process">
<span class="section-title__line">Wie aus Ideen</span>
<span class="section-title__line">Ergebnisse werden</span>
@@ -83,7 +83,7 @@
</section>
<section class="section section--light focus">
<div class="section-head">
<div class="section-head section-head--boxed">
<h2 class="section-title">Meine Schwerpunkte</h2>
<img
class="section-head__accent section-head__accent--focus"
@@ -157,9 +157,14 @@
</section>
<section class="section section--accent work">
<div class="section-head">
<div class="section-head section-head--boxed">
<h2 class="section-title section-title--work">So arbeite ich</h2>
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" aria-hidden="true" />
<img
class="section-head__accent section-head__accent--work"
src="./media/strichlein_rgruen_unter_wort.svg"
alt=""
aria-hidden="true"
/>
</div>
<div class="work__grid">

29
styles.css
View File

@@ -18,6 +18,7 @@
--section-padding-x: clamp(2rem, 3.3vw, 3.5rem);
--section-padding-y: clamp(3.5rem, 5vw, 5.75rem);
--section-stack-padding-y: clamp(2.5rem, 4vw, 4rem);
--section-head-box-gap: clamp(1.9rem, 2.6vw, 2.6rem);
--grid-gap: 1.6rem;
--content-width-wide: 1320px;
--content-width-narrow: 1040px;
@@ -243,6 +244,11 @@ button {
margin: 0 auto 3rem;
}
.section-head--boxed {
width: fit-content;
margin-bottom: var(--section-head-box-gap);
}
.section-title {
font-size: clamp(2.6rem, 4.4vw, 4.3rem);
max-width: 10.5ch;
@@ -265,26 +271,31 @@ button {
.section-head--process {
position: relative;
width: fit-content;
}
.section-head__accent {
position: absolute;
width: clamp(70px, 9vw, 120px);
margin: 0;
pointer-events: none;
}
.section-head__accent--process {
position: absolute;
top: -5.2rem;
right: -5rem;
width: 78px;
margin-top: 0;
}
.section-head__accent--focus {
position: relative;
top: calc(4.2rem + 40px);
left: 9ch;
top: calc(100% - 0.15rem);
left: 72%;
transform: translateX(-50%);
}
.section-head img {
width: clamp(70px, 9vw, 120px);
margin-top: -0.3rem;
.section-head__accent--work {
top: calc(100% - 0.15rem);
left: 78%;
transform: translateX(-50%);
}
.process__grid,