mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-11-12 09:02:01 +01:00
Optimized content and fixed a few mobile issues.
This commit is contained in:
@@ -22,6 +22,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
counter-reset: section;
|
||||
min-height: 100vh;
|
||||
color: $ink;
|
||||
background: $beige;
|
||||
@@ -30,6 +31,7 @@ body {
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
overflow-x: hidden;
|
||||
overflow-x: clip;
|
||||
|
||||
// film grain
|
||||
&::after {
|
||||
@@ -90,11 +92,13 @@ em, i { font-style: italic; }
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
font-size: clamp(40px, 7vw, 88px);
|
||||
font-size: clamp(36px, 6vw, 76px);
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
|
||||
counter-increment: section;
|
||||
|
||||
&__nr {
|
||||
flex: none;
|
||||
margin-top: 0.35em;
|
||||
@@ -106,6 +110,10 @@ em, i { font-style: italic; }
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
&::before {
|
||||
content: counter(section, decimal-leading-zero);
|
||||
}
|
||||
}
|
||||
|
||||
&--light {
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
@use "variables" as *;
|
||||
|
||||
.faq {
|
||||
padding: 120px 0 0;
|
||||
|
||||
@include md {
|
||||
padding-top: 160px;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
@include inner;
|
||||
display: grid;
|
||||
gap: 48px;
|
||||
|
||||
@include md {
|
||||
grid-template-columns: 5fr 7fr;
|
||||
gap: 64px;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
|
||||
@include md {
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: 40ch;
|
||||
font-size: 20px;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
text-decoration: underline wavy $red;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border: 3px solid $ink;
|
||||
border-radius: $radius;
|
||||
background: $cream;
|
||||
box-shadow: 5px 5px 0 $ink;
|
||||
transition: box-shadow 0.3s $ease, translate 0.3s $ease;
|
||||
|
||||
&:hover {
|
||||
translate: -2px -2px;
|
||||
box-shadow: 8px 8px 0 $ink;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
background: $yellow;
|
||||
}
|
||||
|
||||
&__question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: clamp(18px, 2vw, 22px);
|
||||
line-height: 1.3;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid $ink;
|
||||
border-radius: 50%;
|
||||
background: $cream;
|
||||
transition: rotate 0.4s $ease;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 3px;
|
||||
background: $ink;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
rotate: 90deg;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] &__icon {
|
||||
rotate: 135deg;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 0 24px 24px;
|
||||
font-size: 17px;
|
||||
|
||||
ul, ol {
|
||||
margin: 8px 0 0 20px;
|
||||
}
|
||||
|
||||
ul { list-style: disc; }
|
||||
ol { list-style: decimal; }
|
||||
}
|
||||
}
|
||||
+21
-4
@@ -2,6 +2,8 @@
|
||||
|
||||
.intro {
|
||||
position: relative;
|
||||
// the rotated, wider-than-viewport ticker must not create horizontal scrolling
|
||||
overflow-x: clip;
|
||||
padding: 48px 0 0;
|
||||
|
||||
@include md {
|
||||
@@ -38,8 +40,9 @@
|
||||
}
|
||||
|
||||
&__headline {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(52px, 11vw, 168px);
|
||||
max-width: 16ch;
|
||||
font-size: clamp(34px, 8.6vw, 150px);
|
||||
hyphens: auto;
|
||||
line-height: 0.92;
|
||||
// background-clip: text only paints inside the box; keep descenders (g, p, …) visible
|
||||
padding-bottom: 0.3em;
|
||||
@@ -53,6 +56,15 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: 52ch;
|
||||
margin-top: 28px;
|
||||
font-size: clamp(18px, 1.6vw, 22px);
|
||||
line-height: 1.55;
|
||||
|
||||
strong { font-weight: 800; }
|
||||
}
|
||||
|
||||
&__cta {
|
||||
margin-top: 32px;
|
||||
|
||||
@@ -83,8 +95,13 @@
|
||||
border-radius: $radius-lg;
|
||||
background: $ink;
|
||||
box-shadow: 10px 10px 0 $orange;
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 320px;
|
||||
// no min-height here: with aspect-ratio it is transferred to a min-width and overflows on small screens
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
|
||||
@include sm {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
@include md {
|
||||
margin-top: 64px;
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
@use "variables" as *;
|
||||
|
||||
.process {
|
||||
padding: 0 0 120px;
|
||||
|
||||
@include md {
|
||||
padding-bottom: 160px;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
@include inner;
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
margin-bottom: 64px;
|
||||
|
||||
@include md {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: 46ch;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&__steps {
|
||||
counter-reset: frame;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@include sm {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@include lg {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// storyboard frame
|
||||
.frame {
|
||||
--frame-color: #{$yellow};
|
||||
counter-increment: frame;
|
||||
position: relative;
|
||||
padding: 28px 24px 32px;
|
||||
border: 3px solid $ink;
|
||||
border-radius: $radius;
|
||||
background: $cream;
|
||||
box-shadow: 8px 8px 0 var(--frame-color);
|
||||
transition: rotate 0.4s $ease, translate 0.4s $ease;
|
||||
|
||||
@each $name, $color in $colors {
|
||||
&--#{$name} {
|
||||
--frame-color: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(odd) { rotate: -1.2deg; }
|
||||
&:nth-child(even) { rotate: 1.2deg; }
|
||||
|
||||
&:hover {
|
||||
rotate: 0deg;
|
||||
translate: 0 -6px;
|
||||
}
|
||||
|
||||
// dashed arrow to the next frame
|
||||
@include lg {
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -26px;
|
||||
width: 22px;
|
||||
border-top: 3px dashed $ink;
|
||||
}
|
||||
}
|
||||
|
||||
&__nr {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 20px;
|
||||
border: 3px solid $ink;
|
||||
border-radius: 50%;
|
||||
background: var(--frame-color);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
|
||||
&::before {
|
||||
content: counter(frame);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 10px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
max-width: 880px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h1 {
|
||||
margin-bottom: 40px;
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
line-height: 1;
|
||||
@@ -16,7 +16,7 @@
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
h2 {
|
||||
display: inline-block;
|
||||
margin: 40px 0 12px;
|
||||
padding: 4px 12px;
|
||||
@@ -28,6 +28,11 @@
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.text__date {
|
||||
margin-top: 40px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
font-size: 17px;
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
@use "intro";
|
||||
@use "service";
|
||||
@use "service_item";
|
||||
@use "process";
|
||||
@use "work";
|
||||
@use "work_entry";
|
||||
@use "faq";
|
||||
@use "insta";
|
||||
@use "footer";
|
||||
@use "text";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user