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.

1 files changed, 87 insertions, 73 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;
 }