aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorEgor Tensin <Egor.Tensin@gmail.com>2022-04-15 17:11:13 +0300
committerEgor Tensin <Egor.Tensin@gmail.com>2022-04-15 17:11:13 +0300
commitd218a0fcdd23b399e6ef12b69175ed315e006d5d (patch)
tree225f085f99f71d71d75ed85354a654e98f13e3ae
parentfooter: lower padding (diff)
downloadjekyll-theme-d218a0fcdd23b399e6ef12b69175ed315e006d5d.tar.gz
jekyll-theme-d218a0fcdd23b399e6ef12b69175ed315e006d5d.zip
footer: sort out item separation
Diffstat (limited to '')
-rw-r--r--_includes/jekyll-theme/footer.html14
-rw-r--r--assets/css/jekyll-theme/footer.css31
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;
+}