github.com/atsaki/terraform@v0.4.3-0.20150919165407-25bba5967654/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