1
0
mirror of https://github.com/ipdb/website.git synced 2024-11-13 16:54:50 +01:00
website/_src/_assets/scss/_typography.scss

102 lines
1.5 KiB
SCSS

@import 'variables';
html {
font-size: $font-size-root;
-webkit-tap-highlight-color: transparent;
@media ($screen-lg) {
font-size: $font-size-root-lg;
}
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-normal;
line-height: $line-height;
color: $text-color;
background: #fff;
margin: 0;
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//
// Quickly fade in all content after
// fonts have loaded. Not quite useful,
// but beautiful.
//
.hero,
.header,
.section,
.content {
.row {
transition: .15s ease-out;
.wf-loading & {
opacity: 0;
}
.wf-active &,
.wf-inactive & {
opacity: 1;
}
}
}
//
// Headings
//
h1, h2, h3, h4, h5 { // stylelint-disable-line selector-list-comma-newline-after
color: $headings-color;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
margin-top: $spacer;
margin-bottom: $spacer;
&:first-child {
margin-top: 0;
}
}
p,
ul,
ol {
margin: 0 0 $spacer;
}
//
// Links
//
a {
color: $link-color;
&:hover,
&:focus {
color: lighten($link-color, 10%);
}
}
//
// Lists
//
ul,
ol {
margin-left: 0;
padding-left: $spacer;
}
.lead {
color: $brand-03;
font-size: $font-size-large;
}