From 89889841de646ef690e8cc2c530fa808868cafb6cbbe52ccc1cd618d7abbc972 Mon Sep 17 00:00:00 2001 From: Nicholas Johnson 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 . + You should have received a copy of the GNU General Public License + along with this program. If not, see . */ -* { - 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: ") -}} -{{ $emoji }}{{ .Text | safeHTML }} +{{ $emoji }}{{ .Text | safeHTML }} 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 @@ {{ partial "head.html" . }} - + {{ 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" -}} {{- if (.Page.Params.pageinfo | default true) }}

{{ partial "pageinfo" . }}

{{ 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 @@

{{ .Site.Params.indexIntro }}

Navigation Links

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 @@ -