Bootstrap4 custom.css

/* -----------------------------------------------
Customisations to the Bootstrap4 theme go in this file.
-------------------------------------------------- */

/* Import Fonts from Google
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Chau+Philomene+One|Oswald|Ropa+Sans');

/* Add a box-shadow to the viewport
-------------------------------------------------- */
html {
    min-height:100%;
    -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.25);
            box-shadow: inset 0 0 5rem rgba(0,0,0,.25);
}

/* Set up body backgrounds
-------------------------------------------------- */
body.background-img {
    background-size: auto;
    background-repeat: no-repeat;
    background-position-y: bottom;
}
    body.background-treeline {
        background-image: url("[[$theme_url]]/backgrounds/treeline_faded.png");
    }
    body.background-stars {
        background-image: url("[[$theme_url]]/backgrounds/starry_sky_faded.png");
    }

/* Bootstrap4 footer styles
-------------------------------------------------- */
footer {
    height: 80px;               /* Set the fixed height of the footer here */
    line-height: 60px;          /* Vertically center the text there */
}
html.sticky-footer {
    position: relative;
    min-height: 100%;
}
body.sticky-footer {
    margin-bottom: 80px;    /* Margin bottom by footer height */
}
footer.sticky-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}


/* Custom text utilities
-------------------------------------------------- */
.text-small-caps {
    font-variant: small-caps;
}

/* Customise header fonts
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.5);
}

/* Customise navbar fonts
-------------------------------------------------- */
nav {
    font-family: 'Chau Philomene One', sans-serif;
}


/* Set up transitions
-------------------------------------------------- */
a {
    transition: all 0.2s linear;
}

/* Customise embedded sample code
-------------------------------------------------- */
pre > code {
    display: inline-block;
    background-color: #ccc;
    padding: 0.2em 0.4em;
    overflow: hidden;
    border-radius: 5px 0;
}

/* Add central expanding underline to links
   Source: Tobias Ahlin: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
-------------------------------------------------- */
main a {
    position: relative;
}
main a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: darken($blue, 15%);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
main a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* Navbar caret animations
-------------------------------------------------- */
@keyframes swing {
    0%, 100% {  transform: rotate(-30deg);  }
    20% {       transform:scale(.95);       }
    50% {       transform: rotate(30deg);   }
    80% {       transform:scale(.95);       }
}
nav .dropdown-toggle:hover:after {
    -webkit-animation: swing 2s infinite;
            animation: swing 2s infinite;
}