PR: Add transcripts to videos

[juanis2112]

Pull Request Checklist

• Read and followed this repo's Contributing Guidelines
• Based your PR on the latest version of the correct branch (master or 3.x)
• Checked your writing carefully for correct English spelling, grammar, etc
• Described your changes and the motivation for them below
• Noted what issue(s) this pull request resolves, creating one if needed

Description of Changes

In this PR I will add all the transcripts to the videos as an scrollable element under a dropdown.

The first 2 commits have the directives necessary to do this along with the first script but once @CAM-Gerlach is done reviewing and formatting all of them I will add the rest.

Let me know what you think about the design. I think I'll try to talk to Isabella for some advice on colors and format.

Issue(s) Resolved

Fixes #183

[ccordoba12]

Congratulations @juanis2112! This looks awesome!

I only have one small comment: I think there's not enough padding between the text and the scrollbar on the right

My suggestions to avoid this are:

• Don't make the text justified
• Add this css rule

.scroll.docutils > p.card-text {
    padding-right: 15px;
}

With those two changes things look like this

What do you think?

[ccordoba12]

Another option would be to remove the margins inside the scroll div and add some padding instead:

div.scroll {
    height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    /* text-align: justify; */
   font-size: 0.8em;
   color: #2c2e30;
   margin: -20px;
   padding-top: 20px;
   padding-left: 25px;
   padding-right: 25px;
   padding-bottom: 0px;
}

I think I prefer this solution because it makes the scrollbar perfectly aligned with the border of the dropdown.

[dalthviz]

Note: This needs a rebase

[CAM-Gerlach]

Looks great @juanis2112 ! Just a bunch of minor typos and formatting changes, almost all of them my own fault, sorry. The content and display of the PR output all looks good.

[CAM-Gerlach]

LGTM on my end, thanks @juanis2112 !

[ccordoba12]

Fantastic job @juanis2112 and @CAM-Gerlach! This looks really great!

I only have one minor comment. Most of the script of First Steps with Spyder > Getting started is not the inside the div that should contain it:

Other than that, this is ready to me.

[CAM-Gerlach]

@ccordoba12 Fixed, sorry, it was an indentation mistake introduced by one of the minor changes I applied to the transcript text.

[ccordoba12]

Looks good to me now, thanks!