diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass index 55733b36812f56090d8c89400acee4ecdfae8285..bc6beccb31c852f39b79ee95eed11599754d604a 100644 --- a/assets/sass/_theme/_configuration.sass +++ b/assets/sass/_theme/_configuration.sass @@ -194,6 +194,9 @@ $footer-color: $color-text !default $footer-background-color: $color-background-alt !default $footer-logo-height: $header-logo-height !default $footer-logo-height-desktop: $footer-logo-height !default +$footer-icons-enabled: true !default +$footer-icons-size: px2rem(32) !default +$footer-text-hidden: false !default // Hero $hero-height: 300px !default diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass index 3f30abab743d6e40cc74905571cacdf01e739d24..36671e6fb7a95659cbcf5f8d99b2bdf4a522d3b7 100644 --- a/assets/sass/_theme/design-system/footer.sass +++ b/assets/sass/_theme/design-system/footer.sass @@ -31,6 +31,47 @@ footer#document-footer &-credit display: block margin-top: $spacing0 + @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) + &::after + font-size: $footer-icons-size + @include media-breakpoint-up(md) + padding-left: $spacing0 + @include media-breakpoint-down(desktop) + width: fit-content + flex-direction: row-reverse + &::after + margin-right: $spacing0 + @if $footer-text-hidden + &-social.site-links li + font-size: 0 @include media-breakpoint-down(desktop) .container diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html index 20cc58baf3f99d5aa6b50fbf4886fa5bcfb8acad..fe87efa54abd0eef6ed39aebdf6ebbca65035454 100644 --- a/layouts/partials/commons/menu.html +++ b/layouts/partials/commons/menu.html @@ -24,6 +24,9 @@ {{ if eq $context.RelPermalink .target }} {{ $linkClass = "active" }} {{ end }} + {{ if eq $kind "social" }} + {{- $itemClass = printf .title | lower -}} + {{ end }} {{- if gt (len .children) 0 -}} {{- $itemClass = printf "%shas-children" $itemClass -}} {{- end -}} diff --git a/layouts/partials/footer/social.html b/layouts/partials/footer/social.html index 4b7cb175f65b328a081e31a50adbe295f0e4c890..095c8eb3185bc4e17975c5acccc3a61e22a68dce 100644 --- a/layouts/partials/footer/social.html +++ b/layouts/partials/footer/social.html @@ -1,10 +1,62 @@ {{ $menu := partial "GetMenu" "social" }} +{{ $site_social_links := index site.Data.website.social }} + + {{ if $menu }} {{ partial "commons/menu.html" (dict "kind" "social" "level" 1 "class" "nav-social" - )}} + )}} {{ end }} +{{ if $site_social_links }} + <ul class="footer-social site-links"> + {{ with $site_social_links.mastodon}} + <li class="mastodon"> + <a href="{{ . }}" rel="noreferrer" title="Mastodon" target="_blank">Mastodon</a> + </li> + {{ end}} + {{ with $site_social_links.peertube}} + <li class="peertube"> + <a href="{{ . }}" rel="noreferrer" title="Peertube" target="_blank">Peertube</a> + </li> + {{ end}} + {{ with $site_social_links.x}} + <li class="x"> + <a href="{{ . }}" rel="noreferrer" title="X, ex-Twitter" target="_blank">X (ex-Twitter)</a> + </li> + {{ end}} + {{ with $site_social_links.linkedin}} + <li class="linkedin"> + <a href="{{ . }}" rel="noreferrer" title="LinkedIn" target="_blank">LinkedIn</a> + </li> + {{ end}} + {{ with $site_social_links.youtube}} + <li class="youtube"> + <a href="{{ . }}" rel="noreferrer" title="Youtube" target="_blank">Youtube</a> + </li> + {{ end}} + {{ with $site_social_links.vimeo}} + <li class="vimeo"> + <a href="{{ . }}" rel="noreferrer" title="Vimeo" target="_blank">Vimeo</a> + </li> + {{ end}} + {{ with $site_social_links.instagram}} + <li class="instagram"> + <a href="{{ . }}" rel="noreferrer" title="Instagram" target="_blank">Instagram</a> + </li> + {{ end}} + {{ with $site_social_links.facebook}} + <li class="facebook"> + <a href="{{ . }}" rel="noreferrer" title="" target="_blank">Facebook</a> + </li> + {{ end}} + {{ with $site_social_links.tiktok}} + <li class="tiktok"> + <a href="{{ . }}" rel="noreferrer" title="TikTok" target="_blank">TikTok</a> + </li> + {{ end}} + </ul> +{{ end }} \ No newline at end of file