stylesheet.css

/* fcc-portfolio-page */

/* author: Edgars Dūdiņš */
/* version: 2.02 revised: 25-08-2020 */

/* ===== elements ===== */
html {
    scroll-behavior: smooth;
}

body {
    /*
    Default body has margin, wanted the page to look full.
    */
    margin: 0;
    background: linear-gradient(-45deg, black, #2b2255, black);
    font-family: 'Heebo', sans-serif;
}

img {
    /*
    Don't set height! Messes up the tile.
    */
    width: 40rem;
    object-fit: contain;
}

/* ===== navbar ===== */
#navbar {
    background-color: whitesmoke;
    position: fixed;
    /*
    Sticky doesn't work, as the below box sits adjacent and I needed for it to sit underneath.
    If I set position: fixed and set relative location to top: 0, left: 0 and right: 0;
    */
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    z-index: 1;
    border-bottom: 1px solid black;

    /* flex */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: stretch;
}

#navbar a, #navbar a:visited {
    text-decoration: none;
    color: black;
    
}

#navbar a:hover {
    background-color: black;
    text-shadow: 0.0625em 0.0625em 0.125em white;
    color: white;
}

.nav-link {
    /*
    Initially I wanted to use "height" here to make sure that the link gets painted in fully from bottom to top. I then realized that I can use "align-items" in parent container to "stretch" to make this work.
    */
    padding: 0 1.5rem 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /*
    To align vertically:
    1) Set the height of container.
    2) Flex it....
    */
}

/* ===== welcome-section ===== */
#welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
    height: 100vh;

    background: linear-gradient(-45deg, #0C5F75, black);
}

#welcome-title {
    color: #ffcb00;
    font-size: 1.8rem;
    margin: 0;
}

#welcome-subtitle {
    margin: 0;
    color: white;
}

/* ===== projects-section ===== */
.work-title {
    font-size: 1,8rem;
    color: #ffcb00;
    text-align: center;
    margin: 2.5rem 0 0.8rem 0;
}

.line-break {
    margin: 0 8rem 1.5rem 8rem;
    border-bottom: 1px solid #ffcb00;
}

.projects-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: baseline;
}

.project-title {
    font-size: 1.09rem;
    color: black;
    text-align: center;
}

.project-tile {
    background-color: whitesmoke;
    border-radius: 0.2rem;
    margin: 1rem;
    overflow: hidden;
    text-decoration: none;

    display: flex;
    flex-flow: column nowrap;

    transition: transform 0.5s linear;
    transform: none;
}

.hover-snippet {
    color: white;
    transition: color 0.5s linear;
}

.project-tile:hover {
    /* hover-effect */
    transform: scale(1.010);
}

.project-tile:hover .hover-snippet { color: #014C51; }
/* ^ If the element is somewhere inside the container ^ */

#projects {
    /* A way to get to a hash anchor while positioning it at the border of the navbar. Navbar is 2.5rem high. */
    margin-top: -2.5rem;
    padding-top: 2.5rem;
}

.profile-link-button-container {
    /* Holds the link element. Had to center the link element. */
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 7rem;
}

#profile-link {
    display: inline-block;
    /* Had to change it to "inline-block" so that can declare width and set it central */
    background-color: white;
    color: black;
    text-transform: uppercase;
    text-align: center;
    width: 8rem;
    padding: 0.2rem 0 0.2rem 0;
    text-decoration: none;
    font-size: 1.09rem;
    border-radius: 0.2rem;
    border: 1px solid black;

    transition: background-color 0.5s linear, border 0.5s linear, color 0.5s linear;
}

#profile-link:hover {
    color: white;
    background-color: black;
    border: 1px solid white;
}

/* ===== contact-details ====== */
#contact-details {
    background: linear-gradient(-45deg, #0C5F75, black);
    height: 100vh;
    color: white;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#contact-title {
    text-align: center;
    color: #ffcb00;;
}

#contact-footnote {
    margin: 0;
    text-align: center;
}

#my-portrait {
    margin: 0 0 2rem 0;
    display: block;
    width: 10rem;
    border-radius: 1rem;
    border: 2px solid white;
}

.contact-options {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.contact-options > a {
    text-decoration: none;
    color: white;
}

.contact-contact {
    margin: 0.5rem;

    transition: transform 0.1s linear;
    transform: none;
}

.contact-contact:hover {
    transform: translateY(-10%);
}

/* ===== media query ===== */

@media (max-width: 900px) {
    #welcome-title {
        font-size: 1.5rem;
    }

    .work-title {
        font-size: 1,5rem;
    }

    .contact-contact {
        margin: 0.25rem;
    }

    img {
        width: 20rem;
        object-fit: contain;
    }
}