props/Props/assets/styles/site.scss

@use "themer";
@use "sass:color";
@use "~/node_modules/bootstrap/scss/bootstrap";

header > nav {
    @extend .navbar-expand-lg;
    @extend .navbar;
    @extend .border-bottom;
    @include themer.themed {
        background-color: themer.color-of("navbar");
    }

    .nav-link, .navbar-brand {
        @include themer.themed {
            color: themer.color-of("navbar-link");
        }
        &.active {
            @include themer.themed {
                color: themer.color-of("navbar-active");
                border-bottom-color: themer.color-of("navbar-active");
            }
            padding-bottom: 2px;
            border-bottom-style: solid;
            border-bottom-width: 2px;
        }
    }

    .navbar-toggler {
        .bi-list {
            font-size: 1.5rem;
        }
    }
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .tear {
        border-top: 1px;
        border-top-style: solid;
        border-bottom: 1px;
        border-bottom-style: solid;
        @include themer.themed {
            $tear: themer.color-of("background");
            border-color: adjust-color($color: $tear, $lightness: -12%, $alpha: 1.0);
            background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
        }
    }
}

footer {
    @extend .text-center;
    @extend .border-top;
    @extend .py-2;
    @include themer.themed {
        background-color: themer.color-of("footer");
        color: themer.color-of("muted");
    }

    a {
        @include themer.themed {
            color: themer.color-of("muted");
        }
    }

    width: 100%;
}

.jumbotron {
    @extend .container-fluid;
    @extend .p-4;
    @include themer.themed {
        background-color: themer.color-of("main");
    }

    &.sub {
        @include themer.themed {
            background-color: themer.color-of("sub");
        }
    }
}

.concise {
    @extend .container;
    max-width: 630px;
    width: inherit;
}

.less-concise {
    @extend .container;
    max-width: 720px;
    width: inherit;
}

hr {
    &.concise {
        @extend .my-2;
        width: 15%;
        max-width: 160px;
        min-width: 32px;
        height: 2px;
    }
    &.less-concise {
        @extend .my-2;
        width: 30%;
        max-width: 270px;
        min-width: 32px;
        height: 2px;
    }
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    @include themer.themed {
        background-color: themer.color-of("background");
        color: themer.color-of("text");
    }
}

.text-muted {
    @include themer.themed {
        color: themer.color-of("muted") !important;
    }
}

.multipage {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .multipage-slides, .multipage-slides > .multipage-slide.active {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .multipage-slide {
        .multipage-content {
            @extend .container;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .multipage-title {
            @extend .less-concise;
            text-align: center;
        }
    }

    .nav-pills.selectors {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        button[type="button"] {
            margin-right: 5px;
            margin-left: 5px;
            opacity: 0.4;
            border-style: none;
            font-size: 1.5rem;
            min-width: 30px;
            width: auto;
            height: auto;
            background-color: transparent;
            background-clip: border-box;
            @include themer.themed {
                border-bottom: 2px solid themer.color-of("text");
            }
            border-bottom-style: none;

            &.active {
                opacity: 1;
            }
        }
    }
}