assets/main/sass/layout/_footer.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Footer */
   8
   9         #footer {
  10                 @include color(alt);
  11                 @include vendor('display', 'flex');
  12                 background-color: _palette(alt, bg);
  13                 color: _palette(fg-light);
  14                 cursor: default;
  15                 position: relative;
  16                 margin: 0 auto;
  17                 width: calc(100% - #{_size(padding) * 2});
  18                 max-width: _size(wrapper);
  19                 z-index: 2;
  20
  21                 > section {
  22                         @include vendor('flex-basis', '50%');
  23                         @include vendor('flex-grow', '1');
  24                         @include vendor('flex-shrink', '1');
  25                         @include padding((_size(padding) * 2), (_size(padding) * 2));
  26                         border-left: solid 2px _palette(alt, border);
  27
  28                         &:first-child {
  29                                 border-left: 0;
  30                         }
  31
  32                         &.split {
  33                                 @include vendor('display', 'flex');
  34                                 @include vendor('flex-direction', 'column');
  35                                 padding: 0;
  36
  37                                 > section {
  38                                         @include padding((_size(padding) * 2) - 1, (_size(padding) * 2));
  39                                         border-top: solid 2px _palette(alt, border);
  40
  41                                         &:first-child {
  42                                                 @include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (_size(padding), 0, 0, 0));
  43                                                 border-top: 0;
  44                                         }
  45
  46                                         &:last-child {
  47                                                 @include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (0, 0, _size(padding), 0));
  48                                         }
  49                                 }
  50
  51                                 &.contact {
  52                                         > section {
  53                                                 @include vendor('display', 'flex');
  54                                                 @include vendor('align-items', 'center');
  55                                                 padding: (_size(padding) * 1.575) (_size(padding) * 2);
  56
  57                                                 > * {
  58                                                         margin-bottom: 0;
  59                                                 }
  60
  61                                                 > :first-child {
  62                                                         @include vendor('flex-shrink', '0');
  63                                                         @include vendor('flex-grow', '0');
  64                                                         width: 6rem;
  65                                                 }
  66
  67                                                 > :last-child {
  68                                                         @include vendor('flex-shrink', '1');
  69                                                         @include vendor('flex-grow', '1');
  70                                                 }
  71
  72                                                 &:first-child {
  73                                                         padding: (_size(padding) * 2) (_size(padding) * 2) ((_size(padding) * 2) - 1) (_size(padding) * 2);
  74                                                 }
  75
  76                                                 &:last-child {
  77                                                         padding: ((_size(padding) * 2) - 1) (_size(padding) * 2) (_size(padding) * 2) (_size(padding) * 2);
  78                                                 }
  79
  80                                                 &.alt {
  81                                                         @include vendor('align-items', 'flex-start');
  82
  83                                                         > :last-child {
  84                                                                 margin-top: -0.325rem;
  85                                                         }
  86                                                 }
  87                                         }
  88                                 }
  89                         }
  90                 }
  91
  92                 form label,
  93                 h3,
  94                 p {
  95                         font-size: 0.8rem;
  96                 }
  97
  98                 @include breakpoint('<=medium') {
  99                         display: block;
 100
 101                         > section {
 102                                 border-top: solid 2px _palette(alt, border);
 103
 104                                 &:first-child {
 105                                         border-top: 0;
 106                                 }
 107
 108                                 &.split {
 109                                         > section {
 110                                                 @include padding((_size(padding) * 2), (_size(padding) * 2));
 111
 112                                                 &:first-child {
 113                                                         @include padding((_size(padding) * 2), (_size(padding) * 2));
 114                                                 }
 115
 116                                                 &:last-child {
 117                                                         @include padding((_size(padding) * 2), (_size(padding) * 2));
 118                                                 }
 119                                         }
 120
 121                                         &.contact {
 122                                                 > section {
 123                                                         padding: (_size(padding) * 2);
 124
 125                                                         &:first-child {
 126                                                                 padding: (_size(padding) * 2);
 127                                                         }
 128
 129                                                         &:last-child {
 130                                                                 padding: (_size(padding) * 2);
 131                                                         }
 132                                                 }
 133                                         }
 134                                 }
 135                         }
 136
 137                         form label,
 138                         h3,
 139                         p {
 140                                 font-size: 0.9rem;
 141                         }
 142                 }
 143
 144                 @include breakpoint('<=small') {
 145                         > section {
 146                                 @include padding((_size(padding) * 1), (_size(padding) * 1));
 147
 148                                 &.split {
 149                                         > section {
 150                                                 @include padding((_size(padding) * 1), (_size(padding) * 1));
 151
 152                                                 &:first-child {
 153                                                         @include padding((_size(padding) * 1), (_size(padding) * 1));
 154                                                 }
 155
 156                                                 &:last-child {
 157                                                         @include padding((_size(padding) * 1), (_size(padding) * 1));
 158                                                 }
 159                                         }
 160
 161                                         &.contact {
 162                                                 > section {
 163                                                         padding: (_size(padding) * 1);
 164
 165                                                         &:first-child {
 166                                                                 padding: (_size(padding) * 1);
 167                                                         }
 168
 169                                                         &:last-child {
 170                                                                 padding: (_size(padding) * 1);
 171                                                         }
 172                                                 }
 173                                         }
 174                                 }
 175                         }
 176                 }
 177
 178                 @include breakpoint('<=xsmall') {
 179                         width: 100%;
 180                 }
 181         }
 182
 183         #copyright {
 184                 @include color-typography(invert);
 185                 position: relative;
 186                 color: transparentize(_palette(invert, fg), 0.75);
 187                 cursor: default;
 188                 font-family: _font(family-heading);
 189                 font-size: 0.8rem;
 190                 font-weight: _font(weight-heading);
 191                 letter-spacing: 0.075em;
 192                 line-height: 1.5;
 193                 text-align: center;
 194                 text-transform: uppercase;
 195                 margin: (_size(padding) * 2) auto (_size(padding) * 4) auto;
 196                 width: calc(100% - #{_size(padding) * 2});
 197                 max-width: _size(wrapper);
 198                 z-index: 2;
 199
 200                 a {
 201                         color: inherit;
 202                         border-bottom-color: inherit;
 203                 }
 204
 205                 ul {
 206                         list-style: none;
 207                         margin: 0;
 208                         padding-left: 0;
 209
 210                         li {
 211                                 border-left: solid 2px;
 212                                 display: inline-block;
 213                                 line-height: 1;
 214                                 margin-left: 1rem;
 215                                 padding-left: 1rem;
 216
 217                                 &:first-child {
 218                                         border-left: 0;
 219                                         margin-left: 0;
 220                                         padding-left: 0;
 221                                 }
 222                         }
 223                 }
 224
 225                 @include breakpoint('<=large') {
 226                         margin: (_size(padding) * 2) auto;
 227                 }
 228
 229                 @include breakpoint('<=xsmall') {
 230                         ul {
 231                                 li {
 232                                         border-left: 0;
 233                                         margin: 1rem 0 0 0;
 234                                         padding-left: 0;
 235                                         display: block;
 236
 237                                         &:first-child {
 238                                                 margin-top: 0;
 239                                         }
 240                                 }
 241                         }
 242                 }
 243         }