github.com/hobbeswalsh/terraform@v0.3.7-0.20150619183303-ad17cf55a0fa/website/source/assets/stylesheets/_footer.scss (about)

     1  
     2  #footer-wrap{
     3      background-color: white;
     4      padding: 0 0 50px 0;
     5  }
     6  
     7  body.page-home{
     8      #footer{
     9          margin-top: -40px;
    10      }
    11  }
    12  
    13  #footer{
    14      padding: 140px 0 40px;
    15      color: black;
    16  
    17      a{
    18          color: black;
    19      }
    20  
    21  
    22      .footer-links{
    23          margin-bottom: 20px;
    24  
    25          .li-under a:hover::after,
    26          .li-under a:focus::after {
    27              opacity: 1;
    28              -webkit-transform: skewY(15deg) translateY(8px);
    29              -moz-transform: skewY(15deg) translateY(8px);
    30              transform: skewY(15deg) translateY(8px);
    31          }
    32  
    33          .li-under a::after {
    34              background-color: $purple;
    35          }
    36  
    37          li{
    38              a{
    39                  text-transform: uppercase;
    40                  font-size: 12px;
    41                  letter-spacing: 3px;
    42                  @include transition( color 0.3s ease );
    43                  font-weight: 400;
    44  
    45                  &:hover{
    46                      color: $purple;
    47                      @include transition( color 0.3s ease );
    48                      background-color: transparent;
    49                  }
    50              }
    51          }
    52      }
    53  
    54      .buttons.navbar-nav{
    55          float: none;
    56          display: inline-block;
    57          margin-bottom: 30px;
    58          margin-top: 0px;
    59  
    60          li{
    61              &.first{
    62                  margin-right: 12px;
    63              }
    64  
    65              &.download{
    66                  a{
    67                    background: image-url('icon-download-purple.png')  8px 6px no-repeat;
    68                    @include img-retina("icon-download-purple.png", "icon-download-purple@2x.png", 20px, 20px);
    69                  }
    70              }
    71  
    72              &.github{
    73                  a{
    74                    background: image-url('icon-github-purple.png')  8px 6px no-repeat;
    75                    @include img-retina("icon-github-purple.png", "icon-github-purple@2x.png", 20px, 20px);
    76                  }
    77              }
    78          }
    79  
    80          li > a {
    81              padding-top: 6px;
    82              padding-bottom: 6px;
    83              padding-left: 40px;
    84          }
    85      }
    86  
    87      .footer-hashi{
    88          float: right;
    89          padding-top: 5px;
    90          letter-spacing: 2px;
    91  
    92          a{
    93              color: black;
    94              font-weight: $font-weight-lato-xb;
    95          }
    96  
    97          span{
    98              margin-right: 10px;
    99          }
   100  
   101          .hashi-logo{
   102              display: inline-block;
   103              vertical-align: middle;
   104              i{
   105                  display: inline-block;
   106                  width: 37px;
   107                  height: 40px;
   108                  background: image-url('footer-hashicorp-logo.png') 0 0 no-repeat;
   109                  @include img-retina("footer-hashicorp-logo.png", "footer-hashicorp-logo@2x.png", 37px, 40px);
   110              }
   111          }
   112      }
   113  }
   114  
   115  .page-sub{
   116      #footer-wrap{
   117          padding: 0;
   118      }
   119  
   120      #footer{
   121          padding: 140px 0 100px;
   122          background-color: $black;
   123          transform: none;
   124  
   125          >.container{
   126              transform: none;
   127          }
   128  
   129          a{
   130              color: white;
   131          }
   132  
   133          .footer-hashi{
   134              color: white;
   135  
   136              .hashi-logo{
   137                  i{
   138                      background: image-url('footer-hashicorp-white-logo.png') 0 0 no-repeat;
   139                      @include img-retina("footer-hashicorp-white-logo.png", "footer-hashicorp-white-logo@2x.png", 37px, 40px);
   140                  }
   141              }
   142          }
   143      }
   144  }
   145  
   146  
   147  @media (min-width: 1500px) {
   148      body.page-home{
   149          #footer{
   150              margin-top: -60px;
   151              padding: 190px 0 40px;
   152          }
   153      }
   154  }
   155  
   156  @media (max-width: 992px) {
   157      .page-sub #footer, #footer{
   158          .footer-hashi {
   159              padding-top: 14px;
   160              span{
   161                  margin-right: 6px;
   162              }
   163              .hashi-logo{
   164                  i{
   165                      margin-top: -6px;
   166                      width: 20px;
   167                      height: 22px;
   168                      background-size: 20px 22px;
   169                  }
   170              }
   171          }
   172      }
   173  
   174  
   175  }
   176  
   177  @media (max-width: 768px) {
   178      #footer{
   179          padding: 100px 0 40px;
   180          text-align: center;
   181  
   182          .footer-links{
   183              float: none;
   184              display: inline-block;
   185          }
   186  
   187          .footer-hashi {
   188              float: none;
   189              display: inline-block;
   190  
   191              .pull-right{
   192                  float: none !important;
   193              }
   194          }
   195      }
   196  }
   197  
   198  @media (max-width: 320px) {
   199      #footer{
   200          text-align: center;
   201  
   202          .footer-links{
   203              .li-under{
   204                  float: none !important;
   205              }
   206          }
   207      }
   208  }
   209  
   210