paulnicoue/assets/styles/main.scss

// --------------------------------------------------
// VARIABLES
// --------------------------------------------------

:root {

    // Fonts

    --text-font-family: 'Karla', sans-serif;
    --title-font-family: 'Cairo', sans-serif;
    --extra-light-font-weight: 200;
    --light-font-weight: 300;
    --regular-font-weight: 400;
    --medium-font-weight: 500;
    --semi-bold-font-weight: 600;
    --bold-font-weight: 700;
    --extra-bold-font-weight: 800;
    --black-font-weight: 900;
    --h1-font-size: 2rem;
    --h2-font-size: 1.8rem;
    --h3-font-size: 1.4rem;
    --text-font-size: 1.2rem;
    --caption-font-size: 1.1rem;
    --footnote-font-size: 1rem;
    --line-height: 1.2;
    --h1-font-height: calc(var(--h1-font-size) * var(--line-height));
    --h2-font-height: calc(var(--h2-font-size) * var(--line-height));
    --h3-font-height: calc(var(--h3-font-size) * var(--line-height));
    --text-font-height: calc(var(--text-font-size) * var(--line-height));
    --caption-font-height: calc(var(--caption-font-size) * var(--line-height));
    --footnote-font-height: calc(var(--footnote-font-size) * var(--line-height));


    // Dimensions
    
    --large-content-width: Min(100%, 100rem);
    --medium-content-width: Min(100%, 80rem);
    --small-content-width: Min(100%, 60rem);
    --regular-icon-size: 2rem;
    --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
    --button-icon-size: var(--text-font-height);
    --button-with-icon-gap: 0.5rem;


    // Colors

    --eerie-black: #212121;
    --gray: #7A7A7A;
    --night: #141414;
    --white-smoke: #F5F5F5;
    --emerald: #72C080; // hsl(131, 38%, 60%)
    --granny-smith-apple: #A3F3B0; // hsl(130, 77%, 80%)
    --middle-green: #428F53;
    --earth-yellow: #F9B262; // hsl(32, 93%, 68%)
    --fawn: #F9BC76; // hsl(32, 92%, 72%)

    --primary-color: var(--eerie-black);
    --primary-color-light: var(--gray);
    --primary-color-dark: var(--night);
    --secondary-color: var(--white-smoke);
    --primary-accent-color: var(--emerald);
    --primary-accent-color-light: var(--granny-smith-apple);
    --primary-accent-color-dark: var(--middle-green);
    --primary-accent-gradient: linear-gradient(
        45deg,
        hsl(131deg 38% 60%) 1%,
        hsl(131deg 40% 62%) 34%,
        hsl(130deg 43% 64%) 46%,
        hsl(130deg 46% 66%) 54%,
        hsl(130deg 49% 69%) 60%,
        hsl(130deg 53% 71%) 66%,
        hsl(130deg 58% 73%) 71%,
        hsl(130deg 63% 75%) 76%,
        hsl(130deg 69% 77%) 83%,
        hsl(130deg 77% 80%) 100%
    );
    --secondary-accent-color: var(--earth-yellow);
    --secondary-accent-light: var(--fawn);
    --secondary-accent-gradient: linear-gradient(
        5deg,
        hsl(32deg 93% 68%) 7%,
        hsl(32deg 92% 69%) 65%,
        hsl(32deg 92% 70%) 77%,
        hsl(32deg 92% 71%) 83%,
        hsl(32deg 92% 72%) 100%
    );
}

// Media queries

$tablet-media-query: 48rem; // 768px
$desktop-media-query: 62rem; // 992px

// --------------------------------------------------
// FONTS AND COLORS
// --------------------------------------------------

body {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    font-weight: var(--regular-font-weight);
    line-height: var(--line-height);
    color: var(--secondary-color);
    background-color: var(--primary-color);
}

h1 {
    font-family: var(--title-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--medium-font-weight);
}

h2 {
    font-family: var(--title-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--medium-font-weight);
}

