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 ++++++++++++++++++++++++++++----------------------- 1 file changed, 87 insertions(+), 73 deletions(-) (limited to 'assets/css') 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; } -- cgit v1.2.3