CSS Modification Help


I’ve been running a blog here: https://0xdf.gitlab.io/. It’s Jekyll with minima theme, though modified a bit at this point.

If you look at my posts, you’ll see that almost all start with a table of contents at the top. What I’d like to do is move that so that it’s off to the left side of the content. And I did that, sort of. I’ve modified the default.html layout to look like this:

    <main class="page-content sidebar-container" aria-label="Content">
    {% if page.sidebar %}
      <div class="sidebar">
          {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=page.sidebar %}
    {% endif %}
      <div class="wrapper">
        {{ content }}

And have custom.css that’s loaded by the page:

.sidebar {
    height: 75vh;
    position: -webkit-sticky;
    position: sticky;
    top: 20%;
    margin-left: 10px;

.sidebar a {
    padding: 6px 8px 6px 10px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    color: #e6e6e6;

.sidebar ul {
    list-style: none;
    margin-left: 5px;

.post-by-sidebar {
    /* width: 80% */

.sidebar-container {
    display: flex;
    justify-content: space-between;

This gets me close, something like this:

The TOC has the desired behavior of staying in place as the user scrolls up and down. There’s two things I’d like to change:

  1. It’s stuck way to the left. I can push it over using padding/margins, but that only works for a single screen size. I’d like it to float towards the main column and push up against it, with a defined padding.
  2. It pushed the center column off-center. Before I started messing around, the left side of the content was aligned with the page title.

Any suggestions to achieve what I’m looking to do?