From 320cc94e707c5a36623dec63b786631526150cff Mon Sep 17 00:00:00 2001
From: June Hardy <june@lacoloc.cafe>
Date: Mon, 26 Apr 2021 17:05:18 +0200
Subject: [PATCH] Manage social links

---
 content/june.md                 | 12 ++------
 sass/dracula.scss               | 52 +++++++++++++++++++++++++++------
 static/img/social/instagram.svg | 45 ++++++++++++++++++++++++++++
 static/img/social/liberapay.svg |  1 +
 static/img/social/linkedin.svg  | 45 ++++++++++++++++++++++++++++
 static/img/social/mastodon.svg  |  1 +
 static/img/social/pleroma.svg   |  1 +
 static/img/social/twitter.svg   | 49 +++++++++++++++++++++++++++++++
 templates/page.html             | 35 +++++++++++++++++++++-
 9 files changed, 222 insertions(+), 19 deletions(-)
 create mode 100644 static/img/social/instagram.svg
 create mode 100644 static/img/social/liberapay.svg
 create mode 100644 static/img/social/linkedin.svg
 create mode 100644 static/img/social/mastodon.svg
 create mode 100644 static/img/social/pleroma.svg
 create mode 100644 static/img/social/twitter.svg

diff --git a/content/june.md b/content/june.md
index 4c5b0cd..4abf683 100644
--- a/content/june.md
+++ b/content/june.md
@@ -4,6 +4,9 @@ title = "June"
 [extra]
 avatar = "june.png"
 style = "dracula.css"
+twitter = "https://twitter.com/The_DNS_Witch"
+pleroma = "https://social.lacoloc.cafe/june"
+liberapay = "https://liberapay.com/June_Cafe/"
 +++
 
 ## DNS Witch, le collectif
@@ -21,14 +24,5 @@ style = "dracula.css"
 ## Blog
 ### https://june.blog.wehost.lgbt
 
-## Liberapay
-### https://liberapay.com/June_Cafe/
-
 ## uTip
 ### https://utip.io/june_cafe
-
-## Twitter
-### https://twitter.com/The_DNS_Witch
-
-## Fediverse
-### https://social.lacoloc.cafe/june
diff --git a/sass/dracula.scss b/sass/dracula.scss
index 3cb1b1b..a51d98b 100644
--- a/sass/dracula.scss
+++ b/sass/dracula.scss
@@ -21,12 +21,12 @@
     src: url('fonts/b612-regular.ttf') format('truetype');
 }
 
