aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorEgor Tensin <Egor.Tensin@gmail.com>2022-04-18 10:52:55 +0200
committerEgor Tensin <Egor.Tensin@gmail.com>2022-04-18 10:52:55 +0200
commit236fc17283b4b58fb73314790d85d80c72e68e70 (patch)
tree86c374160cedde114e338f796019d53ed1236612
parentposts: date always beneath the header on my phone (diff)
downloadjekyll-theme-236fc17283b4b58fb73314790d85d80c72e68e70.tar.gz
jekyll-theme-236fc17283b4b58fb73314790d85d80c72e68e70.zip
footer: revert the crazy CSS hack
-rw-r--r--_includes/jekyll-theme/footer.html17
-rw-r--r--assets/css/jekyll-theme/footer.css32
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;
}