hugo-theme-termlite/assets/css/010_typography.css

{{/*
  typography.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}

{{- $base := (index . "Base") | default 1 -}}
{{- $unit := (index . "Unit") | default "rem" -}}
{{- $factor := (index . "Factor") | default 1.200 -}}
{{- $scale := partial "base/_size_scale.html" . }}





/********
 # FONTS
 ********/

@import url("https://use.typekit.net/fji8aoy.css");

{{ with resources.Get "fonts/merriweather.woff2" -}}
  @font-face {
    font-family: "merriweather";
    src: url("{{ .Permalink }}");
  }
{{- end }}

{{ with resources.Get "fonts/merriweather-italic.woff2" -}}
  @font-face {
    font-family: "merriweather";
    font-style: italic;
    src: url("{{ .Permalink }}");
  }
{{- end }}

:root {
  /* --font-family-heading: "rockwell", 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 -}}
    --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: var(--text-base-size);
  line-height: 1.45;
}


/***********
 ## HEADINGS
 ***********/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--text-xxl);
  letter-spacing: 0.05em;
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: 0.03em;
}

h3 {
  font-size: var(--text-l);
}

h4 {
  font-size: var(--text-m);
}


header {
  font-weight: bold;
}

p {
  letter-spacing: 0.01em;
}

p, pre {
  font-size: var(--text-m);
}

sup {
  font-size: 60%;
}


.title {
  font-size: var(--text-xxl);
  letter-spacing: 0.05em;
}

.subtitle {
  font-weight: lighter;
}

figcaption,
small,
.text--small
{
  color: var(--gray4);
  font-weight: normal;
  font-size: var(--text-s);
  letter-spacing: 0.01em;
}