-body{
+body {
     background-color: var(--background);
     color: var(--white);
 }
 
-footer{
+footer {
     text-align: center;
 
     color:var(--comment);
@@ -40,7 +40,7 @@ footer a {
     color: var(--orange)
 }
 
-#userPhoto{
+#userPhoto {
     width: 96px;
     height: 96px;
 
@@ -52,7 +52,7 @@ footer a {
     border: solid var(--purple) 2px;
 }
 
-#userName{
+#userName {
     width: 100%;
 
     color: var(--pink);
@@ -68,7 +68,7 @@ footer a {
     display: block;
 }
 
-#links{
+#links {
     max-width: 675px;
     width: auto;
 
@@ -76,7 +76,7 @@ footer a {
 
     margin: 27px auto;
 }
-.link{
+.link {
     display: block;
     margin-bottom: 20px;
     padding: 17px;
@@ -97,8 +97,42 @@ footer a {
     transition: all .25s cubic-bezier(.08,.59,.29,.99);
     
 }
-
-.link:hover{
+.link:hover {
     background-color: var(--selection);
     color: var(--purple);
-}
\ No newline at end of file
+}
+
+#social-links {
+    display: flex
+    justify-content: center
+}
+
+.social {
+    background-color: var(--comment);
+    height: 32px;
+    width: 32px;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    display: inline-block;
+}
+.social:hover {
+    background-color: var(--purple);
+}
+.social#instagram {
+    mask-image: url("/img/social/instagram.svg");
+}
+.social#liberapay {
+    mask-image: url("/img/social/liberapay.svg");
+}
+.social#linkedin {
+    mask-image: url("/img/social/linkedin.svg");
+}
+.social#mastodon {
+    mask-image: url("/img/social/mastodon.svg");
+}
+.social#pleroma {
+    mask-image: url("/img/social/pleroma.svg");
+}
+.social#twitter {
+    mask-image: url("/img/social/twitter.svg");
+}
diff --git a/static/img/social/instagram.svg b/static/img/social/instagram.svg
new file mode 100644
index 0000000..85912ed
--- /dev/null
+++ b/static/img/social/instagram.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<g id="XMLID_504_">
+	<path id="XMLID_505_" d="M38.52,0.012h222.978C282.682,0.012,300,17.336,300,38.52v222.978c0,21.178-17.318,38.49-38.502,38.49
+		H38.52c-21.184,0-38.52-17.313-38.52-38.49V38.52C0,17.336,17.336,0.012,38.52,0.012z M218.546,33.329
+		c-7.438,0-13.505,6.091-13.505,13.525v32.314c0,7.437,6.067,13.514,13.505,13.514h33.903c7.426,0,13.506-6.077,13.506-13.514
+		V46.854c0-7.434-6.08-13.525-13.506-13.525H218.546z M266.084,126.868h-26.396c2.503,8.175,3.86,16.796,3.86,25.759
+		c0,49.882-41.766,90.34-93.266,90.34c-51.487,0-93.254-40.458-93.254-90.34c0-8.963,1.37-17.584,3.861-25.759H33.35v126.732
+		c0,6.563,5.359,11.902,11.916,11.902h208.907c6.563,0,11.911-5.339,11.911-11.902V126.868z M150.283,90.978
+		c-33.26,0-60.24,26.128-60.24,58.388c0,32.227,26.98,58.375,60.24,58.375c33.278,0,60.259-26.148,60.259-58.375
+		C210.542,117.105,183.561,90.978,150.283,90.978z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/static/img/social/liberapay.svg b/static/img/social/liberapay.svg
new file mode 100644
index 0000000..bf78965
--- /dev/null
+++ b/static/img/social/liberapay.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Liberapay icon</title><path d="M2.32 0A2.321 2.321 0 0 0 0 2.32v19.36A2.321 2.321 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a2.953 2.953 0 0 0-.073.539.853.853 0 0 0 .09.432.7.7 0 0 0 .334.302c.157.077.378.126.661.147l-.49 2.008c-.772 0-1.38-.1-1.82-.3-.441-.203-.757-.477-.947-.826a2.391 2.391 0 0 1-.278-1.2c.005-.452.068-.933.188-1.445l2.074-8.67zm3.9 3.888c.61 0 1.135.092 1.576.277.44.185.802.438 1.085.76.283.32.493.696.629 1.126.136.43.204.89.204 1.379v.001c0 .794-.13 1.52-.392 2.179a5.16 5.16 0 0 1-1.086 1.706 4.84 4.84 0 0 1-1.665 1.118c-.648.267-1.353.4-2.114.4-.37 0-.74-.033-1.11-.098l-.735 2.956H9.403l2.71-11.298c.435-.13.934-.248 1.494-.351a10.045 10.045 0 0 1 1.821-.155zm-.31 2.041a4.67 4.67 0 0 0-.98.098l-1.143 4.752c.185.044.413.065.685.065.425 0 .812-.079 1.16-.237a2.556 2.556 0 0 0 .89-.661c.244-.283.435-.623.571-1.02a4.03 4.03 0 0 0 .204-1.315c0-.468-.104-.865-.31-1.192-.207-.326-.566-.49-1.077-.49z"/></svg>
\ No newline at end of file
diff --git a/static/img/social/linkedin.svg b/static/img/social/linkedin.svg
new file mode 100644
index 0000000..7c7cf97
--- /dev/null
+++ b/static/img/social/linkedin.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 310 310" style="enable-background:new 0 0 310 310;" xml:space="preserve">
+<g id="XMLID_801_">
+	<path id="XMLID_802_" d="M72.16,99.73H9.927c-2.762,0-5,2.239-5,5v199.928c0,2.762,2.238,5,5,5H72.16c2.762,0,5-2.238,5-5V104.73
+		C77.16,101.969,74.922,99.73,72.16,99.73z"/>
+	<path id="XMLID_803_" d="M41.066,0.341C18.422,0.341,0,18.743,0,41.362C0,63.991,18.422,82.4,41.066,82.4
+		c22.626,0,41.033-18.41,41.033-41.038C82.1,18.743,63.692,0.341,41.066,0.341z"/>
+	<path id="XMLID_804_" d="M230.454,94.761c-24.995,0-43.472,10.745-54.679,22.954V104.73c0-2.761-2.238-5-5-5h-59.599
+		c-2.762,0-5,2.239-5,5v199.928c0,2.762,2.238,5,5,5h62.097c2.762,0,5-2.238,5-5v-98.918c0-33.333,9.054-46.319,32.29-46.319
+		c25.306,0,27.317,20.818,27.317,48.034v97.204c0,2.762,2.238,5,5,5H305c2.762,0,5-2.238,5-5V194.995
+		C310,145.43,300.549,94.761,230.454,94.761z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/static/img/social/mastodon.svg b/static/img/social/mastodon.svg
new file mode 100644
index 0000000..b84142a
--- /dev/null
+++ b/static/img/social/mastodon.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Mastodon icon</title><path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/></svg>
\ No newline at end of file
diff --git a/static/img/social/pleroma.svg b/static/img/social/pleroma.svg
new file mode 100644
index 0000000..d2a7b7d
--- /dev/null
+++ b/static/img/social/pleroma.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Pleroma icon</title><path d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>
\ No newline at end of file
diff --git a/static/img/social/twitter.svg b/static/img/social/twitter.svg
new file mode 100644
index 0000000..3d8eb70
--- /dev/null
+++ b/static/img/social/twitter.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 310 310" style="enable-background:new 0 0 310 310;" xml:space="preserve">
+<g id="XMLID_826_">
+	<path id="XMLID_827_" d="M302.973,57.388c-4.87,2.16-9.877,3.983-14.993,5.463c6.057-6.85,10.675-14.91,13.494-23.73
+		c0.632-1.977-0.023-4.141-1.648-5.434c-1.623-1.294-3.878-1.449-5.665-0.39c-10.865,6.444-22.587,11.075-34.878,13.783
+		c-12.381-12.098-29.197-18.983-46.581-18.983c-36.695,0-66.549,29.853-66.549,66.547c0,2.89,0.183,5.764,0.545,8.598
+		C101.163,99.244,58.83,76.863,29.76,41.204c-1.036-1.271-2.632-1.956-4.266-1.825c-1.635,0.128-3.104,1.05-3.93,2.467
+		c-5.896,10.117-9.013,21.688-9.013,33.461c0,16.035,5.725,31.249,15.838,43.137c-3.075-1.065-6.059-2.396-8.907-3.977
+		c-1.529-0.851-3.395-0.838-4.914,0.033c-1.52,0.871-2.473,2.473-2.513,4.224c-0.007,0.295-0.007,0.59-0.007,0.889
+		c0,23.935,12.882,45.484,32.577,57.229c-1.692-0.169-3.383-0.414-5.063-0.735c-1.732-0.331-3.513,0.276-4.681,1.597
+		c-1.17,1.32-1.557,3.16-1.018,4.84c7.29,22.76,26.059,39.501,48.749,44.605c-18.819,11.787-40.34,17.961-62.932,17.961
+		c-4.714,0-9.455-0.277-14.095-0.826c-2.305-0.274-4.509,1.087-5.294,3.279c-0.785,2.193,0.047,4.638,2.008,5.895
+		c29.023,18.609,62.582,28.445,97.047,28.445c67.754,0,110.139-31.95,133.764-58.753c29.46-33.421,46.356-77.658,46.356-121.367
+		c0-1.826-0.028-3.67-0.084-5.508c11.623-8.757,21.63-19.355,29.773-31.536c1.237-1.85,1.103-4.295-0.33-5.998
+		C307.394,57.037,305.009,56.486,302.973,57.388z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/page.html b/templates/page.html
index 64f35e4..f1ce236 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -33,10 +33,43 @@
                 {% endfor %}
                 {% endif %}
                 {% endfor %}
