mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
153 lines
3.2 KiB
SCSS
153 lines
3.2 KiB
SCSS
|
$sl-font-weight--light: 300 !default;
|
||
|
$sl-font-weight--regular: 400 !default;
|
||
|
$sl-font-weight--bold: 600 !default;
|
||
|
|
||
|
$sl-font-weights: (
|
||
|
light: $sl-font-weight--light,
|
||
|
regular: $sl-font-weight--regular,
|
||
|
bold: $sl-font-weight--bold,
|
||
|
);
|
||
|
|
||
|
@each $name,
|
||
|
$value in $sl-font-weights {
|
||
|
|
||
|
.sl-font-weight--#{$name} { font-weight: $value; }
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
$sl-font-size--small: sl-px-to-rem(12px) !default;
|
||
|
$sl-font-size--medium: sl-px-to-rem(16px) !default;
|
||
|
$sl-font-size--large: sl-px-to-rem(24px) !default;
|
||
|
$sl-font-size--x-large: sl-px-to-rem(32px) !default;
|
||
|
$sl-font-size--xx-large: sl-px-to-rem(48px) !default;
|
||
|
$sl-font-size--xxx-large: sl-px-to-rem(64px) !default;
|
||
|
$sl-font-size--xxxx-large: sl-px-to-rem(96px) !default;
|
||
|
|
||
|
$sl-font-sizes: (
|
||
|
small: $sl-font-size--small,
|
||
|
medium: $sl-font-size--medium,
|
||
|
large: $sl-font-size--large,
|
||
|
x-large: $sl-font-size--x-large,
|
||
|
xx-large: $sl-font-size--xx-large,
|
||
|
xxx-large: $sl-font-size--xxx-large,
|
||
|
xxxx-large: $sl-font-size--xxxx-large,
|
||
|
);
|
||
|
|
||
|
@each $name,
|
||
|
$value in $sl-font-sizes {
|
||
|
|
||
|
.sl-font-size--#{$name} { font-size: $value; }
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
$sl-font-family--text: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
|
||
|
$sl-font-family--display: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Roman', 'Droid Serif', Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
|
||
|
$sl-font-family--code: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', monospace, monospace !default;
|
||
|
|
||
|
$sl-font-families: (
|
||
|
text: $sl-font-family--text,
|
||
|
display: $sl-font-family--display,
|
||
|
code: $sl-font-family--code,
|
||
|
);
|
||
|
|
||
|
@each $name,
|
||
|
$value in $sl-font-families {
|
||
|
|
||
|
.sl-font-family--#{$name} { font-family: $value; }
|
||
|
}
|
||
|
|
||
|
body,
|
||
|
h5,
|
||
|
h6 { font-size: $sl-font-size--medium; }
|
||
|
|
||
|
body {
|
||
|
line-height: 1.5;
|
||
|
font-family: $sl-font-family--text;
|
||
|
text-rendering: optimizeLegibility;
|
||
|
}
|
||
|
|
||
|
a { text-decoration: none; }
|
||
|
|
||
|
strong,
|
||
|
b,
|
||
|
h5,
|
||
|
h6,
|
||
|
dt,
|
||
|
tbody th,
|
||
|
label { font-weight: $sl-font-weight--bold; }
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
caption,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6,
|
||
|
p,
|
||
|
ul,
|
||
|
ol,
|
||
|
dl,
|
||
|
figure {
|
||
|
margin: 1.5rem 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
ul,
|
||
|
ol,
|
||
|
dd { margin-left: 1.75rem; }
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
caption,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
font-weight: $sl-font-weight--regular;
|
||
|
line-height: 1.25;
|
||
|
}
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
caption { letter-spacing: -#{sl-px-to-em(.5px)}; }
|
||
|
|
||
|
h1,
|
||
|
h2 { font-weight: $sl-font-weight--light; }
|
||
|
|
||
|
h1 {
|
||
|
font-size: $sl-font-size--xx-large;
|
||
|
line-height: 1;
|
||
|
text-align: center;
|
||
|
|
||
|
@include sl-breakpoint--medium { font-size: $sl-font-size--xxx-large; }
|
||
|
|
||
|
@include sl-breakpoint--large { font-size: $sl-font-size--xxxx-large; }
|
||
|
}
|
||
|
|
||
|
h2,
|
||
|
caption,
|
||
|
legend,
|
||
|
h3,
|
||
|
thead th { font-family: $sl-font-family--display; }
|
||
|
|
||
|
h2,
|
||
|
caption, {
|
||
|
font-size: $sl-font-size--x-large;
|
||
|
|
||
|
@include sl-breakpoint--medium { font-size: $sl-font-size--xx-large; }
|
||
|
|
||
|
@include sl-breakpoint--large { font-size: $sl-font-size--xxx-large; }
|
||
|
}
|
||
|
|
||
|
h3,
|
||
|
h4 { font-size: $sl-font-size--large; }
|
||
|
|
||
|
.caps {
|
||
|
font-size: sl-px-to-em(14px);
|
||
|
text-transform: uppercase;
|
||
|
letter-spacing: sl-px-to-em(1px);
|
||
|
line-height: 0;
|
||
|
}
|