Eryn Wells
1ec5084c66
Grab variable woff2 files from GitHub. https://github.com/adobe-fonts/source-code-pro/
115 lines
2.1 KiB
CSS
115 lines
2.1 KiB
CSS
{{- $base := (index . "Base") | default 1 -}}
|
|
{{- $unit := (index . "Unit") | default "rem" -}}
|
|
{{- $factor := (index . "Factor") | default 1.200 -}}
|
|
{{- $scale := partial "base/_size_scale.html" . }}
|
|
|
|
|
|
|
|
|
|
|
|
/********
|
|
# FONTS
|
|
********/
|
|
|
|
@font-face{
|
|
font-family: source-code-pro;
|
|
font-weight: 200 900;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
src: url({{ (resources.Get "fonts/sourceCodePro-variable.woff2").Permalink }});
|
|
}
|
|
|
|
@font-face{
|
|
font-family: source-code-pro;
|
|
font-weight: 200 900;
|
|
font-style: italic;
|
|
font-stretch: normal;
|
|
src: url({{ (resources.Get "fonts/sourceCodePro-italic-variable.woff2").Permalink }});
|
|
}
|
|
|
|
:root {
|
|
--font-family-sans: system-ui, Arial, sans-serif;
|
|
--font-family-serif: Georgia, serif;
|
|
--font-family-monospace: source-code-pro, monospace;
|
|
|
|
--font-family-body: var(--font-family-sans);
|
|
--font-family-heading: var(--font-family-monospace);
|
|
|
|
--text-base: {{ $base }}{{ $unit }};
|
|
{{ range $scale -}}
|
|
--text-{{ .Name }}: calc(var(--text-base) * pow({{ $factor }}, {{ .Value }}));
|
|
{{- end }}
|
|
}
|
|
|
|
|
|
/* Font size utility classes */
|
|
{{ range $scale }}
|
|
.text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
|
|
{{- end }}
|
|
.text--mono { font-family: var(--font-family-monospace); }
|
|
.text--serif { font-family: var(--font-family-serif); }
|
|
.text--sans { font-family: var(--font-family-sans); }
|
|
|
|
|
|
html {
|
|
font-family: var(--font-family-body);
|
|
font-size: 100%;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
body {
|
|
font-size: clamp(100%, 3vw, 130%);
|
|
}
|
|
|
|
|
|
/***********
|
|
## HEADINGS
|
|
***********/
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family-heading);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-xxl);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--text-l);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--text-m);
|
|
}
|
|
|
|
p {
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
sup {
|
|
font-size: var(--text-xs);
|
|
line-height: 1;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--text-xxl);
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: lighter;
|
|
font-family: var(--font-family-serif);
|
|
}
|
|
|
|
small,
|
|
.text--small
|
|
{
|
|
color: var(--text-color-secondary);
|
|
font-weight: normal;
|
|
font-size: var(--text-s);
|
|
letter-spacing: 0.01em;
|
|
}
|