[question] 2 column setup for profile links, how?

[ricardo]

Hello beautiful people. I’ve come across https://8bit.lol/ and quite like the 2 column setup for the profile links.

Question: how can we achieve that with Markup?

[bye]

Hey there. I suggest you take a look at the source code (on mobile so i can’t check for you) or ask @8bit himself.

Now how I’d do it. I’d wrap two fa-li unordered list elements in a div with the “flex” display property, one styled to align right and one styled to align left. This would probably scale horribly to mobile so I suggest you wait for 8bit to see this lol

[8bit]

Hilariously I think you nailed exactly how I did it lol. I’ll copy in the relevant bits below, but I haven’t actually done any special handling for mobile, it just happens to not break because the amount of text on each line is small enough!

In the markdown:

--- Links ---

 <div id="links-left">

- https://social.lol/@8bit
- Links here

</div>
<div id="links-right">

- More links here

</div>

And then a bit of CSS in the custom styles section:

#links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

#links-left .fa-ul {
    margin-left: unset;
    margin-right: var(--fa-li-margin, 2.5em);
    padding-left: unset;
    padding-right: 0;
}

#links-left .fa-li {
    right: calc(var(--fa-li-width, 2em) * -1);
    left: unset;
}

#links-left li {
    text-align: right;
}

You could probably do it with flex too but I happened to try grid and it seemed to work

Hope that helps @ricardo!

[bye]

grid is probably better lol. Reminds me to do something similar on my own page.

[ricardo]

Awesome, thanks for sharing!

[erice]

what if i want all the icons to align left?

[8bit]

Totally missed this reply, it should be even simpler since the icons are on the left by default.

As before:

#links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

But you’ll probably need some padding so it feels balanced, this seems alright:

#links-left {
    margin-left: 40px;
}