+
+                <div id="social-links">
+                    {% if page.extra.instagram %}
+                    <a href="{{ page.extra.instagram }}">
+                        <div class="social" id="instagram"></div>
+                    </a>
+                    {% endif %}
+                    {% if page.extra.liberapay %}
+                    <a href="{{ page.extra.liberapay }}">
+                        <div class="social" id="liberapay"></div>
+                    </a>
+                    {% endif %}
+                    {% if page.extra.linkedin %}
+                    <a href="{{ page.extra.linkedin }}">
+                        <div class="social" id="linkedin"></div>
+                    </a>
+                    {% endif %}
+                    {% if page.extra.mastodon %}
+                    <a href="{{ page.extra.mastodon }}">
+                        <div class="social" id="mastodon"></div>
+                    </a>
+                    {% endif %}
+                    {% if page.extra.pleroma %}
+                    <a href="{{ page.extra.pleroma }}">
+                        <div class="social" id="pleroma"></div>
+                    </a>
+                    {% endif %}
+                    {% if page.extra.twitter %}
+                    <a href="{{ page.extra.twitter }}">
+                        <div class="social" id="twitter"></div>
+                    </a>
+                    {% endif %}
+                </div>
         </div>
         {% endif %}
         {% endblock toc %}
-        
+
         <footer>
             Powered by <a href="https://getzola.org" target="_blank">Zola</a> / <a href="https://github.com/june-coloc/ligilo" target="_blank">ligilo</a>
         </footer>