footer.sass 5.40 KiB
footer#document-footer
background: $footer-background-color
color: $footer-color
padding-bottom: $spacing3
padding-top: $spacing3
position: relative
@include media-breakpoint-down(desktop)
z-index: $zindex-footer
a
@include link($footer-color)
.logo
img
height: $footer-logo-height
max-width: 100%
width: auto
@include media-breakpoint-up(desktop)
height: $footer-logo-height-desktop
ul
@include list-reset
li
+ li
margin-top: $spacing0
a
@include link($footer-color)
text-decoration-color: transparent
.footer
&-site
@include small
* + *
margin-top: $spacing0
&-social, &-legals, &-credit
@include meta
&-credit
display: block
margin-top: $spacing0
&-search
padding-top: $spacing0 !important
&-i18n
@include dropdown-i18n
button
@include button-reset
@include icon(caret-bottom, after)
@include meta
align-items: center
color: inherit
cursor: pointer
display: flex
justify-content: start
padding-left: 0
text-align: left
&:focus,
&:focus-visible
box-shadow: none
&[aria-expanded="true"]
background: $dropdown-i18n-background-color
justify-content: space-between
color: $dropdown-i18n-color
width: 100%
+ .dropdown-menu
animation-duration: unset
&::after
transform: rotate(-180deg)
&::before
margin-right: $spacing0
&::after
margin-left: $spacing0
button[aria-expanded="true"],
.dropdown-menu
outline: px2rem(10) solid $dropdown-i18n-background-color
min-width: $spacing4
.dropdown-menu
@include meta
background: $dropdown-i18n-background-color
a
color: $dropdown-i18n-color
@include media-breakpoint-up(desktop)
left: 0
margin-top: px2rem(17)
max-height: calc(100vh - var(--header-height))
padding: 0
position: absolute
width: fit-content
a:focus-visible
outline-offset: -1px
@if $footer-icons-enabled
&-social
.nav-social + .site-links
margin-top: $spacing1
&.site-links li
align-items: center
display: flex
justify-content: flex-end
position: relative
a
@include stretched-link
&.facebook
@include icon(social-facebook, after)
&.instagram
@include icon(social-instagram, after)
&.linkedin
@include icon(social-linkedin, after)
&.mastodon
@include icon(social-mastodon, after)
&.youtube
@include icon(social-youtube, after)
&.x
@include icon(social-x, after)
&.peertube
@include icon(social-peertube, after)
&.vimeo
@include icon(social-vimeo, after)
&.tiktok
@include icon(social-tiktok, after)
&.github
@include icon(social-github, after)
&.email
@include icon(social-email, after)
&.rss
@include icon(social-rss, after)
&::after
font-size: $footer-icons-size
@include media-breakpoint-up(desktop)
margin-right: half(-$spacing0)
padding-left: $spacing0
@include media-breakpoint-down(desktop)
width: fit-content
flex-direction: row-reverse
&::after
margin-right: $spacing0
transform: translateX(-25%)
@if $footer-text-hidden
&-social.site-links li
font-size: 0
@include media-breakpoint-down(desktop)
.container
+ .container,
> * + *
margin-top: $spacing3
@include media-breakpoint-up(desktop)
.container
display: flex
justify-content: space-between
padding-bottom: $spacing3
+ .container
align-items: flex-end
padding-top: $spacing3
padding-bottom: 0
.footer
&-site, &-social
text-align: right
&-social
order: 2