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 | |
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
-rw-r--r-- | _includes/jekyll-theme/footer.html | 17 | ||||
-rw-r--r-- | assets/css/jekyll-theme/footer.css | 32 |
2 files changed, 21 insertions, 28 deletions
diff --git a/_includes/jekyll-theme/footer.html b/_includes/jekyll-theme/footer.html index 00a13cc..9c13534 100644 --- a/_includes/jekyll-theme/footer.html +++ b/_includes/jekyll-theme/footer.html @@ -42,10 +42,21 @@ {% assign footer_items = footer_items | push: timestamp_text %} {% assign footer_items = footer_items | push: theme_text %} +{% capture sep %}<span class="footer-item-sep">|</span>{% endcapture %} <div class="small text-muted footer-items"> - {% for item in footer_items %} - <div class="footer-item">{{ item }}</div> - {% endfor %} + {%- comment -%} + Make sure to collapse the Liquid whitespace here. + If you replace the <div>s with <span>s and don't collapse whitespace, + extra spaces will be inserted between elements. + {%- endcomment -%} + {%- for item in (1..footer_items.size) -%} + {%- assign idx = item | minus: 1 -%} + {%- if item == 1 -%} + <div class="footer-item">{{ footer_items[idx] }}</div> + {%- else -%} + <div class="footer-item">{{ sep }}{{ footer_items[idx] }}</div> + {%- endif -%} + {%- endfor -%} </div> </div> 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; } |