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>
<section class="section section--dark process"> <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"> <h2 class="section-title section-title--process">
<span class="section-title__line">Wie aus Ideen</span> <span class="section-title__line">Wie aus Ideen</span>
<span class="section-title__line">Ergebnisse werden</span> <span class="section-title__line">Ergebnisse werden</span>
@@ -83,7 +83,7 @@
</section> </section>
<section class="section section--light focus"> <section class="section section--light focus">
<div class="section-head"> <div class="section-head section-head--boxed">
<h2 class="section-title">Meine Schwerpunkte</h2> <h2 class="section-title">Meine Schwerpunkte</h2>
<img <img
class="section-head__accent section-head__accent--focus" class="section-head__accent section-head__accent--focus"
@@ -157,9 +157,14 @@
</section> </section>
<section class="section section--accent work"> <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> <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>
<div class="work__grid"> <div class="work__grid">

29
styles.css
View File

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