SAE15_2022/assets/css/footer.css

footer {
    background: #616A6B;
    color: white;
    display: grid;
    align-items: center;
}

footer div p {
    font-size: 25pt;
    text-align: center;
}

#social ul {
    display: inline-block;
}

#social li {
    display: inline;
}

#copyright {
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    height: 100%;
    background-color: #45a1ff;
    margin: 0;
}

#social, #sitemap, #contact {
    height: max-content;
}

#contact a, #sitemap a {
    color: white;
    text-decoration: none;
}

#contact a:hover, #sitemap a:hover {
    text-decoration: underline;
}

#social ul {
    display: flex;
    justify-content: center;
    padding: 0;
}

#social li {
    padding: 20px;
}

#sitemap ul {
    list-style: none;
}

#sitemap li, #contact li {
    padding-bottom: 15px;
}

footer ul {
    font-weight: 600;
}

#contact ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

#contact a[href^="tel:"]::before {
    content: "☎️ ";
}

#contact a[href^="mailto:"]::before {
    content: "✉️ ";
}

@media screen and (min-width: 800px) {
    footer {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 85% 15%;
    }

    #social, #sitemap, #contact {
        grid-row: 1;
    }

    #social {
        grid-column: 1;
    }
    
    #sitemap {
        grid-column: 2;
    }

    #contact {
        grid-column: 3;
    }

    #copyright {
        grid-column: 1/4;
        grid-row: 2;
    }
}

@media screen and (max-width: 800px) {
    footer {
        grid-template-columns: 100%;
        grid-auto-rows: auto;
    }

    #social, #sitemap, #contact, #copyright {
        grid-column: 1;
    }

    #social {
        grid-row: 1;
    }
    
    #sitemap {
        grid-row: 2;
    }

    #contact {
        grid-row: 3;
    }

    #copyright {
        grid-row: 4;
    }
}