diff options
author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-18 10:52:55 +0200 |
---|---|---|
committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-18 10:52:55 +0200 |
commit | 236fc17283b4b58fb73314790d85d80c72e68e70 (patch) | |
tree | 86c374160cedde114e338f796019d53ed1236612 /assets/css/jekyll-theme/footer.css | |
parent | posts: date always beneath the header on my phone (diff) | |
download | jekyll-theme-236fc17283b4b58fb73314790d85d80c72e68e70.tar.gz jekyll-theme-236fc17283b4b58fb73314790d85d80c72e68e70.zip |
footer: revert the crazy CSS hack
Diffstat (limited to '')
-rw-r--r-- | assets/css/jekyll-theme/footer.css | 32 |
1 files changed, 7 insertions, 25 deletions
diff --git a/assets/css/jekyll-theme/footer.css b/assets/css/jekyll-theme/footer.css index 371ad34..2baaece 100644 --- a/assets/css/jekyll-theme/footer.css +++ b/assets/css/jekyll-theme/footer.css @@ -4,34 +4,16 @@ footer { border-width: 1px 0; border-style: solid; } -/* - * I'm in awe of this absolutely disgusting hack that I came up with. - * The thing is, I have a number of "items" in my footer, which are - * essentially pieces of text. - * - * I want them separated with a vertical line. At first, I just placed a - * literal vertical bar symbol | between items. This worked well enough until - * items started to overflow. So I tried to use border-left on all but the - * first item, which got rid of the inconsistent wrapping of the | symbol. But - * I didn't want the wrapped items to have a border, I just wanted the border - * between items on the same line. - * - * The solution you can see below. The flex container has a background-color, - * and a column gap of 1px, emulating a border. The items have the same - * background-color as the footer, which concludes the trick. I'm sure it'll - * break, let's see how. - */ + .footer-items { - display: inline-flex; + display: flex; flex-wrap: wrap; justify-content: center; - /* This is the .text-muted color. */ - background-color: #999; - column-gap: 1px; + column-gap: 1em; +} +.footer-item-sep { + margin-right: 1em; } .footer-item { - flex-grow: 1; - padding: 0 1em; - /* This is the navbar color. */ - background-color: #f3f8ff; + white-space: nowrap; } |