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