mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 17:37:36 +01:00
ce9244b504
* Add more margin above headers to visually associate them with the prose below, rather than above. * Reduce the margin around normal block elements to more clearly associate them with one another. * Increase the size of prose and medium/large headers to make them easier to see. * Reduce the font weight of intro paragraphs to make them more visually distinct from the rest of the documentation. Based on @slimekat's suggestions. Closes #313
215 lines
4.0 KiB
SCSS
215 lines
4.0 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--x-small: sl-px-to-rem(14px) !default;
|
|
$sl-font-size--small: sl-px-to-rem(16px) !default;
|
|
$sl-font-size--medium: sl-px-to-rem(18px) !default;
|
|
$sl-font-size--large: sl-px-to-rem(20px) !default;
|
|
$sl-font-size--x-large: sl-px-to-rem(24px) !default;
|
|
$sl-font-size--xx-large: sl-px-to-rem(28px) !default;
|
|
$sl-font-size--xxx-large: sl-px-to-rem(32px) !default;
|
|
$sl-font-size--xxxx-large: sl-px-to-rem(80px) !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;
|
|
}
|
|
|
|
* { min-width: 0; }
|
|
|
|
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,
|
|
details {
|
|
margin: 1rem 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 2.5rem;
|
|
|
|
aside &, nav & { margin-top: 1rem; }
|
|
}
|
|
|
|
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 {
|
|
margin-top: 0;
|
|
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; }
|
|
|
|
nav,
|
|
footer { font-size: $sl-font-size--small; }
|
|
|
|
.caps {
|
|
font-size: sl-px-to-em(14px);
|
|
text-transform: uppercase;
|
|
letter-spacing: sl-px-to-em(1px);
|
|
line-height: 0;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: $sl-font-family--code;
|
|
}
|
|
|
|
code {
|
|
// Scale the code font size down, because the font itself is much larger.
|
|
font-size: ($sl-font-size--small / $sl-font-size--medium) * 1em;
|
|
line-height: 1;
|
|
|
|
nav &,
|
|
p & { white-space: nowrap; }
|
|
}
|
|
|
|
pre {
|
|
font-size: $sl-font-size--x-small;
|
|
padding: .75rem 1rem;
|
|
overflow: auto;
|
|
|
|
code {
|
|
font-size: 1em;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: {
|
|
right: auto;
|
|
left: auto;
|
|
};
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
hr {
|
|
margin: {
|
|
top: 3rem;
|
|
bottom: 3rem;
|
|
};
|
|
}
|
|
|
|
dd { margin: 0; }
|