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

Refine spacing and art

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 16:58:18 +01:00
parent 33a4e9bdd7
commit 81897a3165
1 changed files with 77 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
styles.css
View File

@@ -15,7 +15,11 @@
--radius-small: 18px;
--max-width: 1440px;
--section-padding: clamp(2.5rem, 4vw, 5rem);
--section-padding-x: clamp(2rem, 3.3vw, 3.5rem);
--section-padding-y: clamp(3.5rem, 5vw, 5.75rem);
--grid-gap: 1.6rem;
--content-width-wide: 1320px;
--content-width-narrow: 1040px;
--transition-fast: 180ms ease;
}
@@ -68,6 +72,7 @@ button {
margin: 0 auto;
background: var(--bg-light);
box-shadow: 0 0 0 1px rgba(54, 65, 33, 0.06);
overflow: clip;
}
.section {
@@ -90,7 +95,7 @@ button {
}
.section__content {
padding: var(--section-padding);
padding: var(--section-padding-y) var(--section-padding-x);
}
.hero,
@@ -109,14 +114,17 @@ button {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
gap: 2.5rem;
min-height: 100%;
padding-top: clamp(2.25rem, 4vw, 3.75rem);
padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.hero__headline-wrap {
position: relative;
max-width: 34rem;
padding-top: 4.5rem;
max-width: 32rem;
min-height: 29rem;
padding-top: 7rem;
}
.section-title {
@@ -130,7 +138,8 @@ button {
.section-title--hero {
position: relative;
z-index: 2;
font-size: clamp(4rem, 6.1vw, 6.2rem);
max-width: 6ch;
font-size: clamp(4rem, 5.3vw, 5.4rem);
}
.hero__scribble {
@@ -139,28 +148,28 @@ button {
}
.hero__scribble--top {
width: clamp(110px, 14vw, 170px);
top: 0.2rem;
right: 0.8rem;
width: clamp(106px, 11vw, 142px);
top: 1.1rem;
right: 0.6rem;
}
.hero__scribble--middle {
width: clamp(280px, 29vw, 400px);
left: 6.2rem;
top: 5.3rem;
opacity: 0.95;
width: clamp(208px, 20vw, 268px);
left: 3rem;
top: 10.2rem;
opacity: 1;
}
.hero__scribble--bottom {
width: clamp(210px, 26vw, 330px);
right: 1rem;
bottom: -0.1rem;
width: clamp(170px, 18vw, 248px);
left: 10.8rem;
bottom: 2.2rem;
}
.hero__scribble--bottom-secondary {
width: clamp(190px, 23vw, 280px);
right: 2rem;
bottom: 0.2rem;
width: clamp(184px, 18vw, 250px);
left: 9rem;
bottom: 2.45rem;
}
.hero__media {
@@ -174,6 +183,10 @@ button {
object-fit: cover;
}
.hero__media img {
object-position: center top;
}
.button {
display: inline-flex;
align-items: center;
@@ -219,6 +232,7 @@ button {
.process {
text-align: center;
padding: clamp(2.5rem, 4vw, 4rem) var(--section-padding-x) clamp(2.8rem, 4vw, 3.6rem);
}
.section-head {
@@ -227,7 +241,8 @@ button {
align-items: flex-start;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
width: min(100%, var(--content-width-wide));
margin: 0 auto 3rem;
}
.section-title {
@@ -250,7 +265,8 @@ button {
.process__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 2rem;
width: min(100%, var(--content-width-wide));
margin: 0 auto 2.2rem;
}
.card {
@@ -297,22 +313,22 @@ button {
.focus__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 640px;
width: min(100%, 640px);
margin: 0 auto;
}
.card--focus {
border: 1.5px solid rgba(47, 58, 24, 0.85);
padding: 1.6rem 1.4rem;
padding: 1.8rem 1.15rem 1.1rem;
text-align: center;
}
.focus-card__image {
display: grid;
place-items: center;
width: min(56%, 180px);
width: min(54%, 160px);
aspect-ratio: 1;
margin: 0 auto 1.4rem;
margin: 0 auto 1.55rem;
}
.focus-card .card-title {
@@ -333,7 +349,7 @@ button {
}
.about__media {
min-height: 700px;
min-height: 650px;
}
.about__content {
@@ -359,7 +375,7 @@ button {
.about__text {
display: grid;
gap: 1.6rem;
max-width: 33rem;
max-width: 31rem;
}
.about__text strong {
@@ -368,12 +384,14 @@ button {
.work__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(100%, var(--content-width-wide));
margin: 0 auto;
}
.work-card {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.95rem;
}
.work-card__art {
@@ -401,8 +419,10 @@ button {
.footer__contact {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 1.05rem;
justify-content: end;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.footer__contact a {
@@ -417,7 +437,9 @@ button {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
gap: 0.35rem;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.section-title--claim {
@@ -436,14 +458,14 @@ button {
.footer__accent {
position: absolute;
right: 3rem;
bottom: 4.4rem;
width: 240px;
right: 2.2rem;
bottom: 3.6rem;
width: 230px;
}
.footer__accent img:last-child {
width: 65%;
margin: -1.1rem 0 0 auto;
width: 58%;
margin: -0.8rem 0 0 auto;
}
.contact-flyover {
@@ -566,6 +588,10 @@ button {
.work__grid {
grid-template-columns: 1fr;
}
.hero__headline-wrap {
min-height: 24rem;
}
}
@media (max-width: 768px) {
@@ -594,11 +620,13 @@ button {
.hero__content {
gap: 1.4rem;
padding-top: 2rem;
padding-bottom: 1rem;
}
.hero__headline-wrap {
padding-top: 3rem;
min-height: 18rem;
padding-top: 3.4rem;
max-width: none;
}
@@ -607,27 +635,27 @@ button {
}
.hero__scribble--top {
width: 112px;
top: -0.2rem;
right: 0.2rem;
width: 88px;
top: 0.1rem;
right: 0.3rem;
}
.hero__scribble--middle {
width: 200px;
top: 3.6rem;
left: 3rem;
width: 154px;
top: 6.25rem;
left: 2.45rem;
}
.hero__scribble--bottom {
width: 160px;
right: 0;
bottom: -0.5rem;
width: 128px;
left: 5.7rem;
bottom: 0.8rem;
}
.hero__scribble--bottom-secondary {
width: 150px;
right: 1.2rem;
bottom: -0.2rem;
width: 132px;
left: 4.8rem;
bottom: 1.1rem;
}
.hero__media {
@@ -637,6 +665,7 @@ button {
.section-head {
justify-content: space-between;
width: 100%;
margin-bottom: 2rem;
}
@@ -660,7 +689,7 @@ button {
}
.focus__grid {
max-width: none;
width: 100%;
}
.about__media {