home/src/scss/theme.scss

/*! andrewgioia.com style definitions v7.0.1 */

// normalize
@import "../../node_modules/normalize.css/normalize";

// sass variables
@import "variables";

// css variables
:root {
    --bg-normal:         #{$bg-light};
    --bg-dark:           #{$bg-dark};
    --border-normal:     #{$border-light};
    --border-dark:       #{$border-dark};
    --text-normal:       #{$font-color-navy};
    --text-normal-hl:    #{$font-color-navier};
    --text-dark:         #{$font-color-gray};
    --text-dark-hl:      #{$font-color-white};
    --font-base:         #{$font-size-base};
    --link-tb-normal:    #{$link-tb-normal};
    --link-tb-dark:      #{$link-tb-dark};
    --link-gh-normal:    #{$link-gh-normal};
    --link-gh-dark:      #{$link-gh-dark};
    --link-blog-normal:  #{$link-blog-normal};
    --link-blog-dark:    #{$link-blog-dark};
    --link-gitea-normal: #{$link-gitea-normal};
    --link-gitea-dark:   #{$link-gitea-dark};
    --link-pf-normal:    #{$link-pf-normal};
    --link-pf-dark:      #{$link-pf-dark};
}

// icons
@import "icons";

// fit and finish
html {
    height: 100%;
    width: 100%;
}

body {
    background: var(--bg-normal);
    display: flex;
    flex-direction: column;
    font-size: var(--font-base);
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    width: 100vw;
}

main {
    border-top: 1vmax solid var(--border-normal);
    padding: 5vmin 6vmin 0;

    h1 {
        color: var(--text-normal);
        font-family: $font-family-base;
        font-size: 4rem; // basic fallback
        font-size: 10vmin; // premium fallback
        font-size: max(10vmin, 26px);
        font-weight: 700;
        line-height: max(11vmin, 32px);
        margin: 0;

        span.who {
            color: var(--text-normal-hl);
            display: block;
            font-weight: 900;
        }

        a {
            color: var(--link-tb-normal);
            text-decoration: none;
        }
    }
}

footer {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 5vmin 6vmin;

    a {
        font-size: 3rem; // basic fallback
        font-size: 5vmin; // premium fallback
        font-size: max(8vmin, 36px);
        margin-right: 4vmin;

        &.blog {
            color: var(--link-blog-normal);
        }

        &.email {
            color: #ef5777;
        }

        &.gitea {
            color: var(--link-gitea-normal);
        }

        &.github {
            color: var(--link-gh-normal);
        }

        &.mastodon {
            color: #3088d4;
        }

        &.pixelfed {
            color: var(--link-pf-normal);
        }
    }
}

a {
    position: relative;
    text-decoration: none;

    // novelty arrow
    &::after {
        color: inherit;
        content: $icon-arrow;
        display: block;
        font-family: 'andrew';
        font-size: 75%;
        height: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transform: translateY(-20%) translateX(80%);
        -moz-transform: translateY(-20%) translateX(80%);
        transform: translateY(-20%) translateX(80%);
        transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
    }

    // show the arrow on hover
    &:hover::after {
        display: block;
        margin-top: -3px;
        opacity: 100;
    }

}

// schemes
@import "dark";

// media queries
@import "media";