Add initial social section

* Facebook
* Twitter
* Telegram
* Google Plus
* Instagram
* Pinterest
* VK
* LinkedIn
* GitHub
* GitLab
* Stack Overflow
* Mastodon

README.md

@@ -32,6 +32,20 @@ cardsPerRow = 2 # Possible values: 1, 2, 3
 #mainSections = ["post"] # Set main page sections
 #dateFormat = "2006-01-02" # change the format of dates
 
+[Params.Social]
+#facebook = "username"
+#twitter = "username"
+#telegram = "username"
+#googleplus = "profileid"
+#instagram = "username"
+#pinterest = "username"
+#vk = "username"
+#linkedin = "username"
+#github = "username"
+#gitlab = "username"
+#stackoverflow = "numberid"
+#mastodon = "username"
+
 [outputFormats]
   [outputFormats.MANIFEST]
     mediaType = "application/json"

layouts/partials/footer.html

@@ -1,4 +1,5 @@
 <footer class="footer">
+	{{- partial "footer_social.html" . }}
 	<div class="footer__copyright">© {{ now.Format "2006" }} {{ .Site.Title }}. <span class="footer__copyright-credits">{{ T "footer_credits" | safeHTML }}</span></div>
 </footer>
 <script src="{{ "js/modernizr.js" | relURL }}"></script>

layouts/partials/footer_social.html

