eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Break out font family sets into separate variables based on style

Browse source 
Make CSS variables for sans, serif, and mono font families. Create utility classes
to apply them to an element.

Add a .text--small style to style an element like <small>.
This commit is contained in:
Eryn Wells 2024-07-06 10:21:54 -07:00
parent 975b56a6be
commit 4328f31ad2
1 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

26
assets/css/010_typography.css
View file

@ -35,11 +35,14 @@
{{- end }}
:root {
--font-family-body: system-ui, Arial, sans-serif;
/* --font-family-heading: "rockwell", serif; */
--font-family-heading: "merriweather", Georgia, serif;
--font-family-sans: system-ui, Arial, sans-serif;
--font-family-serif: "merriweather", Georgia, serif;
--font-family-monospace: "source-code-pro", monospace;
--font-family-body: var(--font-family-sans);
--font-family-heading: var(--font-family-serif);
--text-base-size: 125%;
--text-base: {{ $base }}{{ $unit }};
{{ range $scale -}}
@ -52,6 +55,9 @@
{{ 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 {
@ -100,12 +106,6 @@ p, pre {
font-size: var(--text-m);
}
figcaption, small {
font-size: var(--text-s);
letter-spacing: 0.01em;
line-height: 1;
}
sup {
font-size: 60%;
}
@ -119,3 +119,13 @@ sup {
.subtitle {
font-weight: lighter;
}
figcaption,
small,
.text--small
{
color: var(--gray4);
font-weight: normal;
font-size: var(--text-s);
letter-spacing: 0.01em;
}