src/components/styles/NotebookPage.scss
@import "partials/variables";

.notebook-page {
    -webkit-app-region: no-drag;
    overflow-y: scroll;
    height: 100%;
    overflow-x: hidden;
    margin-left: 52px;
    margin-top: 30px;
    &.open {
        display: flex;
        flex-direction: row;
    }

    .column-1{
        width: 300px;
        position: fixed;
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 50px;
    }

    .column-1::-webkit-scrollbar-track {
        
    }

    .column-1::-webkit-scrollbar {
        width: 7px;
        // background-color: white;
    }

    .column-2{
        position: relative;
        margin-left: 300px;
        padding: 0px 30px 50px 30px;
        cursor :text;
    }

    .header{
        font-size: 14px;
        font-family: $default-font;
        background: $umbrella_secondary;
        color: white;
        z-index: 10;
        padding: 5px 15px;
        // border-bottom-right-radius: 5px;
        width: 100%;

    }

    .posts {
        .post {
            display: block;
            padding: 15px;
            font-size: 14px;
            position: relative;
            cursor: pointer;
            .date {
                font-size: 12px;
            }

            .time {
                font-size: 12px;
            }
            .excerpt{
                line-height: 18px;
                font-style: italic;
                font-size: 14px;
                margin-top: 5px;
                font-family: $default-font;
            }

            .expandButton {
                position: absolute;
                top: 5px;
                right: 7px;
                cursor: pointer;
                color: $darkgrey;

                svg {
                    stroke-width: 1;
                    width: 20px;
                    height: 20px;
                }
            }

            .box {
                position: absolute;
                display: none;
                background-color: $black;
                padding: 5px 0px;
                border-radius: 4px;
                top: 8px;
                right: 31px;
                min-width: 100px;
                min-height: 70px;
                flex-direction: column;
                justify-content: center;

                button {
                    background: none;
                    border: none;
                    display: block;
                    color: $white;
                    margin-top: 3px;
                    padding: 2px 0px;

                    &:hover {
                        background-color: $black2;
                    }
                }

                &.visible {
                    display: flex;
                }
            }
        }
    }
}

$app-background: #ffffff;
$notebook-tile-background: #fafafa;
$notebook-tile-secondary-color: dimgrey;
$notebook-tile-primary-color: #2b2b2b;
$notebook-tile-button: #338fff;
$color2: #ffffff; //white
$color1 : #338fff; //light blue
$color3: #1c1925; //dark blue - the sidebar color
$color4: #dadada; //light grey - column-1 color
$color5: #2b2b2b; //the main text color
$spinner-background: #ffffff;
$spinner-color: #338fff;
$notebook-header-background: #338fff;
$notebook-header-color: #fafafa;
$column1-color: #ffffff;
$column1-background-color: #2193dc;
$column1-background-color2: #2193dc;
$column1-hover-post: #4ab7fd;
$column1-active-post: #4ab7fd;
$column1-scroll-bar: #f5f5f5;
$sidebar-color: #ffffff;
$sidebar-color-hover: #338fff;

.notebook-page{
    .column-1{
        background: #2193dc;
    }
    .column-1::-webkit-scrollbar {
        background-color: $app-background;
    }

    .column-1::-webkit-scrollbar-thumb {
        background-color: $column1-scroll-bar;
    }
    .posts{
        .post{
            color: $column1-color;
            background-color: inherit;
            cursor: pointer;
            &.color{
                background-color: #2193dc;
            }
            &.active{
                background-color: #4ab7fd !important;
            }
            &:hover{
                background-color: #4ab7fd !important;
            }
            .excerpt{
                color: $column1-color;
            }
        }
    }
    .column-2{
        background: $app-background;
    }
}

.notebook-page::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

.notebook-page::-webkit-scrollbar {
    width: 7px;
    background-color: transparent;
}

.notebook-page::-webkit-scrollbar-thumb {
    background-color: $grey;
}

.notebook-page{
    .column-2{
        p{
            font-size: 16px;
            line-height: 24px;
            margin: 15px 0;
            font-family: $default-font;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            font-style: normal;
        }

        h1{
            font-family: $default-font;
            font-size: 31px;
            line-height: 40.3px;
            font-weight: 400;
            max-width: 500px;
            -webkit-font-smoothing: antialiased;
            margin: 20px 0px;
        }

        h2{
            font-family: $default-font;
            font-weight: 400;
            font-size: 22px;
            max-width: 500px;
            -webkit-font-smoothing: antialiased;
            margin: 18px 0px;
            line-height: 28px;
        }

        strong{
            font-weight: 700;
            font-family: $default-font;
        }

        blockquote {
            margin: 30px 0;
            color: #727272;
            font-style: oblique;
            border-left: 3px solid #727272;
            padding-left: 17px;
            font-size: 16px;
        }
        em{
            font-family: $default-font;
            font-style: italic;
        }
    }
}