rf-web/_sass/typography.scss
2020-08-17 22:11:19 +02:00

127 lines
1.4 KiB
SCSS

p,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
strong,
em,
label,
button,
small,
.separator {
font-family: $font;
color: $text;
margin-bottom: $size-16;
}
strong {
font-family: $font;
font-weight: 700;
}
em {
font-family: $font;
font-style: italic;
}
small {
font-size: smaller;
line-height: 1.5;
}
h1 {
font-size: 84px;
}
h1,
h2,
h3,
h4 {
font-family: $font-title;
// font-style: italic;
}
h1,
.h1 {
font-size: $size-64;
}
h2,
.h2 {
font-size: $size-32;
}
h3,
.h3 {
font-size: $size-24;
}
p,
.text-p {
font-size: $size-14;
font-family: $font;
line-height: $size-32;
}
a {
// color: $black;
font-weight: bold;
&:hover,
&:visited {
font-style: italic;
}
}
.separator {
max-width: $size-512 + $size-128;
display: flex;
justify-content: center;
@include margin-vertical($size-16);
.dot {
height: $size-8;
width: $size-8;
border-radius: 100%;
background-color: $black;
// mix-blend-mode: exclusion;
&.background-blue {
background-color: $highlight-darker;
}
&.background-white {
background-color: $white;
}
}
}
a {
color: $turquoise;
&:visited {
color: $highlight-darker;
}
&.with-url-arrow {
text-decoration: none;
&::before {
content: '';
}
}
}
.sup {
font-size: small;
vertical-align: super;
}
::selection {
background-color: $highlight;
color: $black;
}