Project Twiist - Dev log #2 (Design)

TL;DR
The first thing I have decided to start on, is the website design. This is mostly because it's my strong suit (and it's relatively easy).

DEVELOPMENT ENVIRONMENT
First off: I am using glitch.com while designing the website. Glitch is a really cool live development website/program, that allows me to edit every component of my website and then view my edit instantly in a new window. Of course, once I start coding real functionality into the website I will have to export my website and host it myself, but for now Glitch has been working perfectly.

PRELIMINARY GRAPHIC DESIGN
Although coding is a passion of mine, I really really enjoy graphic design. I am proficient, if not fluent, in Adobe Illustrator and Adobe Photoshop. This came to my benefit for this project, as it allowed me to quickly create some sample logo and design material for the website.

Main Logo:

Main Logo With No Effect:

BASIC CSS, HTML & JS FOR WEBSITE
After I found the site's colors, and designed the logo, I was ready to start styling the website. I am kinda skipping over the base website HTML "design" because it is really simple, but I will outline some specifics below.

Home Page

To fill up the home page, I used real thumbnails, titles, channel names, and view counts from YouTube.

Each thumbnail has a simple CSS animation on it, making it 'hover' upwards on cursor hover.

div.videothumbnail:hover {
cursor:pointer;
bottom:5px;
} 

This simple code (bottom:5px;) enables me to animate the thumbnails efficiently and easily. As I've said, I am no expert, and I am self taught, but this is the way I found to achieve the look I wanted.

There is a navigation bar on the website that is tucked into the left side of the screen. The javascript to make it function is again, quite simple:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

I then use div id="main" as a container for the body of the page.

Video Page

You can also see in this gif that there is a custom scroll bar and videoplayer for the website as well.

Scrollbar Code:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
  background: #888; 
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}