diff options
author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-15 17:11:13 +0300 |
---|---|---|
committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-15 17:11:13 +0300 |
commit | d218a0fcdd23b399e6ef12b69175ed315e006d5d (patch) | |
tree | 225f085f99f71d71d75ed85354a654e98f13e3ae | |
parent | footer: lower padding (diff) | |
download | jekyll-theme-d218a0fcdd23b399e6ef12b69175ed315e006d5d.tar.gz jekyll-theme-d218a0fcdd23b399e6ef12b69175ed315e006d5d.zip |
footer: sort out item separation
-rw-r--r-- | _includes/jekyll-theme/footer.html | 14 | ||||
-rw-r--r-- | assets/css/jekyll-theme/footer.css | 31 |
2 files changed, 42 insertions, 3 deletions
diff --git a/_includes/jekyll-theme/footer.html b/_includes/jekyll-theme/footer.html index 9331784..35887d0 100644 --- a/_includes/jekyll-theme/footer.html +++ b/_includes/jekyll-theme/footer.html @@ -32,10 +32,18 @@ {% capture license_text %}License: <a href="{{ license_file }}">click here</a>{% endcapture %} {% endif %} -{% capture sep %}<span style="padding: 0 1em;">|</span>{% endcapture %} {% capture timestamp_text %}Last update: {{ site.time | date: '%-d %B %Y' }}{% endcapture %} -<div class="small text-muted"> - {% if license_text %}{{ license_text }}{{ sep }}{% endif %}{{ timestamp_text }} + +{% assign footer_items = '' | split: '' %} +{% if license_text %} + {% assign footer_items = footer_items | push: license_text %} +{% endif %} +{% assign footer_items = footer_items | push: timestamp_text %} + +<div class="small text-muted footer-items"> + {% for item in footer_items %} + <div class="footer-item">{{ item }}</div> + {% endfor %} </div> </div> diff --git a/assets/css/jekyll-theme/footer.css b/assets/css/jekyll-theme/footer.css index 00f06e9..371ad34 100644 --- a/assets/css/jekyll-theme/footer.css +++ b/assets/css/jekyll-theme/footer.css @@ -4,3 +4,34 @@ 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; + flex-wrap: wrap; + justify-content: center; + /* This is the .text-muted color. */ + background-color: #999; + column-gap: 1px; +} +.footer-item { + flex-grow: 1; + padding: 0 1em; + /* This is the navbar color. */ + background-color: #f3f8ff; +} |