Reduce the depth of the DOM and simplify the CSS a bit

Remove the main intermediate container. It wasn't acutally serving a purpose.
Remove some of the BEM-style classes that also weren't really doing anything.
This commit is contained in:
Eryn Wells 2024-10-13 23:13:16 -07:00
parent d17ec7f48f
commit 4c689f0f5c
8 changed files with 31 additions and 43 deletions

View file

@ -61,7 +61,7 @@ p + p {
/* Figures */ /* Figures */
{{- $elementsWithXLBlockMargins := "blockquote, .figure--code, .figure--image, .figure--youtube, .codeblock, .highlight, table" -}} {{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--code, .figure--image, .figure--youtube, .highlight" -}}
p + :is({{ $elementsWithXLBlockMargins }}) { p + :is({{ $elementsWithXLBlockMargins }}) {
margin-block-start: var(--space-xl); margin-block-start: var(--space-xl);

View file

@ -83,14 +83,12 @@ body {
} }
.main--list { .main--list {
.page-header, .page-header {
.main--list__page-list
{
grid-column: main-start / main-end; grid-column: main-start / main-end;
} }
.page-header, .page-header,
.main--list__content .main__content
{ {
margin-block-end: var(--space-xl); margin-block-end: var(--space-xl);
} }

View file

@ -1,18 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}"> <html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head> <head>
{{ partial "base/head.html" . }} {{- partial "base/head.html" . -}}
{{ block "head_css" . }}{{ end }} {{- block "head_css" . }}{{ end -}}
</head> </head>
<body> <body>
<header class="site-header"> <header class="site-header">
{{ partial "site/header.html" . }} {{ partial "site/header.html" . }}
</header> </header>
<div class="body__container">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
<footer class="site-footer"> <footer class="site-footer">
{{ partial "site/footer.html" . }} {{ partial "site/footer.html" . }}
</footer> </footer>
</div>
</body> </body>
</html> </html>

View file

@ -4,14 +4,10 @@
{{ partial "page_header.html" (dict "page" .) }} {{ partial "page_header.html" (dict "page" .) }}
</header> </header>
{{ with .Content -}} {{- .Content -}}
<div class="main--list__content content">{{ . }}</div>
{{- end }}
<div class="main--list__page-list"> {{- range .Pages.ByTitle -}}
{{ range .Pages.ByTitle }}
{{ .Render "page_summary" }} {{ .Render "page_summary" }}
{{ end }} {{- end -}}
</div>
</main> </main>
{{ end }} {{ end }}

View file

@ -4,14 +4,14 @@
{{ partial "page_header.html" (dict "page" .) }} {{ partial "page_header.html" (dict "page" .) }}
</header> </header>
{{ if .Params.renderTableofContents | default false }} {{ if .Params.tableOfContents | default .Params.renderTableofContents | default false -}}
<details> <details>
<summary>{{ i18n "tableOfContents" }}</summary> <summary>{{ i18n "tableOfContents" }}</summary>
{{ .TableOfContents }} {{ .TableOfContents }}
</details> </details>
{{ end }} {{- end }}
{{ .Content }} {{- .Content -}}
<footer class="page-footer"> <footer class="page-footer">
{{ partial "page/footer.html" . }} {{ partial "page/footer.html" . }}

View file

@ -4,11 +4,9 @@
{{ partial "page_header.html" (dict "page" . "title" .Title) }} {{ partial "page_header.html" (dict "page" . "title" .Title) }}
</header> </header>
{{ with .Content -}} {{- .Content -}}
<div class="main--list__content">{{ . }}</div>
{{- end }}
<div class="main--list__page-list"> <div class="main__page-list">
{{ range .Pages.ByTitle }} {{ range .Pages.ByTitle }}
{{ .Render "page_summary" }} {{ .Render "page_summary" }}
{{ end }} {{ end }}

View file

@ -5,15 +5,13 @@
</header> </header>
{{- with .Content }} {{- with .Content }}
<div class="main--list__content">{{ . }}</div> <div class="main__content">{{ . }}</div>
{{ end -}} {{ end -}}
<div class="main--list__page-list">
{{ range .Pages.ByDate.Reverse -}} {{ range .Pages.ByDate.Reverse -}}
{{ if or (not .Draft) hugo.IsDevelopment }} {{ if or (not .Draft) hugo.IsDevelopment }}
{{ .Render "page_summary" }} {{ .Render "page_summary" }}
{{ end }} {{ end }}
{{- end }} {{- end }}
</div>
</main> </main>
{{ end }} {{ end }}

View file

@ -1,9 +1,9 @@
{{- with (partial .cssResource .page) }} {{- with (partial .cssResource .page) }}
{{- if eq hugo.Environment "development" }} {{- if eq hugo.Environment "development" -}}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }} {{- else -}}
{{- with . | minify | fingerprint }} {{- with . | minify | fingerprint -}}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }} {{- end -}}
{{- end }} {{- end -}}
{{- end }} {{- end -}}