props/Props/assets/scss/main.scss

@use "themer";
@use "~/node_modules/bootstrap/scss/bootstrap";
@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
@import "~/node_modules/simplebar/dist/simplebar.min.css";

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("bold");
        }
        &.active {
            @include themer.themed {
                color: themer.color-of("text");
            }
        }
    }

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

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

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

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

    position: absolute;
    bottom: 0;
    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 {
    max-width: 630px;
    width: inherit;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 3em;
}

hr {
    @extend .my-3;
    @include themer.themed {
        color: themer.color-of("bold");
    }
}

html {
    min-height: 100%;
    position: relative;
}