Merge pull request #149 from noesya/style/footer-social

Style/footer social 

assets/sass/_theme/_configuration.sass

@@ -194,6 +194,8 @@ $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: false !default
+$footer-text-hidden: false !default
 
 // Hero
 $hero-height: 300px !default

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: $h3-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

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 -}}

layouts/partials/footer/social.html

 {{ $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</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