Create global style for big sans serif title + change some responsive fonts

This commit is contained in:
2022-09-09 23:26:58 +02:00
parent 35b1e27e7c
commit 8cc38065ce
5 changed files with 21 additions and 19 deletions

View File

@@ -63,7 +63,22 @@
letter-spacing: -0.025em;
@include bp (sm) {
font-size: clamp(#{rem(28px)}, 7vw, #{rem(48px)});
font-size: rem(32px);
}
@include bp (md) {
font-size: clamp(#{rem(32px)}, 3.5vw, #{rem(48px)});
}
}
// Big - Sans Sefif
.title-big-sans {
font-size: rem(40px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
@include bp (sm) {
font-size: clamp(#{rem(40px)}, 6vw, #{rem(56px)})
}
}
@@ -190,7 +205,7 @@
font-size: rem(14px);
line-height: 1.3;
@include bp (sm) {
@include bp (md) {
font-size: rem(16px);
line-height: 1.4;
}

View File

@@ -19,18 +19,9 @@
width: 100%;
transform: translate3d(-50%, -50%, 0);
@include bp (sm) {
// top: 50%;
// left: 0;
// transform: none;
}
h1 {
font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
font-weight: 400;
text-shadow: 0px 8px 12px rgba(#000, 0.25);
text-align: center;
letter-spacing: -0.02em;
text-shadow: 0px 8px 12px rgba(#000, 0.25);
:global(span), :global(strong) {
color: #fff;

View File

@@ -80,18 +80,14 @@
transform: translate3d(-50%, -50%, 0);
@include bp (sm) {
// top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
top: 40%;
left: 0;
transform: none;
}
:global(h1) {
font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
font-weight: 400;
text-shadow: 0px 8px 12px rgba(#000, 0.25);
text-align: center;
letter-spacing: -0.02em;
text-shadow: 0px 8px 12px rgba(#000, 0.25);
:global(span), :global(strong) {
color: #fff;