Add social icons, make transition for links hover

content/about.md

@@ -1,3 +1,3 @@
-# О нас
+# О радио
 
-Кто прочитал тот лох.
+Скоро здесь появится информация.

static/svg-inject.min.js

@@ -0,0 +1,10 @@
+!function(o,l){var r,a,s="createElement",g="getElementsByTagName",b="length",E="style",d="title",y="undefined",k="setAttribute",w="getAttribute",x=null,A="__svgInject",C="--inject-",S=new RegExp(C+"\\d+","g"),I="LOAD_FAIL",t="SVG_NOT_SUPPORTED",L="SVG_INVALID",v=["src","alt","onload","onerror"],j=l[s]("a"),G=typeof SVGRect!=y,f={useCache:!0,copyAttributes:!0,makeIdsUnique:!0},N={clipPath:["clip-path"],"color-profile":x,cursor:x,filter:x,linearGradient:["fill","stroke"],marker:["marker",
+"marker-end","marker-mid","marker-start"],mask:x,pattern:["fill","stroke"],radialGradient:["fill","stroke"]},u=1,c=2,O=1;function T(e){return(r=r||new XMLSerializer).serializeToString(e)}function P(e,r){var t,n,i,o,a=C+O++,f=/url\("?#([a-zA-Z][\w:.-]*)"?\)/g,u=e.querySelectorAll("[id]"),c=r?[]:x,l={},s=[],d=!1;if(u[b]){for(i=0;i<u[b];i++)(n=u[i].localName)in N&&(l[n]=1);for(n in l)(N[n]||[n]).forEach(function(e){s.indexOf(e)<0&&s.push(e)});s[b]&&s.push(E);var v,p,m,h=e[g]("*"),y=e;for(i=-1;y!=x;
+){if(y.localName==E)(m=(p=y.textContent)&&p.replace(f,function(e,r){return c&&(c[r]=1),"url(#"+r+a+")"}))!==p&&(y.textContent=m);else if(y.hasAttributes()){for(o=0;o<s[b];o++)v=s[o],(m=(p=y[w](v))&&p.replace(f,function(e,r){return c&&(c[r]=1),"url(#"+r+a+")"}))!==p&&y[k](v,m);["xlink:href","href"].forEach(function(e){var r=y[w](e);/^\s*#/.test(r)&&(r=r.trim(),y[k](e,r+a),c&&(c[r.substring(1)]=1))})}y=h[++i]}for(i=0;i<u[b];i++)t=u[i],c&&!c[t.id]||(t.id+=a,d=!0)}return d}function V(e,r,t,n){if(r){
+r[k]("data-inject-url",t);var i=e.parentNode;if(i){n.copyAttributes&&function c(e,r){for(var t,n,i,o=e.attributes,a=0;a<o[b];a++)if(n=(t=o[a]).name,-1==v.indexOf(n))if(i=t.value,n==d){var f,u=r.firstElementChild;u&&u.localName.toLowerCase()==d?f=u:(f=l[s+"NS"]("http://www.w3.org/2000/svg",d),r.insertBefore(f,u)),f.textContent=i}else r[k](n,i)}(e,r);var o=n.beforeInject,a=o&&o(e,r)||r;i.replaceChild(a,e),e[A]=u,m(e);var f=n.afterInject;f&&f(e,a)}}else D(e,n)}function p(){for(var e={},r=arguments,
+t=0;t<r[b];t++){var n=r[t];for(var i in n)n.hasOwnProperty(i)&&(e[i]=n[i])}return e}function _(e,r){if(r){var t;try{t=function i(e){return(a=a||new DOMParser).parseFromString(e,"text/xml")}(e)}catch(o){return x}return t[g]("parsererror")[b]?x:t.documentElement}var n=l.createElement("div");return n.innerHTML=e,n.firstElementChild}function m(e){e.removeAttribute("onload")}function n(e){console.error("SVGInject: "+e)}function i(e,r,t){e[A]=c,t.onFail?t.onFail(e,r):n(r)}function D(e,r){m(e),i(e,L,r)
+}function F(e,r){m(e),i(e,t,r)}function M(e,r){i(e,I,r)}function q(e){e.onload=x,e.onerror=x}function R(e){n("no img element")}var e=function z(e,r){var t=p(f,r),h={};function n(a,f){f=p(t,f);var e=function(r){var e=function(){var e=f.onAllFinish;e&&e(),r&&r()};if(a&&typeof a[b]!=y){var t=0,n=a[b];if(0==n)e();else for(var i=function(){++t==n&&e()},o=0;o<n;o++)u(a[o],f,i)}else u(a,f,e)};return typeof Promise==y?e():new Promise(e)}function u(u,c,e){if(u){var r=u[A];if(r)Array.isArray(r)?r.push(e
+):e();else{if(q(u),!G)return F(u,c),void e();var t=c.beforeLoad,n=t&&t(u)||u[w]("src");if(!n)return""===n&&M(u,c),void e();var i=[];u[A]=i;var l=function(){e(),i.forEach(function(e){e()})},s=function f(e){return j.href=e,j.href}(n),d=c.useCache,v=c.makeIdsUnique,p=function(r){d&&(h[s].forEach(function(e){e(r)}),h[s]=r)};if(d){var o,a=function(e){if(e===I)M(u,c);else if(e===L)D(u,c);else{var r,t=e[0],n=e[1],i=e[2];v&&(t===x?(t=P(r=_(n,!1),!1),e[0]=t,e[2]=t&&T(r)):t&&(n=function o(e){
+return e.replace(S,C+O++)}(i))),r=r||_(n,!1),V(u,r,s,c)}l()};if(typeof(o=h[s])!=y)return void(o.isCallbackQueue?o.push(a):a(o));(o=[]).isCallbackQueue=!0,h[s]=o}!function m(e,r,t){if(e){var n=new XMLHttpRequest;n.onreadystatechange=function(){if(4==n.readyState){var e=n.status;200==e?r(n.responseXML,n.responseText.trim()):400<=e?t():0==e&&t()}},n.open("GET",e,!0),n.send()}}(s,function(e,r){var t=e instanceof Document?e.documentElement:_(r,!0),n=c.afterLoad;if(n){var i=n(t,r)||t;if(i){
+var o="string"==typeof i;r=o?i:T(t),t=o?_(i,!0):i}}if(t instanceof SVGElement){var a=x;if(v&&(a=P(t,!1)),d){var f=a&&T(t);p([a,r,f])}V(u,t,s,c)}else D(u,c),p(L);l()},function(){M(u,c),p(I),l()})}}else R()}return G&&function i(e){var r=l[g]("head")[0];if(r){var t=l[s](E);t.type="text/css",t.appendChild(l.createTextNode(e)),r.appendChild(t)}}('img[onload^="'+e+'("]{visibility:hidden;}'),n.setOptions=function(e){t=p(t,e)},n.create=z,n.err=function(e,r){e?e[A]!=c&&(q(e),G?(m(e),M(e,t)):F(e,t),r&&(m(
+e),e.src=r)):R()},o[e]=n}("SVGInject");"object"==typeof module&&"object"==typeof module.exports&&(module.exports=e)}(window,document);

static/telegram.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="30px" height="30px"><path d="M 25.154297 3.984375 C 24.829241 3.998716 24.526384 4.0933979 24.259766 4.2011719 C 24.010014 4.3016357 23.055766 4.7109106 21.552734 5.3554688 C 20.048394 6.0005882 18.056479 6.855779 15.931641 7.7695312 C 11.681964 9.5970359 6.9042108 11.654169 4.4570312 12.707031 C 4.3650097 12.746607 4.0439208 12.849183 3.703125 13.115234 C 3.3623292 13.381286 3 13.932585 3 14.546875 C 3 15.042215 3.2360676 15.534319 3.5332031 15.828125 C 3.8303386 16.121931 4.144747 16.267067 4.4140625 16.376953 C 5.3912284 16.775666 8.4218473 18.015862 8.9941406 18.25 C 9.195546 18.866983 10.29249 22.222526 10.546875 23.044922 C 10.714568 23.587626 10.874198 23.927519 11.082031 24.197266 C 11.185948 24.332139 11.306743 24.45034 11.453125 24.542969 C 11.511635 24.579989 11.575789 24.608506 11.640625 24.634766 L 11.644531 24.636719 C 11.659471 24.642719 11.67235 24.652903 11.6875 24.658203 C 11.716082 24.668202 11.735202 24.669403 11.773438 24.677734 C 11.925762 24.726927 12.079549 24.757812 12.216797 24.757812 C 12.80196 24.757814 13.160156 24.435547 13.160156 24.435547 L 13.181641 24.419922 L 16.191406 21.816406 L 19.841797 25.269531 C 19.893193 25.342209 20.372542 26 21.429688 26 C 22.057386 26 22.555319 25.685026 22.875 25.349609 C 23.194681 25.014192 23.393848 24.661807 23.478516 24.21875 L 23.478516 24.216797 C 23.557706 23.798129 26.921875 6.5273437 26.921875 6.5273438 L 26.916016 6.5507812 C 27.014496 6.1012683 27.040303 5.6826405 26.931641 5.2695312 C 26.822973 4.8564222 26.536648 4.4608905 26.181641 4.2480469 C 25.826669 4.0352506 25.479353 3.9700339 25.154297 3.984375 z M 24.966797 6.0742188 C 24.961997 6.1034038 24.970391 6.0887279 24.962891 6.1230469 L 24.960938 6.1347656 L 24.958984 6.1464844 C 24.958984 6.1464844 21.636486 23.196371 21.513672 23.845703 C 21.522658 23.796665 21.481573 23.894167 21.439453 23.953125 C 21.379901 23.91208 21.257812 23.859375 21.257812 23.859375 L 21.238281 23.837891 L 16.251953 19.121094 L 12.726562 22.167969 L 13.775391 17.96875 C 13.775391 17.96875 20.331562 11.182109 20.726562 10.787109 C 21.044563 10.471109 21.111328 10.360953 21.111328 10.251953 C 21.111328 10.105953 21.035234 10 20.865234 10 C 20.712234 10 20.506484 10.14875 20.396484 10.21875 C 18.963383 11.132295 12.671823 14.799141 9.8515625 16.439453 C 9.4033769 16.256034 6.2896636 14.981472 5.234375 14.550781 C 5.242365 14.547281 5.2397349 14.548522 5.2480469 14.544922 C 7.6958673 13.491784 12.47163 11.434667 16.720703 9.6074219 C 18.84524 8.6937992 20.838669 7.8379587 22.341797 7.1933594 C 23.821781 6.5586849 24.850125 6.1218894 24.966797 6.0742188 z"/></svg>

static/vk.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="30px" height="30px">    <path d="M 5 3 C 3.895 3 3 3.895 3 5 L 3 19 C 3 20.105 3.895 21 5 21 L 19 21 C 20.105 21 21 20.105 21 19 L 21 5 C 21 3.895 20.105 3 19 3 L 5 3 z M 5 5 L 19 5 L 19 19 L 5 19 L 5 5 z M 11.791016 8.8574219 C 11.201016 8.8524219 10.700969 8.8600469 10.417969 8.9980469 C 10.229969 9.0900469 10.084828 9.2965937 10.173828 9.3085938 C 10.282828 9.3225937 10.529109 9.3746875 10.662109 9.5546875 C 10.831109 9.7856875 10.826172 10.304688 10.826172 10.304688 C 10.826172 10.304687 10.922656 11.732156 10.597656 11.910156 C 10.374656 12.032156 10.069109 11.784437 9.4121094 10.648438 C 9.0751094 10.065437 8.8222656 9.421875 8.8222656 9.421875 C 8.8222656 9.421875 8.7725469 9.3003281 8.6855469 9.2363281 C 8.5785469 9.1583281 8.4296875 9.1328125 8.4296875 9.1328125 L 6.859375 9.140625 C 6.859375 9.140625 6.6221563 9.1411406 6.5351562 9.2441406 C 6.4581563 9.3361406 6.5292969 9.5175781 6.5292969 9.5175781 C 6.5292969 9.5175781 7.7602969 12.386844 9.1542969 13.839844 C 10.433297 15.171844 11.882812 15.050781 11.882812 15.050781 L 12.541016 15.050781 C 12.541016 15.050781 12.740797 15.062125 12.841797 14.953125 C 12.934797 14.852125 12.931641 14.695312 12.931641 14.695312 C 12.931641 14.695312 12.919125 13.811641 13.328125 13.681641 C 13.732125 13.553641 14.249828 14.535109 14.798828 14.912109 C 15.212828 15.198109 15.529297 15.136719 15.529297 15.136719 L 16.998047 15.117188 C 16.998047 15.117188 17.765297 15.068938 17.404297 14.460938 C 17.374297 14.410937 17.1925 14.013312 16.3125 13.195312 C 15.3905 12.339313 15.514047 12.477094 16.623047 10.996094 C 17.299047 10.095094 17.569375 9.5445938 17.484375 9.3085938 C 17.403375 9.0825937 16.90625 9.1425781 16.90625 9.1425781 L 15.253906 9.1523438 C 15.253906 9.1523438 15.130062 9.1344531 15.039062 9.1894531 C 14.950063 9.2434531 14.892578 9.3671875 14.892578 9.3671875 C 14.892578 9.3671875 14.63125 10.066156 14.28125 10.660156 C 13.54625 11.913156 13.251859 11.978391 13.130859 11.900391 C 12.850859 11.720391 12.921875 11.174156 12.921875 10.785156 C 12.921875 9.5711562 13.1045 9.0645938 12.5625 8.9335938 C 12.3825 8.8895937 12.251016 8.8624219 11.791016 8.8574219 z"/></svg>

themes/swr/assets/css/style.scss

@@ -58,10 +58,11 @@ aside {
 a {
     color: #cc61be;
     text-decoration: none;
+    transition: 0.3s;
 }
 
 a:hover {
-    color: #faa0ee;
+    filter: brightness(150%);
 }
 
 #calendar {
@@ -87,6 +88,30 @@ article {
     padding-bottom: 24px;
 }
 
+.social-link {
+    fill: #cc61be;
+    transition: 0.3s;
+}
+
+.social-link:hover {
+    filter: brightness(150%);
+}
+
+#main-header {
+    text-shadow: 0px 0px 11px white;
+    transition: 0.3s;
+}
+
+#header-link {
+    color: white;
+    transition: unset;
+}
+
+#main-header:hover {
+    // color: red;
+    text-shadow: 0px 0px 18px white;
+}
+
 @media only screen and (max-width: 768px) {
     #wrapper {
         flex-direction: column;

themes/swr/layouts/partials/footer.html

@@ -0,0 +1,4 @@
+<div id="social">
+    <a href="https://t.me/southwestradio" style="filter: unset;"><img class="social-link" src="/telegram.svg" onload="SVGInject(this)" /></a>
+    <a href="https://vk.com/southwest_radio" style="filter: unset;"><img class="social-link" src="/vk.svg" onload="SVGInject(this)" /></a>
+</div>

themes/swr/layouts/partials/head.html

@@ -5,4 +5,5 @@
     {{ $style := $sass | resources.ToCSS }}
 
 	<link rel="stylesheet" href="{{ $style.Permalink }}">
+    <script src="/svg-inject.min.js"></script>
 </head>

themes/swr/layouts/partials/header.html

@@ -1 +1 @@
-<a href="/" style="color:white"><h1 style="text-shadow: 0px 0px 11px white;">{{ .Site.Title }}</h1></a>
+<a href="/" id="header-link"><h1 id="main-header">{{ .Site.Title }}</h1></a>