{{/*
  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-body: system-ui, Arial, sans-serif;
  /* --font-family-heading: "rockwell", serif; */
  --font-family-heading: "merriweather", Georgia, serif;
  --font-family-monospace: "source-code-pro", monospace;

  --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 }}


a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

@media (prefers-reduce-motion: reduce) {
  a {
    text-decoration: underline;
  }
}

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);
}

figcaption, small {
  font-size: var(--text-s);
  letter-spacing: 0.01em;
  line-height: 1;
}

sup {
  font-size: 60%;
}


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

.subtitle {
  font-weight: lighter;
}