Media Queries

Em virtude da exigência de por o nosso projeto(site) todo responsivo, utilizamos, basicamente, em todas as páginas o @media, ou seja, media queries, pois como o header e o footer estão presente em todas as páginas, é indubitável a necessidade de utilizá-lo.

Portanto, os @media podem ser encontrado no diretório css/index.css, com os seguintes códigos:

       /* @medias para a responsividade das páginas, tanto em
        smartphones, como em tablets */
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                margin: 0 auto
            }
            .coluna-area-2 {
                width: 16.66%
            }
            .coluna-area-3 {
                width: 28.999999%
            }
            .coluna-lugar-1 {
                margin-left: 8.333333%;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px
            }
        }
        
        @media (max-width: 992px) {
            #logo img {
                font-size: 30px;
                margin-bottom: 20px;
            }
            #logo {
                left: -130px;
            }
            #header,
            #header nav {
                text-align: center
            }
            .checkbtn {
                display: block;
            }
            .navegacao ul {
                position: fixed;
                width: 100%;
                height: 100vh;
                background: lightblue;
                top: 80px;
                left: -100%;
                text-align: center;
                transition: all .5s;
            }
            .navegacao ul li {
                display: block;
                margin: 50px 0;
                line-height: 30px;
            }
            .navegacao ul li a {
                font-size: 20px;
            }
            .navegacao a:hover,
            .navegacao a.active {
                background: none;
                color: white;
            }
            #check:checked~ul {
                left: 0;
            }
        }