h3 {
    font-family: var(--title-font-family);
    font-size: var(--h3-font-size);
}

p {
    font-weight: var(--light-font-weight);
}

strong {
    font-weight: var(--medium-font-weight);
}

em {
    font-style: italic;
}

// --------------------------------------------------
// LINK STYLE
// --------------------------------------------------

a {
    color: var(--secondary-color);
    text-decoration: underline var(--primary-accent-color);
    border-radius: 2px;
    transition: color 200ms ease-in-out;

    &:hover,
    &:focus,
    &:active {
        color: var(--primary-accent-color);
    }

    &:focus-visible {
        outline: 1px dashed var(--primary-accent-color-light);
        outline-offset: 2px;
        animation: expand-outline-2px 200ms ease-in-out;
    }
}

// --------------------------------------------------
// LIST STYLE
// --------------------------------------------------

ul {
    list-style: disc outside;
}

// --------------------------------------------------
// BUTTON STYLE
// --------------------------------------------------

button {
    padding: 1rem 1.5rem;
    color: var(--primary-color);
    background-image: var(--primary-accent-gradient);
    background-size: 100%;
    background-position: right center;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-family: var(--title-font-family);
    font-size: var(--text-font-size);
    font-weight: var(--semi-bold-font-weight);
    line-height: var(--line-height);
    text-align: center;
    transition: background-size 200ms ease-in-out;

    &:hover,
    &:focus,
    &:active {
        background-size: 300%;
    }

    &:focus-visible {
        outline: 1px dashed var(--primary-accent-color-light);
        outline-offset: 4px;
        animation: expand-outline-4px 200ms ease-in-out;
    }
}

@mixin button-with-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-with-icon-gap);

    span {
        transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2));
        transition: transform 200ms ease-in-out;
    }

    svg {
        flex-shrink: 0;
        opacity: 0;
        width: var(--button-icon-size);
        height: var(--button-icon-size);
        transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2));
        transition:
            opacity 200ms ease-in-out,
            transform 200ms ease-in-out; 
    }

    &:hover span,
    &:focus span,
    &:active span {
        transform: translateX(0);
    }

    &:hover svg,
    &:focus svg,
    &:active svg {
        opacity: 1;
        transform: translateX(0);
    }
}

// --------------------------------------------------
// FORM STYLE
// --------------------------------------------------

form {

    div {
        position: relative;
        
        label {
            position: absolute;
            top: calc(-1 * (var(--text-font-size) / 2));
            left: 1rem;
            display: inline-block;
            padding: 0 0.5rem;
            font-family: var(--title-font-family);
            background-color: var(--primary-color);
        }

        input,
        textarea {
            font-family: var(--text-font-family);
            font-size: var(--text-font-size);
            font-weight: var(--light-font-weight);
            line-height: var(--line-height);
            width: 100%;
            padding: 1rem;
            color: var(--secondary-color);
            background-color: var(--primary-color);
            border: 1px solid var( --primary-color-light);
            border-radius: 10px;
            transition: border 200ms ease-in-out;

            &:hover,
            &:focus,
            &:active {
                border: 1px solid var(--primary-accent-color);
                outline: none;
            }
        }

        textarea {
            resize: vertical;
            min-height: 15rem;
        }

        p {
            font-size: var(--caption-font-size);
            color: var(--primary-accent-color);
        }
    }
}

// --------------------------------------------------
// SECTION STYLE
// --------------------------------------------------

section {
    width: var(--medium-content-width);
    padding: 4rem 2rem;

    @media screen and (min-width: $tablet-media-query) {
        padding: 6rem 4rem;
    }

    @media screen and (min-width: $desktop-media-query) {
        padding: 6rem;
    }
}

@mixin large-section {
    width: var(--large-content-width);
}

// --------------------------------------------------
// SMOOTH SCROLLING
// --------------------------------------------------

html {
    scroll-behavior: smooth;
}