angouleme: add social links in header (#67428)

static/angouleme/_custom.scss

@@ -42,6 +42,24 @@ div#header {
 	}
 }
 
+.social-links {
+	position: absolute;
+	bottom: calc(#{$nav-height} + 5px);
+	@media ($max-mobile-viewport) {
+		bottom: 5px;
+	}
+	right: 1rem;
+	display: flex;
+}
+
+.social-links--item {
+	margin: 0rem 0.1rem;
+
+	&[href=""] {
+		display: None;
+	}
+}
+
 div.gru-nav ul li a {
 	font-size: $nav-font-size;
 	text-transform: uppercase;

templates/variants/angouleme/combo/page_template.html

@@ -0,0 +1,30 @@
+{% extends "combo/page_template.html" %}
+{% load static %}
+
+{% block header-bottom %}
+<div class="social-links">
+  <a href="{{site_url}}" class="social-links--item" title="Site Internet">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/website.png"></img>
+  </a>
+  <a href="{{facebook_url}}" class="social-links--item" title="Facebook">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/facebook.png"></img>
+  </a>
+  <a href="{{instagram_url}}" class="social-links--item" title="Instagram">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/instagram.png"></img>
+  </a>
+  <a href="{{linked_in_url}}" class="social-links--item" title="Linked In">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/linked-in.png"></img>
+  </a>
+  <a href="{{twitter_url}}" class="social-links--item" title="Twitter">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/twitter.png"></img>
+  </a>
+  <a href="{{youtube_url}}" class="social-links--item" title="Youtube">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/youtube.png"></img>
+  </a>
+  <a href="{{vimeo_url}}" class="social-links--item" title="Vimeo">
+    <img src="{{site_base}}{% static "" %}{{css_variant}}/img/vimeo.png"></img>
+  </a>
+</div>
+{% endblock %}
+
+