[Summary view] [Print] [Text view]

   1  // Footer
   2  .site-footer {
   3      padding-top: 0;
   4      padding-bottom: calc(1.7 * var(--global--spacing-vertical));
   5      @extend %responsive-alignwide-width;
   6  
   7      // Increase the top vertical spacing when there is no widget area.
   8      .no-widgets & {
   9          margin-top: calc(6 * var(--global--spacing-vertical));
  10      }
  11  
  12      @include media(mobile-only) {
  13  
  14          .no-widgets & {
  15              margin-top: calc(3 * var(--global--spacing-vertical));
  16          }
  17      }
  18  }
  19  
  20  // Footer Branding
  21  .site-footer > .site-info {
  22      padding-top: var(--global--spacing-vertical);
  23      color: var(--footer--color-text);
  24      font-family: var(--footer--font-family);
  25      font-size: var(--footer--font-size);
  26      line-height: var(--global--line-height-body);
  27      border-top: 3px solid var(--global--color-border);
  28  
  29      .site-name {
  30          text-transform: var(--branding--title--text-transform);
  31          font-size: var(--branding--title--font-size);
  32      }
  33  
  34      .privacy-policy,
  35      .powered-by {
  36          margin-top: calc(0.5 * var(--global--spacing-vertical));
  37      }
  38  
  39      @include media(desktop) {
  40          display: flex;
  41          align-items: center;
  42  
  43          .site-name {
  44              margin-right: calc(0.5 * var(--global--spacing-vertical));
  45          }
  46  
  47          .privacy-policy,
  48          .powered-by {
  49              margin-top: initial;
  50              margin-left: auto;
  51          }
  52  
  53          .privacy-policy + .powered-by {
  54              margin-left: calc(0.5 * var(--global--spacing-vertical));
  55          }
  56      }
  57  
  58      a {
  59          color: var(--footer--color-link);
  60  
  61          &:link,
  62          &:visited,
  63          &:active {
  64              color: var(--footer--color-link);
  65          }
  66  
  67          &:hover {
  68              color: var(--footer--color-link-hover);
  69          }
  70  
  71          &:focus {
  72              color: var(--footer--color-link-hover);
  73  
  74              .is-dark-theme & {
  75                  color: var(--wp--style--color--link, var(--global--color-background));
  76              }
  77  
  78              // Change colors when the body background is white.
  79              .has-background-white & {
  80                  color: var(--wp--style--color--link, var(--global--color-white));
  81              }
  82          }
  83      }
  84  }