CSS Modification Help

Help
1

Hello,

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">
          <b>Outline</b>
          {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=page.sidebar %}
      </div>
    {% endif %}
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

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:

Screenshot%20from%202018-12-15%2011-48-14
Screenshot from 2018-12-15 11-48-14.png1849×861 112 KB

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?

Thanks!