Title and other CSS fixes

This commit is contained in:
2020-02-20 19:03:47 +01:00
parent 2fe870847a
commit b084629b37
4 changed files with 34 additions and 11 deletions

View File

@@ -101,19 +101,24 @@ button {
// Bigger version
&--big {
font-size: rem(56px);
font-size: rem(40px);
@include breakpoint (m) {
font-size: rem(56px);
}
@include breakpoint (sm) {
font-size: pxVW(160);
}
@include breakpoint (md) {
font-size: rem(160px);
}
em {
display: inline-block;
font-size: rem(20px);
font-size: 0.35em;
@include breakpoint (sm) {
@include breakpoint (md) {
margin-left: -8px;
font-size: rem(56px);
}
}
}
@@ -121,11 +126,21 @@ button {
// Inline version
&--inline {
display: flex;
align-items: baseline;
flex-direction: column;
align-items: center;
justify-content: center;
em {
margin: 0 16px 0 24px;
margin: 8px 0 4px;
@include breakpoint (sm) {
margin: 2px 16px 0 24px;
}
}
@include breakpoint (sm) {
flex-direction: row;
align-items: baseline;
}
}
}

View File

@@ -3,24 +3,33 @@
position: relative;
display: inline-block;
margin: 0 6px;
padding: 0 8px;
padding: 0 4px;
color: $color-secondary;
text-decoration: none;
transition: color 200ms $ease-cubic;
@include breakpoint (sm) {
padding: 0 8px;
}
// Line
&:after {
content: "";
position: absolute;
z-index: -1;
background-color: rgba($color-secondary, 0.22);
height: 14px;
width: 100%;
bottom: 5px;
height: 8px;
bottom: 3px;
left: 0;
border-radius: 50vh;
transition: all 200ms $ease-cubic;
transition-delay: 50ms;
@include breakpoint (sm) {
height: 14px;
bottom: 5px;
}
}
// Icon