Manage social links
This commit is contained in:
parent
156be7c151
commit
172fc556b5
|
@ -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
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
:root{--font-family: 'b612';--font: 'b612', sans-serif;--background: #282a36;--selection:#44475a;--comment:#6272a4;--purple:#bd93f9;--white:#f8f8f2;--pink:#ff79c6;--orange: #ffb86c}@font-face{font-family:'b612';src:url("fonts/b612-regular.ttf") format("truetype")}body{background-color:var(--background);color:var(--white)}footer{text-align:center;color:var(--comment);font-family:var(--font);font-size:0.75rem;font-weight:400}footer a{color:var(--orange)}#userPhoto{width:96px;height:96px;display:block;margin:35px auto 20px;border-radius:50%;border:solid var(--purple) 2px}#userName{width:100%;color:var(--pink);font-family:var(--font);font-size:1rem;font-weight:400;text-align:center;text-decoration:none;line-height:1.25;display:block}#links{max-width:675px;width:auto;display:block;margin:27px auto}.link{display:block;margin-bottom:20px;padding:17px;background-color:var(--background);color:var(--comment);font-family:var(--font);font-size:1rem;font-weight:500;border-radius:5px;border:solid var(--purple) 1px;text-align:center;text-decoration:none;transition:all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99)}.link:hover{background-color:var(--selection);color:var(--purple)}#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)}#instagram.social{mask-image:url("/img/social/instagram.svg")}#liberapay.social{mask-image:url("/img/social/liberapay.svg")}#linkedin.social{mask-image:url("/img/social/linkedin.svg")}#mastodon.social{mask-image:url("/img/social/mastodon.svg")}#pleroma.social{mask-image:url("/img/social/pleroma.svg")}#twitter.social{mask-image:url("/img/social/twitter.svg")}
|
|
@ -1,78 +0,0 @@
|
|||
/*
|
||||
DarkMode style sheet is based on the work of izmcm :
|
||||
https://github.com/MichaelBarney/LinkFree/commits/master/Templates/DarkMode/
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bgColor:#1C1C1C;
|
||||
--accentColor: #E6E6E6;
|
||||
--font: 'b612', sans-serif;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'b612';
|
||||
src: url('fonts/b612-regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: var(--bgColor);
|
||||
}
|
||||
|
||||
#userPhoto{
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
display: block;
|
||||
margin: 35px auto 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#userName{
|
||||
color: #bbb;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
display: block;
|
||||
font-family: var(--font);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#links{
|
||||
max-width: 675px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 27px auto;
|
||||
}
|
||||
.link{
|
||||
display: block;
|
||||
background-color: var(--accentColor);
|
||||
color: var(--bgColor);
|
||||
font-family: var(--font);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 17px;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: all .25s cubic-bezier(.08,.59,.29,.99);
|
||||
border: solid var(--accentColor) 2px;
|
||||
}
|
||||
|
||||
.link:hover{
|
||||
background-color: var(--bgColor);
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
|
||||
color: #bbb;
|
||||
|
||||
font-family: var(--font);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--accentColor)
|
||||
}
|
|
@ -102,3 +102,38 @@ footer a {
|
|||
background-color: var(--selection);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
#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");
|
||||
}
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -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>
|
After Width: | Height: | Size: 1.1 KiB |
|
@ -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>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -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>
|
After Width: | Height: | Size: 1006 B |
|
@ -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>
|
After Width: | Height: | Size: 291 B |
|
@ -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>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -33,6 +33,39 @@
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div id="social-links">
|
||||
{% if section.extra.instagram %}
|
||||
<a href="{{ section.extra.instagram }}" title="Instagram" target="_blank">
|
||||
<div class="social" id="instagram"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.extra.liberapay %}
|
||||
<a href="{{ section.extra.liberapay }}" title="Liberapay" target="_blank">
|
||||
<div class="social" id="liberapay"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.extra.linkedin %}
|
||||
<a href="{{ section.extra.linkedin }}" title="LinkedIn" target="_blank">
|
||||
<div class="social" id="linkedin"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.extra.mastodon %}
|
||||
<a href="{{ section.extra.mastodon }}" title="Mastodon" target="_blank">
|
||||
<div class="social" id="mastodon"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.extra.pleroma %}
|
||||
<a href="{{ section.extra.pleroma }}" title="Pleroma" target="_blank">
|
||||
<div class="social" id="pleroma"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.extra.twitter %}
|
||||
<a href="{{ section.extra.twitter }}" title="Twitter" target="_blank">
|
||||
<div class="social" id="twitter"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock toc %}
|
||||
|
|
Loading…
Reference in New Issue