devLog: 2020-04-26

nightCasper updates: Sync from parent repository; scrolling functionality added to flexbox sidebar (and scrollbar hidden).

nightCasper Updates

Relatively minor updates to nightCasper this month due to my efforts being focused on other projects (exciting new articles on the way!). nightCasper was synced with its upstream (source) repository using the procedure outline in my previous devLog post.

Scrolling Functionality Added to Sidebar

The most noticeable change this past nightCasper update is the addition of scrolling functionality to the flexbox child (which creates the table of contents sidebar on the left). This was made necessary by my latest tutorial on how to install a WireGuard VPN server on Ubuntu. The article has so many headers and subheaders that sidebar overfilled with no way to scroll and see the contents at the bottom.

Here's the updated code found in assets/css/screen.css:

#sidebar-container {
    width: 17vw; /* Set the width so it always stays the same */
    /* flex: 0 1 195px; */
}

#sidebar {
    width: 17vw;
    padding-top: 75px;
    height: 100vh; /* full height of the window */
    position: fixed;
    overflow-y: auto; /* add scrollbar to sidebar if ToC gets too long */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#sidebar::-webkit-scrollbar {
    display: none;
}

In the above code, I've simply added overflow-y: auto to take the content (i.e. the table of contents) and add a scrollbar when the contents overflow the container.

Make Scrollbar Invisible

By itself, overflow-y: auto creates a hideous default scrollbar. While that works nicely on the body content (such as the scrollbar you see on the right side of this post), it looks horrible when it's running down the middle of your page, so I simply hid it with the following:

-ms-overflow-style: none; /* Internet Explorer */
    scrollbar-width: none; /* Firefox */

You've got to love the lack of web browser standardization. For WebKit browsers (i.e. Chrome), we hide the scrollbar with ::-webkit-scrollbar pseudo-element selector:

#sidebar::-webkit-scrollbar {
    display: none;
}

I also bumped up the width of the Table of Contents sidebar from 15vw to 17vw since my headers to give more real estate to the table of contents.

Let me know what you think of the changes in the comments below. If you have any questions, let me know!