$base-font-size: 17;
$fw-light: 300; $fw-regular: 400; $fw-medium: 500; $fw-bold: 700; $fw-black: 900;
@mixin antialiasing($type:antialiased) {
/* antialiased, none, subpixel-antialiased*/ @if $type == antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @else if $type == none { -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto; } @else { -moz-osx-font-smoothing: auto; }
}
@mixin rubik {
font-family: "Rubik", sans-serif;
}
@mixin noto-sans-tc {
font-family: "Noto Sans TC", sans-serif;
}
@mixin font-size-to-rem($number) {
font-size: ($number * 1rem) / $base-font-size;
}
@mixin line-height-to-rem($number) {
line-height: $number * 1rem / $base-font-size;
}
@mixin h1 {
color: $slate; font-weight: $fw-medium; margin: 1.75rem 0 0; @include font-size-to-rem(33); @include line-height-to-rem(44); &.title { line-height: normal; font-weight: $fw-light; } @media screen and (min-width: 40rem) { @include font-size-to-rem(62); line-height: normal; letter-spacing: -0.3px; &.title { @include font-size-to-rem(50); letter-spacing: 0; } }
}
@mixin h2 {
color: $slate; font-weight: $fw-medium; margin: 1.25rem 0 0.875rem; @include font-size-to-rem(40); line-height: normal;
}
@mixin h3 {
color: $slate; font-weight: $fw-medium; margin: 1.25rem 0 0.875rem; @include font-size-to-rem(30); @include line-height-to-rem(42);
}
@mixin h4 {
font-weight: $fw-regular; margin: 1.25rem 0 0.875rem; @include font-size-to-rem(24); @include line-height-to-rem(34);
}
@mixin h5 {
margin: 1rem 0 0.875rem; font-weight: $fw-medium; @include font-size-to-rem(20); @include line-height-to-rem(27);
}
@mixin display-1 {
@include font-size-to-rem(33); @include line-height-to-rem(39); font-weight: $fw-light; letter-spacing: 0; @media screen and (min-width: $mq-medium) { @include font-size-to-rem(72); @include line-height-to-rem(80.2); letter-spacing: -0.12rem; }
}
@mixin title-5 {
@include font-size-to-rem(20); @include line-height-to-rem(27); font-weight: $fw-medium; &.zh-TW { @include line-height-to-rem(30); @include antialiasing; font-weight: $fw-bold; letter-spacing: 0.12rem; }
}
@mixin body-short {
font-size: 1rem; font-weight: $fw-regular; @include line-height-to-rem(24); &.zh-TW { @include font-size-to-rem(18); @include line-height-to-rem(30); letter-spacing: 0.06rem; }
}
@mixin small-text {
@include font-size-to-rem(14); @include line-height-to-rem(18); font-weight: $fw-regular;
}
@mixin big-description {
@include font-size-to-rem(20); @include line-height-to-rem(29); font-weight: $fw-regular; &.sfgov-translate-lang-zh-TW { @include line-height-to-rem(36); letter-spacing: 0.12rem; } @media screen and (min-width: $mq-medium) { @include font-size-to-rem(24); @include line-height-to-rem(36); &.sfgov-translate-lang-zh-TW { @include font-size-to-rem(26); @include line-height-to-rem(42); letter-spacing: 0.12rem; } }
}