FlavorFusion / sass / index_sections / _footer.scss
_footer.scss
Raw
#footer-section{
    letter-spacing: .5px;
    padding:var( --section-padding);
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
}

.footer{
    background-color: var(--secondaryBG-color);
    display: flex;
    padding:var(--container-padding);
    justify-content: center;
    gap:5em;
    flex-direction: column;
    
    
    &__links-wrapper{
        justify-content: center;
        gap:5em;
        display: flex;
        flex-wrap: wrap;
    }
    
    &__ul{
        display: flex;
        flex-direction: column;
        gap:1em;
        list-style: none;

        li{
            font-size: var(--footer-size);
        }
    }

    &__links{
        text-decoration: none;
        color: var( --body-color);

        &:hover{
            color:var(--secondaryUtil-color);
        }
    }

    &__heading{
        font-size:var(--body-size);
        font-weight: bolder;
        position: relative;

        &::after{
            content:'';
            width:30px;
            height:4px;
            background-color: var(--secondaryUtil-color);
            display: block;
            margin: .2em 0;
        }
    }

    &__socials{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap:1em;
       
    }

    &__social-icons{
        width:1.5em;
        height:1.5em;
        max-width: 2em;
        object-fit: contain;
        cursor: pointer;

       &:hover{
        transform: scale(1.1);
       }
    }

    &__copyright{
      text-align: center;
      line-height: 25px;
    
      span{
        font-size: .80rem;
      }
    }
}