main.scss

@import "@fontsource/lato/latin.css";
@import "minireset.css";

$breakpoint-small: 680px;
$breakpoint-large: 1200px;
$breakpoint-larger: 1600px;
$background: #282828;
$link-color: #00e1ff;

@mixin slide($duration, $offset) {
    animation: $duration ease-in-out $offset slide-in forwards;
    opacity: 0;
}

body {
    background-color: $background;
    color: whitesmoke;
    font-family: Lato, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 2em;
    @media screen and (max-width: $breakpoint-small) {
        padding: .75em;
    }
    &.skip-animation {
        .welcome-header, .bio, .skills, .projects {
            animation-delay: -200s;
        }
    }
}

.menu {
    position: fixed;
    background-color: black;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 1em;
    transform: translateY(-100%);
    transition: transform 750ms ease;
    white-space: nowrap;
    overflow-x: auto;
    &.active {
        transform: none;
    }
    > button {
        background-color: #2f2f2f;
        color: whitesmoke;
        transition: color 300ms linear;
        &.active {
            color: goldenrod;
        }
        border: none;
        font-size: 1.2em;
        padding: .5em 1em;
        margin: .25em;
        cursor: pointer;
    }
}

.modal {
    position: fixed;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: none;
    cursor: zoom-out;
    &.active {
        display: flex;
    }
    > .dimmer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.75;
    }
    > img {
        position: absolute;
        height: 80%;
        max-width: 95vw;
        margin: auto;
        top: 10%;
        cursor: inherit;
        object-fit: contain;
        user-select: none;
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-header {
    @media screen and (max-width: $breakpoint-small) {
        text-align: center;
    }
    @include slide(600ms, 0s);
    > div {
        max-width: 35%;
        @media screen and (max-width: $breakpoint-large) {
            max-width: 50%;
        }
        @media screen and (max-width: $breakpoint-small) {
            max-width: unset;
        }

        h1 {
            font-size: 2rem;
            font-weight: bold;
        }

        h2 {
            font-size: 1.2em;
            font-style: italic;
            margin-bottom: .25em;
        }
    }

    margin-bottom: .5em;
}

.bio {
    @include slide(500ms, 650ms);
}

.skills {
    @include slide(600ms, 1050ms)
}

.projects {
    @include slide(600ms, 1150ms);
}

body > h2 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: .5em 0;
}

.grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    &.align-center {
        justify-content: center;
    }
    @media screen and (max-width: $breakpoint-large) {
        display: block;
    }
    > div, > ul, > span {
        flex-basis: 49%;
        flex-shrink: 0;
        padding: .25em;
        @media screen and (max-width: $breakpoint-large) {
            flex-basis: 100%;
        }
    }
    ul {
        text-align: justify;
        list-style: circle;
        padding-left: 1.25em;
        li.spacing {
            margin-left: 1em;
        }
    }
    .text {
        > p {
            width: 95%;
            margin: auto;
            text-align: center;
        }
    }
}

@mixin height-hack {
    height: 25rem;
    @media screen and (max-width: $breakpoint-larger) {
        height: 20rem;
    }
    @media screen and (max-width: $breakpoint-large) {
        height: 15rem;
    }
    @media screen and (max-width: $breakpoint-small) {
        height: 10rem;
    }
}

div.card {
    background-color: scale-color($background, $lightness: 15%);
    padding: 1em;
    border-radius: 20px;
    border: 1px solid dimgray;
    margin-top: 1em;
    align-self: stretch;
    &.large {
        flex-basis: 75%;
        @media screen and (max-width: $breakpoint-large) {
            flex-basis: 100%;
        }
    }
    h3 {
        font-size: 1.2em;
        font-weight: bold;
        margin-top: .75em;
        margin-bottom: .25em;
    }
    > img, a > img {
        margin-top: .5em;
        border: 2px solid whitesmoke;
        width: 100%;
    }
    .header {
        position: relative;
        transform: translate(-1em,-1em);
        width: calc(100% + 2em);
        @include height-hack;
        img {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            object-fit: cover;
            width: auto;
            min-width: 100%;
            cursor: auto;
            @include height-hack;
        }
        .title {
            position: absolute;
            bottom: 0;
            padding: .5em;
            width: 100%;
            opacity: 0.8;
            background-color: black;
            font-size: 1.25em;
            font-weight: bold;
            text-shadow: black 2px 2px 4px;
            .sub-header {
                font-size: 0.75em;
                font-style: italic;
                font-weight: normal;
            }
        }
    }
}

section.footer {
    background-color: black;
    margin: 1em;
    padding: 1em;
    text-align: center;
    border-radius: 20px;
    transform: translateY(2em);
}

a {
    color: $link-color;
    &:visited {
        color: $link-color;
    }
    &:hover {
        color: scale-color($link-color, $lightness: 50%);
    }
    transition: color 200ms ease;
    text-decoration: none;
}

.icon {
    height: 1em;
    width: auto;
    display: inline;
    vertical-align: middle;
}

img:not(.icon) {
    cursor: zoom-in;
}

p.justified {
    text-align: justify;
}