blob: 371ad343451e8cffb1d3bc259d914c4aa87330d2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
footer {
margin-top: 20px;
padding: 10px 0;
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;
}
|