@@ -0,0 +1,64 @@
+{{ if .Site.Params.social }}
+<div class="footer__social social">
+	{{- with .Param "social.facebook" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/{{ . }}">
+			{{ partial "svg/facebook.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.twitter" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://twitter.com/{{ . }}">
+			{{ partial "svg/twitter.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.telegram" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://t.me/{{ . }}">
+			{{ partial "svg/telegram.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.googleplus" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://plus.google.com/{{ . }}">
+			{{ partial "svg/googleplus.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.instagram" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/{{ . }}">
+			{{ partial "svg/instagram.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.pinterest" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://www.pinterest.com/{{ . }}">
+			{{ partial "svg/pinterest.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.vk" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://vk.com/{{ . }}">
+			{{ partial "svg/vk.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.linkedin" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://linkedin.com/in/{{ . }}">
+			{{ partial "svg/linkedin.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.github" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://github.com/{{ . }}">
+			{{ partial "svg/github.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.gitlab" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://gitlab.com/{{ . }}">
+			{{ partial "svg/gitlab.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.stackoverflow" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/users/{{ . }}">
+			{{ partial "svg/stackoverflow.svg" . }}
+		</a>
+	{{- end }}
+	{{- with .Param "social.mastodon" }}
+		<a class="social__link" target="_blank" rel="noopener noreferrer" href="https://mastodon.social/@{{ . }}">
+			{{ partial "svg/mastodon.svg" . }}
+		</a>
+	{{- end }}
+</div>
+{{ end }}

layouts/partials/svg/facebook.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Facebook" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M330 512V322h64l9-74h-73v-47c0-22 6-36 37-36h39V99c-7-1-30-3-57-3-57 0-95 34-95 98v54h-64v74h64v190z"/></svg>

layouts/partials/svg/github.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Github" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>

layouts/partials/svg/gitlab.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Gitlab" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M450 282l-22-67-43-133c-2-7-12-7-14 0l-43.3 133H184.3L141 82c-2-7-12-7-14 0L84 215l-22 67c-2 6 0 13 6 16l188 137 188-137c6-3 8-10 6-16z"/></svg>

layouts/partials/svg/googleplus.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Google+" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M191 234v47h72c-2 19-21 55-72 55-43 0-78-36-78-80s33-80 76-80c25 0 42 10 51 19l35-33a125 125 0 0 0-211 94c0 70 57 127 127 127 74 0 122-53 122-125l-2-24"/><path stroke-width="29" d="M404 192v118m59-59H345"/></svg>

layouts/partials/svg/instagram.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Instagram" role="img" width="32" height="32" viewBox="0 0 512 512"><g fill="none" stroke-width="29"><rect height="296" rx="78" width="296" x="108" y="108"/><circle cx="256" cy="256" r="69"/></g><circle cx="343" cy="169" r="19"/></svg>

layouts/partials/svg/linkedin.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="LinkedIn" role="img" width="32" height="32" viewBox="0 0 512 512"><circle cx="142" cy="138" r="37"/><path stroke-width="66" d="M244 194v198M142 194v198"/><path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32"/></svg>

layouts/partials/svg/mastodon.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Mastodon" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M416 197c0-74-49-96-49-96-42-22-172-24-222 0 0 0-49 22-49 96v59c2 72 14 145 81 162 33 9 89 18 140-6l-2-27s-27 7-58 7c-74 2-67-39-70-52 0 0 51 17 137 6 42-6 80-32 85-56 8-38 7-93 7-93zm-58 96h-35v-88c0-18-8-27-23-27-18 0-27 11-27 33v47h-34v-47c0-22-9-33-27-33-15 0-23 9-23 27v88h-35v-91c0-18 5-60 52-60 39 0 50 37 50 37s10-37 50-37c45 0 52 42 52 60v91z"/></svg>

layouts/partials/svg/pinterest.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Pinterest" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="m265 65c-104 0-157 75-157 138 0 37 14 71 45 83 5 2 10 0 12-5l3-18c2-6 1-7-2-12-9-11-15-24-15-43 0-56 41-106 108-106 60 0 92 37 92 85 0 64-28 116-70 116-23 0-40-18-34-42 6-27 19-57 19-77 0-18-9-34-30-34-24 0-42 25-42 58 0 20 7 34 7 34l-29 120a249 249 0 0 0 2 86l3-1c2-3 31-37 40-72l16-61c7 15 29 28 53 28 71 0 119-64 119-151 0-66-56-126-140-126z"/></svg>

layouts/partials/svg/stackoverflow.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Stack Overflow" role="img" width="32" height="32" viewBox="0 0 512 512"><g stroke-width="30"><path fill="none" d="M125 297v105h241V297"/><path d="M170 341h150m-144-68l148 31M199 204l136 64m-95-129l115 97M293 89l90 120"/></g></svg>

layouts/partials/svg/telegram.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="Telegram" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M199 404c-11 0-10-4-13-14l-32-105 245-144"/><path d="M199 404c7 0 11-4 16-8l45-43-56-34"/><path d="M204 319l135 99c14 9 26 4 30-14l55-258c5-22-9-32-24-25L79 245c-21 8-21 21-4 26l83 26 190-121c9-5 17-3 11 4"/></svg>

layouts/partials/svg/twitter.svg

@@ -0,0 +1 @@
+<svg class="social__icon social__icon--twitter" aria-label="Twitter" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M437 152a72 72 0 0 1-40 12 72 72 0 0 0 32-40 72 72 0 0 1-45 17 72 72 0 0 0-122 65 200 200 0 0 1-145-74 72 72 0 0 0 22 94 72 72 0 0 1-32-7 72 72 0 0 0 56 69 72 72 0 0 1-32 1 72 72 0 0 0 67 50 200 200 0 0 1-105 29 200 200 0 0 0 309-179 200 200 0 0 0 35-37"/></svg>

layouts/partials/svg/vk.svg

@@ -0,0 +1 @@
+<svg class="social__icon" aria-label="VK" role="img" width="32" height="32" viewBox="0 0 512 512"><path d="M274 363c5-1 14-3 14-15 0 0-1-30 13-34s32 29 51 42c14 9 25 8 25 8l51-1s26-2 14-23c-1-2-9-15-39-42-31-30-26-25 11-76 23-31 33-50 30-57-4-7-20-6-20-6h-57c-6 0-9 1-12 6 0 0-9 25-21 45-25 43-35 45-40 42-9-5-7-24-7-37 0-45 7-61-13-65-13-2-59-4-73 3-7 4-11 11-8 12 3 0 12 1 17 7 8 13 9 75-2 81-15 11-53-62-62-86-2-6-5-7-12-9H79c-6 0-15 1-11 13 27 56 83 193 184 192z"/></svg>

static/css/main.css

@@ -750,6 +750,27 @@ mark {
 	border-top: 2px solid #333;
 }
 
+.footer__social {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin-bottom: .5rem;
+}
+
+.social__link {
+	margin: .25rem;
+	font-size: 0;
+	background-color: #2a2a2a;
+	border: 1px solid #333;
+	fill: #999;
+	stroke: #999;
+}
+
+.social__link:hover {
+	fill: #c3c3c3;
+	stroke: #c3c3c3;
+}
+
 .footer__copyright {
 	text-align: center;
 }