<commit_before>@import '../../theme';

$newsletterMargin: grid(3);
$newsletterBg: #333;

// Newsletter Signup
// ---
.newsletter-signup {
  position:relative;
  z-index:10;
  width:100%;
  padding: $newsletterMargin;
  background: $newsletterBg;
  color: $grey2a;
  .content-inner {
    max-width: grid(34);
  }
  p {
    @include defaultFont(12px);
    line-height: 15px;
    color: $grey3;
    margin-bottom: grid(2);
  }
  .signup-form {
    display: flex;
  }
  .form-control {
    margin-right: grid(2);
    font-size:12px;
    height: grid(5);
  }
  .btn.btn-primary {
    padding: 0 grid(2);
    font-size:10px;
    height: grid(5);
  }
}
// display signup form in one line on tablet+
@media(min-width: $gtMobile) {
  .newsletter-signup {
    .content-inner {
      max-width: $maxContentWidth;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      margin: 0 grid(2) 0 0;
      width: grid(26);
      font-size: 13px;
      line-height: 19px;
      color: $white;
    }
    .form-control {
      font-size: 13px;
      width: grid(34);
      height: grid(7);
      margin-right: grid(2);
    }
    .btn.btn-primary {
      font-size: 15px;
      height: grid(7);
      padding: 0 grid(7);
    }
  }
}
// Boost widths and margins at small desktop+
@media(min-width: $gtTablet) {
  .newsletter-signup {
    p, .form-control { margin-right: grid(7); }
    p { width: grid(33); }
    .form-control { width: grid(38); }
    .btn.btn-primary { width: grid(30); }
  }
}
// Boost font sizes at large desktop
@media(min-width: $gtLaptop) {
  .newsletter-signup {
    p { line-height: 22px; }
    p, .form-control { font-size: 14px; }
  }
}

// Footer wrapper
// ---
footer {
  position: relative;
  z-index:10;
  width:100%;
  background: linear-gradient(180deg, $footerGradientFrom 0%, $footerGradientTo 100%);
  padding: grid(5) $pageMargin;
  color: $white;
  a {
    color: $white;
    &:hover { color: $linkColor; text-decoration: none; }
  }
}
// boost height / margin on tablet+
@media(min-width: $gtMobile) {
  footer {
    height: 500px;
    padding: 0;
  }
}
// boost height for desktop+
@media(min-width: $gtLaptop) {
  footer {
    height: 550px;
  }
}

// FOOTER LAYOUT
// ---
.footer-content {
  margin:auto;
  max-width: $maxContentWidth;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  // padding on immediate children
  > * { padding: grid(2) 0; }
  .footer-logo { order:1; }
  .footer-navigation { order:2; }
  .footer-copyright { order:3; }
  .footer-princeton { order:4; }
  .footer-social { order:5; }
  .footer-funders { order:6; }
  .footer-credits { order:7; }
}
@media(min-width: $gtMobile) {
  .footer-content {
    @include fill-parent();
    margin:auto;
    height: grid(40);
    width: grid(88);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .footer-logo { order: 1; }
    .footer-copyright { order: 2; }
    .footer-princeton { order: 3; }
    .footer-funders { order: 4; }
    .footer-navigation { order: 5; }
    .footer-social { order: 6; }
    .footer-credits { order: 7; }
  }
}
@media(min-width: $gtTablet) {
  .footer-content {
    width: grid(107);
    height:334px;
  }
}
@media(min-width: $gtLaptop) {
  .footer-content {
    width: grid(137);
  }
}


