neocities/sass/_project-sass/_project-Footer.scss

// ----------------------------------------------------------------
//		Project Specific: Footer Area
// ----------------------------------------------------------------

// Apply to <footer> for styling
.footer-Base{
	color:#5e5b56;
  float: left;
  width: 100%;

	h1, h2, h3, h4{
  	color:#8b9a7a;
	}
}

// Apply to internal wrapper for footer content
.footer-Content{
	@extend .content;
}

// Footer Intro Area
.footer-Intro{
  background:#daeea5;
	border-top:1px solid #cedbab;
	@include box-shadow($bs-4);
	position:relative;
}
.footer-Content{
  padding-top:20px;
  padding-bottom:20px;
  padding-left: 30px;
  padding-right: 30px;
  @media (max-device-width:480px), screen and (max-width:800px){
    padding-left: 20px;
  }
}
.footer-Content .row {
  margin-left: 0;
}

.f-Col{
  @include box-sizing(content-box);
  min-height:125px;
  padding-bottom:$spacing*7;
  position:relative;

  @media (max-device-width:480px), screen and (max-width:800px){
    min-height:2px;
    padding-left:15px!important;
    padding-right:100px!important;
  }

  .action-Link{
    bottom:0;
    position:absolute;
    right:$spacing*3;

    @media (max-device-width:480px), screen and (max-width:800px){
      position:static;
    }
  }
}

.footer-icon {
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    top:-70px;

    @media (max-device-width:480px), screen and (max-width:800px){
      @include vendor(background-size, 100%);
      height:90px!important;
      top:0;
      width:77px!important;
    }
}

.f-Col-1{
    padding-right:$spacing*3;

    .footer-icon{
      background-image: url(/img/catbus-index.png);
      height:102px;
      right:5px;
      width:125px;
    }
}

.f-Col-2{
  padding-left:15px;
  padding-right:6px;
  position:relative;
  @media (max-device-width:480px), screen and (max-width:800px){
    border-bottom:1px solid rgba(0,0,0,.1);
    border-top:1px solid rgba(0,0,0,.1);
    margin:20px 0;
    overflow:hidden;
    padding:20px 0;

    .footer-icon{
      top:14px
    }
  }

  &:before, &:after {
      background:url("/img/border.png") no-repeat 0 -20px;
      content:"";
      height:200px;
      opacity:0.2;
      position:absolute;
      top:0;
      width:1px;

      @media (max-device-width:480px), screen and (max-width:800px){
        display:none;
      }
  }

  &:before{left:-14px}
  &:after{right:-14px}

  .footer-icon {
      background-image: url(/img/about-neocities.png);
      width: 100px;
      height: 106px;
  }
}

.f-Col-3{
    padding-left:20px;
    @media(max-device-width:480px), screen and (max-width:800px){
      padding-left:0;
    }

    .footer-icon{
        background-image: url(/img/latest-news.png);
        height:103px;
        width:134px;
    }
}


// Footer Outro Area
.footer-Outro{
  background:#ccdf9b;
  border-top:1px solid #b3c388;
  overflow:hidden;

  a{
    color:#5e5b56;
    text-decoration:underline;
    &:hover {
      text-decoration:none;
    }
  }
}
.credits{
  margin-bottom: 0;
  padding-left: 0;
  width: 55%;

  @media (max-device-width:480px), screen and (max-width:800px){
    width: 100%;
    text-align: center;
  }
}
.footer-Nav{
  text-transform:uppercase;
  width: 45%;
  padding-left: 0;

  @media (max-device-width:480px), screen and (max-width:800px){
    width: 100%;
    text-align: center;
  }

  .h-Nav{
    float:right;

    @media (max-device-width:480px), screen and (max-width:800px){
      float:none;
      margin-top:15px;
      margin-bottom: 6px;

      li {
        float: none;
        display: inline;

        a {
          padding-left: 0;
          margin-right: 0px;
          margin-left: 10px;
          margin-top: 5px;
          margin-bottom: 3px;
        }
      }
    }
  }
  .h-Nav a{
    padding:0 $spacing*2;
    text-decoration:none;
    &:hover {
      text-decoration:underline;
    }
  }
  .h-Nav li:last-child a{padding-right:0}
}