smooth-e.github.io/css/style.scss

---
---

:root {
    --color-container: #FFF;
    --color-shadow: rgba(0, 0, 0, 0.7);
    --color-on-secondary: #FFF;
    --color-badge: #949494;

    --corner-radius-big: 35px;
    --corner-radius-small: 20px;

    --margin: 15px;
    --clamped-max-width: 1000px;
    --top-level-card-max-width: 800px;

    --product-card-width: 250px;
    --button-icon-size: 25px;

    --source-badge-padding: 5px;
    --source-badge-margin: 10px;

    --code-block-background: #EFF1F3;
    --code-block-corner-radius: 6px;
    --code-block-vertical-padding: 2px;
    --code-block-horizontal-padding: 6px;

    --blockquote-bar-width: 4px;
    --blockquote-bar-color: #D0D7DE;
    --blockquote-text-color: #656d76;
}

// Fonts
:root {

    @font-face {
        font-family: "OpenSans";
        src: url("/assets/fonts/opensans.ttf") format("truetype");

    }

    @font-face {
        font-family: "OpenSans Light";
        src: url("/assets/fonts/opensans-light.ttf") format("truetype");

    }

    @font-face {
        font-family: "IBM Plex Sans";
        src: url("/assets/fonts/ibm-plex-sans.ttf") format("truetype");

    }

    @font-face {
        font-family: "IBM Plex Mono";
        src: url("/assets/fonts/ibm-plex-mono.ttf") format("truetype");
    }

    @font-face {
        font-family: "JetBrains Mono";
        src: url("/assets/fonts/jetbrains-mono.ttf") format("truetype");
    }

}

// Animations
:root {

    @keyframes appear-from-blur {

        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }

    }

    // Used from product-carousel.js
    @keyframes card-appearance {
        to {
            transform: translate(0, 0);
        }
    }

    @keyframes transparent-fly-in {

        from {
            transform: translateY(-20px);
        }

        to {
            transform: translateY(0px);
        }

    }

}

// Markdown stuff
.markdown {

    code, pre.highlight {
        background: var(--code-block-background);
        font-family: "IBM Plex Mono", monospace;
        padding: var(--code-block-vertical-padding) var(--code-block-horizontal-padding);
        line-height: calc(100% + 10px);
        border-radius: var(--code-block-corner-radius);
        font-weight: 100 !important;
    }

    div.highlight {
        overflow: hidden;
        border-radius: var(--code-block-corner-radius);

        pre.highlight {
            overflow-x: scroll;
            margin: 0;
        }

    }

    blockquote {
        position: relative;
        margin-right: 0;
        margin-left: calc(var(--blockquote-bar-width) + var(--margin));
        color: var(--blockquote-text-color);

        &::before {
            content: "";
            position: absolute;
            display: block;
            width: var(--blockquote-bar-width);
            height: 100%;
            background: var(--blockquote-bar-color);
            left: calc(-1 * var(--margin));
            border-radius: var(--blockquote-bar-width);
        }

    }

}

body {
    padding: 0;
    margin: 0;
    font-family: 'OpenSans', sans-serif, serif;
    overflow-x: hidden;
    background-color: var(--color-on-secondary);
}

.animated-enter {
    animation: 1s ease forwards appear-from-blur;
}

.container {
    position: relative;
    margin: var(--margin);
    border-radius: var(--corner-radius-big);
    padding: var(--margin);
    background-color: var(--color-container);
}

.rounded-shadow {

    &:after {
        content: "";
        background-color: var(--color-shadow);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: var(--corner-radius-big);
        filter: blur(10px);
        transition: filter .1s ease;
        z-index: -10;
    }

    &.hover-reactive:active::after {
        filter: blur(4px) !important;
    }

}

@media (any-hover: hover) {

    .rounded-shadow.hover-reactive:hover:after {
        filter: blur(7px);
    }

}

.clamped {
    max-width: var(--clamped-max-width);
}

.horizontally-centered {
    margin-left: auto;
    margin-right: auto;
}

.content-width {
    width: fit-content;
}

.no-url-highlighting a, a.no-url-highlighting {
    color: inherit;
    text-decoration: inherit;
}

.top-level-card {
    width: calc(100% - var(--margin) * 4);
    max-width: var(--top-level-card-max-width);
}

.badge {
    border-radius: calc(var(--corner-radius-small) / 2);
    background-color: var(--color-shadow);
    padding: calc(var(--margin) / 2);
    margin: auto var(--margin);
    color: var(--color-container);
}

.button {
    border-radius: var(--corner-radius-small);
    color: var(--color-on-secondary);
    padding: var(--margin);
    display: flex;
    flex-direction: row;
    font-size: calc(var(--button-icon-size) / 1.2);
    text-decoration: none;

    img {
        width: var(--button-icon-size);
        height: var(--button-icon-size);
        margin-inline-end: var(--margin);
    }

    .navigation-icon {
        margin-inline-start: auto;
        margin-inline-end: 0;
    }

}

.source-badge {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    border-radius: 50%;
    padding: var(--source-badge-padding);

    img {
        width: 100%;
        height: 100%;
    }

}

.source-badge[data-type="github"] {
    background-color: #24292F;
}

.source-badge[data-type="itch"] {
    background-color: #FA5C5C;
}

.source-badge[data-type="google-play"] {
    background-color: #059B70;
}

.source-badge[data-type="download"] {
    background-color: #00AAD5;
}

.source-badge[data-type="documentation"] {
    background-color: #3F627F;
}