Complete overhaul of the CSS

I made it as BEM-compliant as I could. Making it fully BEM-compliant is
impossible since Hugo doesn't have HTML render hooks for certain tags.

8 files changed, 98 insertions, 84 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index 2db0c45..5546187 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,119 +1,133 @@
 /*
-    hugo-theme-journal  Hugo theme for my journal
-    Copyright (C) 2022  Nicholas Johnson
+	hugo-theme-journal  Hugo theme for my journal
+	Copyright (C) 2022  Nicholas Johnson
 
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU General Public License
+	along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-* {
-    margin: 0;
-    padding: 0;
-    font-size: 18px;
+h1 {
+	color: #ff0000;
+	font-size: 22px;
 }
 
-body {
-    line-height: 1.4;
-    background-color: black;
-    color: lightgray;
-    padding: 30px;
-    font-family: Arial, Helvetica, sans-serif;
-    margin: 0 auto; /* remove default styling */
+h2 {
+	color: #66ff00;
+	font-size: 20px;
 }
 
-@media only screen and (min-width: 40em) {
-    body {
-        max-width: 40em;
-    }
+h3, h4, h5, h6 {
+	color: #ff007f;
+	font-size: 18px;
 }
 
-h1 { color: #ff0000; font-size: 22px; }
-h2 { color: #66ff00; font-size: 20px; }
-h3 { color: #ff007f; font-size: 18px; }
-h4 { color: #ff007f; font-size: 18px; }
-h5 { color: #ff007f; font-size: 18px; }
-h6 { color: #ff007f; font-size: 18px; }
+h1, h2, h3, h4, h5, h6 {
+	margin: 0;
+}
 
 p {
-    overflow-wrap: break-word;
+	margin-top: 0;
+	overflow-wrap: break-word;
 }
 
-a {
-    color: #0091ea;
-    text-decoration: none; /* remove default styling */
+pre {
+	color: #ffffba;
+	line-height: normal;
+	overflow: auto;
+	margin-bottom: 1.4em;
 }
 
-a:hover {
-    color: black;
-    background-color: #004eff;
+blockquote {
+	background-color: #272822;
+	font-style: italic;
+	margin: 1.4em;
+	padding: 0.5em;
 }
 
-pre {
-    color: #ffffba;
-    overflow: auto;
-    line-height: normal;
+blockquote p {
+	margin-bottom: 0;
 }
 
-body > header {
-    margin-bottom: 2em;
+ol {
+	list-style: decimal inside none;
+	padding: 0;
 }
 
-#logo {
-    line-height: normal;
+ul {
+	list-style: disc inside none;
+	padding: 0;
 }
 
-body > footer {
-    margin-top: 2em;
+p, ul, ol, blockquote {
+	margin-bottom: 1.4em;
 }
 
-body > footer p {
-    margin-bottom: 0em;
+.body {
+	background-color: black;
+	color: lightgray;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 18px;
+	line-height: 1.4;
+	margin: 0 auto;
+	padding: 1.4em 0;
 }
 
-blockquote {
-    padding: 0.5em;
-    background-color: #272822;
-    margin-left: 1.5em;
-    margin-right: 1.5em;
-    font-style: italic;
+@media only screen and (min-width: 40em) {
+	.body {
+		max-width: 40em;
+	}
 }
 
-blockquote p {
-    margin-bottom: 0em;
+.footer {}
+
+.footer__text {
+	margin-bottom: 0;
+	margin-top: 2em;
 }
 
-ol {
-    list-style: decimal inside none;
+.highlight {
+	margin-bottom: 1.4em;
+	overflow: auto;
 }
 
-ul {
-    list-style: disc inside none;
+.highlight pre {
+	margin: 0;
 }
 
-p, main > pre, ul, ol, blockquote, .highlight {
-    margin-bottom: 1.4em;
+.link {
+	color: #0091ea;
+	text-decoration: none;
 }
 
-nav ul {
-    list-style: none;
+.link:hover {
+	background-color: #004eff;
+	color: black;
 }
 
-#return {
-    margin-bottom: 2em;
+.list {
+	list-style: none;
+	margin-top: 0;
 }
 
 @media (pointer: coarse) {
-    .navlink {
-        margin-bottom: 1em;
-    }
+	.list__item {
+		margin-bottom: 1em;
+	}
+}
+
+.logo {}
+
+.logo__text {
+	margin-bottom: 2em;
+	margin-top: 0;
 }
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index 4d300ab..b62e944 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1,2 +1,2 @@
 {{ $emoji := cond (.Page.Params.nolinkemoji | default false) "" (emojify ":link: ") -}}
-<a href="{{ .Destination | safeURL }}" rel="noreferrer">{{ $emoji }}{{ .Text | safeHTML }}</a>
+<a class="link" href="{{ .Destination | safeURL }}" rel="noreferrer">{{ $emoji }}{{ .Text | safeHTML }}</a>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index c896b31..8129bb3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   {{ partial "head.html" . }}
-  <body>
+  <body class="body">
     {{ partial "header.html" . }}
     {{ block "main" . }}{{ end }}
     {{ partial "footer.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a1f9ea3..14d81f5 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" -}}
 <nav>
-  <p id="return"><a href="/" rel="noreferrer">🔗 Return to homepage</a></p>
+  <p><a class="link" href="/" rel="noreferrer">🔗 Return to homepage</a></p>
 </nav>
 {{- if (.Page.Params.pageinfo | default true) }}
 <p>{{ partial "pageinfo" . }}</p>{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index a56996d..72b0e05 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,9 +4,9 @@
   <p>{{ .Site.Params.indexIntro }}</p>
   <h2>Navigation Links</h2>
   <nav>
-    <ul>
+    <ul class="list">
     {{- range .Site.Menus.main }}
-	<li class="navlink"><a href="{{ .URL }}" rel="noreferrer">{{ emojify ":link:" }} {{ .Name }}</a></li>
+	<li class="list__item"><a class="link" href="{{ .URL }}" rel="noreferrer">{{ emojify ":link:" }} {{ .Name }}</a></li>
     {{- end }}
     </ul>
   </nav>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index daf7cd3..8a59ca9 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer>
-  <p>Unless otherwise noted, the writing in this journal is licensed under {{ $.Site.Copyright }}<br>
+<footer class="footer">
+  <p class="footer__text">Unless otherwise noted, the writing in this journal is licensed under {{ $.Site.Copyright }}<br>
 Copyright {{ .Site.Params.beginCopyrightYear }}-{{ now.Format "2006" }} {{ $.Site.Author.name }}</p>
 </footer>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d974142..c1084d6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,3 @@
-<header>
-  <pre id="logo">{{ readFile "/content/templates/logo.txt" }}</pre>
+<header class="logo">
+  <pre class="logo__text">{{ readFile "/content/templates/logo.txt" }}</pre>
 </header>
\ No newline at end of file
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index acfd2d7..ed41518 100644
--- a/layouts/partials/metadata.html
+++ b/layouts/partials/metadata.html
@@ -2,7 +2,7 @@
 <article>
   <header>
     <p>{{ partial "pageinfo" . }}<br>
-	<a href="{{ .RelPermalink }}" rel="noreferrer">{{ emojify ":link:" }} {{ .Title }}</a></p>
+	<a class="link" href="{{ .RelPermalink }}" rel="noreferrer">{{ emojify ":link:" }} {{ .Title }}</a></p>
   </header>
 </article>
-{{ end }}
\ No newline at end of file
+{{ end }}