// EVICTION LAB LOGO
// ---
.footer-logo {
  width:100%;
  text-align:center;
  svg {
    width: 196px;
    height: 14px;
    margin: auto;
    // logo colours
    .logo-letters { fill: $white; }
    .logo-shapes { fill: $color1; }
  }
}
@media(min-width: $gtMobile) {
  .footer-logo {
    width:50%;
    text-align: left;
    svg {
      display: block;
      width: 250px;
      height: 18px;
      margin: 0;
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-logo {
    svg {
      width: 300px;
      height: 22px;
    }
  }
}

// SITE LINKS
// --- 
.footer-navigation {
  width:100%;
  ul {
    width:100%;
    padding:0;
    margin:0; 
    list-style: none;
    text-align:center;
    @include defaultFont(12px);
    line-height: 1;
  }
  li { height: grid(3.5); }
}
@media(min-width: $gtMobile) {
  .footer-navigation {
    width:50%;
    ul {
      font-size: 13px;
      width: grid(40);
      display:flex;
      flex-direction: column;
      flex-wrap:wrap;
      height: grid(19);
      text-align:left;
      li { 
        width: grid(20);
        height: grid(3);
      }
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-navigation {
    ul {
      font-size: 14px;
      height: grid(22);
      li {
        width: grid(30); // 240px columns for links
        height: grid(3.5);
      }
    }
  }
}
@media(min-width: $gtLaptop) {
  .footer-navigation ul li {
    width: grid(36); // 288px columns for links
  }
}

// PRINCETON LOGO
// ---
.footer-princeton {
  padding: 0 grid(2) grid(1) 0;
  img { width: grid(10); }
}
@media(min-width: $gtMobile) {
  .footer-princeton img { 
    width: 110px; 
    height: 31px; 
  }
}
@media(min-width: $gtTablet) {
  .footer-princeton img { 
    width: 125px; 
    height: 36px; 
  }
}

// SOCIAL ICONS
// ---
.footer-social {
  p { 
    display:none;
    @include defaultFont(10px);
    text-align:center;
    line-height: 28px;
  }
  ul {
    width:100%;
    padding:0;
    margin:0; 
    list-style: none;
    text-align:center;
  }
  li {
    display:inline-block;
    margin-right: grid(1);
    &:last-child { margin-right: 0; }
  }
  a.btn.btn-border {
    position:relative;
    border: none;
    color: $white;
    display:block;
    width: grid(4.5);
    height: grid(4.5);
    box-sizing: content-box;
    &:hover .icon {
      fill: $footerCopyrightColor;
    }
    .icon {
      @include fill-parent();
      margin:auto;
      width: grid(2.5);
      height: grid(2.5);
      fill: #fff;
    }
  }
}
// horizontal layout
@media(min-width: $gtMobile) {
  .footer-social {
    margin:0;
    padding:0;
    p, ul { width: auto; margin:0; }
    ul { margin-left: -1*grid(2); }
    p {
      color: $footerCopyrightColor;
      display:block;
      font-size: 12px;
      margin-right: grid(4); 
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-social p {
    font-size: 13px;
  }
}

// COPYRIGHT MESSAGE / PRINCETON LOGO
// ---
.footer-copyright {
  width:100%;
  margin-bottom: grid(1);
  color: $footerCopyrightColor;
  text-align:center;
  @include defaultFont(10px);
  .copyright-text p { margin: 0 0 grid(0.5) 0; }
  img { 
    width: grid(10); // 80px
    margin-top: grid(2); 
  }
}
@media(min-width: $gtMobile) {
  .footer-copyright {
    text-align: left;
    font-size: 12px;
    line-height: 24px;
    width: 50%;
    .copyright-text p { margin: 0; }
  }
}
@media(min-width: $gtTablet) {
  .footer-copyright {
    font-size: 13px;
    line-height: 25px;
  }
}

// FUNDERS PARAGRAPH BLOCK
// ---
.footer-funders {
  width:100%;
  text-align:center;
  @include defaultFont(10px);
  color: $footerCopyrightColor;
  line-height: 17px;
  p { 
    max-width: grid(35); 
    margin:auto;
  }
  strong {
    font-family: $boldFontStack;
    display: block;
  }
}
@media(min-width: $gtMobile) {
  .footer-funders {
    width:50%;
    text-align: left;
    line-height: 24px;
    font-size: 12px;
    padding-bottom:0;
    p { margin: 0; }
  }
}
@media(min-width: $gtTablet) {
  .footer-funders {
    line-height: 25px;
    font-size: 13px;
    p { 
      max-width: grid(42); 
    }
  }
}
@media(min-width: $gtLaptop) {
  .footer-funders p { 
    max-width: grid(49); 
  }
}


// CREDITS FOR PHOTOS
// ---
.footer-credits {
  text-align:center;
  @include defaultFont(10px);
  color: $footerCopyrightColor;
  max-width: grid(35);
  line-height: 17px;
  margin:auto;
}
@media(min-width: $gtMobile) {
  .footer-credits {
    font-size:12px;
    width:auto;
    margin: -1*grid(10) 0 0 grid(20);
  }
}
@media(min-width: $gtTablet) {
  .footer-credits {
    font-size:13px;
    margin-left: grid(30); 
    margin-top: -1*grid(10) - 2px; // shift to account for font difference
  }
}
@media(min-width: $gtLaptop) {
  .footer-credits {
    margin-left: grid(36); 
  }
}

// No credits on map tool
.map-tool .footer-credits {
  display: none;
}<commit_msg>fix footer columns when spanish<commit_after>@import '../../theme';

$newsletterMargin: grid(3);
$newsletterBg: #333;

// Newsletter Signup
// ---
.newsletter-signup {
  position:relative;
  z-index:10;
  width:100%;
  padding: $newsletterMargin;
  background: $newsletterBg;
  color: $grey2a;
  .content-inner {
    max-width: grid(34);
  }
  p {
    @include defaultFont(12px);
    line-height: 15px;
    color: $grey3;
    margin-bottom: grid(2);
  }
  .signup-form {
    display: flex;
  }
  .form-control {
    margin-right: grid(2);
    font-size:12px;
    height: grid(5);
  }
  .btn.btn-primary {
    padding: 0 grid(2);
    font-size:10px;
    height: grid(5);
  }
}
// display signup form in one line on tablet+
@media(min-width: $gtMobile) {
  .newsletter-signup {
    .content-inner {
      max-width: $maxContentWidth;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      margin: 0 grid(2) 0 0;
      width: grid(26);
      font-size: 13px;
      line-height: 19px;
      color: $white;
    }
    .form-control {
      font-size: 13px;
      width: grid(34);
      height: grid(7);
      margin-right: grid(2);
    }
    .btn.btn-primary {
      font-size: 15px;
      height: grid(7);
      padding: 0 grid(7);
    }
  }
}
// Boost widths and margins at small desktop+
@media(min-width: $gtTablet) {
  .newsletter-signup {
    p, .form-control { margin-right: grid(7); }
    p { width: grid(33); }
    .form-control { width: grid(38); }
    .btn.btn-primary { width: grid(30); }
  }
}
// Boost font sizes at large desktop
@media(min-width: $gtLaptop) {
  .newsletter-signup {
    p { line-height: 22px; }
    p, .form-control { font-size: 14px; }
  }
}

// Footer wrapper
// ---
footer {
  position: relative;
  z-index:10;
  width:100%;
  background: linear-gradient(180deg, $footerGradientFrom 0%, $footerGradientTo 100%);
  padding: grid(5) $pageMargin;
  color: $white;
  a {
    color: $white;
    &:hover { color: $linkColor; text-decoration: none; }
  }
}
// boost height / margin on tablet+
@media(min-width: $gtMobile) {
  footer {
    height: 500px;
    padding: 0;
  }
}
// boost height for desktop+
@media(min-width: $gtLaptop) {
  footer {
    height: 550px;
  }
}

// FOOTER LAYOUT
// ---
.footer-content {
  margin:auto;
  max-width: $maxContentWidth;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  // padding on immediate children
  > * { padding: grid(2) 0; }
  .footer-logo { order:1; }
  .footer-navigation { order:2; }
  .footer-copyright { order:3; }
  .footer-princeton { order:4; }
  .footer-social { order:5; }
  .footer-funders { order:6; }
  .footer-credits { order:7; }
}
@media(min-width: $gtMobile) {
  .footer-content {
    @include fill-parent();
    margin:auto;
    height: grid(43);
    width: grid(88);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .footer-logo { order: 1; }
    .footer-copyright { order: 2; }
    .footer-princeton { order: 3; }
    .footer-funders { order: 4; }
    .footer-navigation { order: 5; }
    .footer-social { order: 6; }
    .footer-credits { order: 7; }
  }
}
@media(min-width: $gtTablet) {
  .footer-content {
    width: grid(107);
    height:334px;
  }
}
@media(min-width: $gtLaptop) {
  .footer-content {
    width: grid(137);
  }
}


// EVICTION LAB LOGO
// ---
.footer-logo {
  width:100%;
  text-align:center;
  svg {
    width: 196px;
    height: 14px;
    margin: auto;
    // logo colours
    .logo-letters { fill: $white; }
    .logo-shapes { fill: $color1; }
  }
}
@media(min-width: $gtMobile) {
  .footer-logo {
    width:50%;
    text-align: left;
    svg {
      display: block;
      width: 250px;
      height: 18px;
      margin: 0;
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-logo {
    svg {
      width: 300px;
      height: 22px;
    }
  }
}

// SITE LINKS
// --- 
.footer-navigation {
  width:100%;
  ul {
    width:100%;
    padding:0;
    margin:0; 
    list-style: none;
    text-align:center;
    @include defaultFont(12px);
    line-height: 1;
  }
  li { height: grid(3.5); }
}
@media(min-width: $gtMobile) {
  .footer-navigation {
    width:50%;
    ul {
      font-size: 13px;
      width: grid(40);
      display:flex;
      flex-direction: column;
      flex-wrap:wrap;
      height: grid(19);
      text-align:left;
      li { 
        width: grid(20);
        height: grid(3);
      }
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-navigation {
    ul {
      font-size: 14px;
      height: grid(22);
      li {
        width: grid(30); // 240px columns for links
        height: grid(3.5);
      }
    }
  }
}
@media(min-width: $gtLaptop) {
  .footer-navigation ul li {
    width: grid(36); // 288px columns for links
  }
}

// PRINCETON LOGO
// ---
.footer-princeton {
  padding: 0 grid(2) grid(1) 0;
  img { width: grid(10); }
}
@media(min-width: $gtMobile) {
  .footer-princeton img { 
    width: 110px; 
    height: 31px; 
  }
}
@media(min-width: $gtTablet) {
  .footer-princeton img { 
    width: 125px; 
    height: 36px; 
  }
}

// SOCIAL ICONS
// ---
.footer-social {
  p { 
    display:none;
    @include defaultFont(10px);
    text-align:center;
    line-height: 28px;
  }
  ul {
    width:100%;
    padding:0;
    margin:0; 
    list-style: none;
    text-align:center;
  }
  li {
    display:inline-block;
    margin-right: grid(1);
    &:last-child { margin-right: 0; }
  }
  a.btn.btn-border {
    position:relative;
    border: none;
    color: $white;
    display:block;
    width: grid(4.5);
    height: grid(4.5);
    box-sizing: content-box;
    &:hover .icon {
      fill: $footerCopyrightColor;
    }
    .icon {
      @include fill-parent();
      margin:auto;
      width: grid(2.5);
      height: grid(2.5);
      fill: #fff;
    }
  }
}
// horizontal layout
@media(min-width: $gtMobile) {
  .footer-social {
    margin:0;
    padding:0;
    p, ul { width: auto; margin:0; }
    ul { margin-left: -1*grid(2); }
    p {
      color: $footerCopyrightColor;
      display:block;
      font-size: 12px;
      margin-right: grid(4); 
    }
  }
}
@media(min-width: $gtTablet) {
  .footer-social p {
    font-size: 13px;
  }
}

// COPYRIGHT MESSAGE / PRINCETON LOGO
// ---
.footer-copyright {
  width:100%;
  margin-bottom: grid(1);
  color: $footerCopyrightColor;
  text-align:center;
  @include defaultFont(10px);
  .copyright-text p { margin: 0 0 grid(0.5) 0; }
  img { 
    width: grid(10); // 80px
    margin-top: grid(2); 
  }
}
@media(min-width: $gtMobile) {
  .footer-copyright {
    text-align: left;
    font-size: 12px;
    line-height: 24px;
    width: 50%;
    .copyright-text p { margin: 0; }
  }
}
@media(min-width: $gtTablet) {
  .footer-copyright {
    font-size: 13px;
    line-height: 25px;
  }
}

// FUNDERS PARAGRAPH BLOCK
// ---
.footer-funders {
  width:100%;
  text-align:center;
  @include defaultFont(10px);
  color: $footerCopyrightColor;
  line-height: 17px;
  p { 
    max-width: grid(35); 
    margin:auto;
  }
  strong {
    font-family: $boldFontStack;
    display: block;
  }
}
@media(min-width: $gtMobile) {
  .footer-funders {
    width:50%;
    text-align: left;
    line-height: 24px;
    font-size: 12px;
    padding-bottom:0;
    p { margin: 0; }
  }
}
@media(min-width: $gtTablet) {
  .footer-funders {
    line-height: 25px;
    font-size: 13px;
    p { 
      max-width: grid(42); 
    }
  }
}
@media(min-width: $gtLaptop) {
  .footer-funders p { 
    max-width: grid(49); 
  }
}


// CREDITS FOR PHOTOS
// ---
.footer-credits {
  text-align:center;
  @include defaultFont(10px);
  color: $footerCopyrightColor;
  max-width: grid(35);
  line-height: 17px;
  margin:auto;
}
@media(min-width: $gtMobile) {
  .footer-credits {
    font-size:12px;
    width:auto;
    margin: -1*grid(10) 0 0 grid(20);
  }
}
@media(min-width: $gtTablet) {
  .footer-credits {
    font-size:13px;
    margin-left: grid(30); 
    margin-top: -1*grid(10) - 2px; // shift to account for font difference
  }
}
@media(min-width: $gtLaptop) {
  .footer-credits {
    margin-left: grid(36); 
  }
}

// No credits on map tool
.map-tool .footer-credits {
  display: none;
}
{'fraction_non_alphanumeric': 0.16540342298288507, 'fraction_numerical': 0.03569682151589242, 'mean_word_length': 2.338298306468068, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4793246', 'n_tokens_mistral': 6763, 'n_tokens_neox': 6304, 'n_words': 1280}