108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
{{/*
|
|
spacing.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.618 -}}
|
|
{{- $scale := partial "base/_size_scale.html" . }}
|
|
|
|
|
|
|
|
|
|
|
|
/***********
|
|
# SPACING
|
|
***********/
|
|
|
|
|
|
:root {
|
|
--space-base: {{ $base }}{{ $unit }};
|
|
{{- range $scale }}
|
|
--space-{{ .Name }}: calc(var(--space-base) * pow({{ $factor }}, {{ .Value }}));
|
|
{{- end }}
|
|
|
|
--fixed-space-base: 1rem;
|
|
{{- range $scale }}
|
|
--fixed-space-{{ .Name }}: calc(var(--fixed-space-base) * pow({{ $factor }}, {{ .Value }}));
|
|
{{- end }}
|
|
|
|
--space-paragraph: var(--space-m);
|
|
}
|
|
|
|
|
|
{{ range $scale }}
|
|
{{ printf "/* Spacing utility classes: %s */" .Name }}
|
|
.margin-block-start--{{ .Name }} { margin-block-start: var(--space-{{ .Name }}); }
|
|
.margin-block-end--{{ .Name }} { margin-block-end: var(--space-{{ .Name }}); }
|
|
.margin-inline-start--{{ .Name }} { margin-inline-start: var(--space-{{ .Name }}); }
|
|
.margin-inline-end--{{ .Name }} { margin-inline-end: var(--space-{{ .Name }}); }
|
|
{{ end }}
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-block: var(--space-l) var(--space-m);
|
|
}
|
|
|
|
hr {
|
|
margin-block: var(--space-m);
|
|
}
|
|
|
|
p + p {
|
|
margin-block-start: var(--space-paragraph);
|
|
}
|
|
|
|
|
|
/* Figures */
|
|
|
|
{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .codeblock, .highlight" -}}
|
|
|
|
p + :is({{ $elementsWithXLBlockMargins }}) {
|
|
margin-block-start: var(--space-xl);
|
|
}
|
|
|
|
:is({{ $elementsWithXLBlockMargins }}):has(+ p) {
|
|
margin-block-end: var(--space-xl);
|
|
}
|
|
|
|
.codeblock {
|
|
--padding: var(--space-m);
|
|
|
|
margin-inline: calc(-1 * var(--padding));
|
|
padding: var(--padding);
|
|
}
|
|
|
|
.figure--image {
|
|
--padding: var(--space-m);
|
|
margin-inline-start: calc(-1 * var(--padding));
|
|
width: calc(100% + 2 * var(--padding));
|
|
|
|
figcaption {
|
|
margin-inline: var(--padding);
|
|
}
|
|
}
|
|
|
|
/* Type size classes */
|
|
|
|
.title {
|
|
margin-block-end: var(--space-l);
|
|
}
|
|
|
|
.subtitle {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
.heading {
|
|
margin-block-start: var(--space-l);
|
|
}
|
|
|
|
.heading:has(+ p) {
|
|
margin-block-end: var(--space-xs);
|
|
}
|
|
|
|
.subheading {
|
|
}
|
|
|
|
|