footer.scss (1563B)
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 .powered-by { 35 margin-top: calc(0.5 * var(--global--spacing-vertical)); 36 } 37 38 @include media(desktop) { 39 display: flex; 40 align-items: center; 41 42 .powered-by { 43 margin-top: initial; 44 margin-left: auto; 45 } 46 } 47 48 a { 49 color: var(--footer--color-link); 50 51 &:link, 52 &:visited, 53 &:active { 54 color: var(--footer--color-link); 55 } 56 57 &:hover { 58 color: var(--footer--color-link-hover); 59 } 60 61 &:focus { 62 color: var(--footer--color-link-hover); 63 64 .is-dark-theme & { 65 color: var(--wp--style--color--link, var(--global--color-background)); 66 } 67 68 // Change colors when the body background is white. 69 .has-background-white & { 70 color: var(--wp--style--color--link, var(--global--color-white)); 71 } 72 } 73 } 74 }