From 89889841de646ef690e8cc2c530fa808868cafb6cbbe52ccc1cd618d7abbc972 Mon Sep 17 00:00:00 2001
From: Nicholas Johnson <nick@nicholasjohnson.ch>
Date: Thu, 8 Dec 2022 00:00:00 +0000
Subject: 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.
---
assets/css/style.css | 160 ++++++++++++++++--------------
layouts/_default/_markup/render-link.html | 2 +-
layouts/_default/baseof.html | 2 +-
layouts/_default/single.html | 2 +-
layouts/index.html | 4 +-
layouts/partials/footer.html | 4 +-
layouts/partials/header.html | 4 +-
layouts/partials/metadata.html | 4 +-
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 }}
--
cgit v1.2.3