Add dark mode icons for social media accounts

layouts/partials/header.html

@@ -16,12 +16,12 @@
 
   <nav class="social">
     <menu>
-      <li><a style="--url: url(/icons/twitter.svg)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
-      <li><a style="--url: url(/icons/github.svg)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
-      <li><a style="--url: url(/icons/instagram.svg)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
+      <li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
+      <li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
+      <li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
       {{ with .Site.GetPage "/blog" }}
         {{ with .OutputFormats.Get "rss" }}
-        <li><a style="--url: url(/icons/rss.svg)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
+        <li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
         {{ end }}
       {{ end }}
     </menu>

static/icons/github-dark.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="-0.8 -1 52.999999 52.999999"
+   version="1.1"
+   id="svg308"
+   sodipodi:docname="github-dark.svg"
+   width="53"
+   height="53"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs312" />
+  <sodipodi:namedview
+     id="namedview310"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     showgrid="false"
+     width="53px"
+     inkscape:zoom="9.1485733"
+     inkscape:cx="1.3663333"
+     inkscape:cy="38.202678"
+     inkscape:window-width="1296"
+     inkscape:window-height="969"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg308" />
+  <path
+     d="m 25.7,3 c -13.26,0 -24,10.74 -24,24 0,10.62 6.87,19.59 16.41,22.77 1.2,0.21 1.65,-0.51 1.65,-1.14 0,-0.57 -0.03,-2.46 -0.03,-4.47 C 13.7,45.27 12.14,42.69 11.66,41.34 11.39,40.65 10.22,38.52 9.2,37.95 8.36,37.5 7.16,36.39 9.17,36.36 c 1.89,-0.03 3.24,1.74 3.69,2.46 2.16,3.63 5.61,2.61 6.99,1.98 0.21,-1.56 0.84,-2.61 1.53,-3.21 -5.34,-0.6 -10.92,-2.67 -10.92,-11.85 0,-2.61 0.93,-4.77 2.46,-6.45 -0.24,-0.6 -1.08,-3.06 0.24,-6.36 0,0 2.01,-0.63 6.6,2.46 1.92,-0.54 3.96,-0.81 6,-0.81 2.04,0 4.08,0.27 6,0.81 4.59,-3.12 6.6,-2.46 6.6,-2.46 1.32,3.3 0.48,5.76 0.24,6.36 1.53,1.68 2.46,3.81 2.46,6.45 0,9.21 -5.61,11.25 -10.95,11.85 0.87,0.75 1.62,2.19 1.62,4.44 0,3.21 -0.03,5.79 -0.03,6.6 0,0.63 0.45,1.38 1.65,1.14 A 24.039,24.039 0 0 0 49.7,27 C 49.7,13.74 38.96,3 25.7,3 Z"
+     id="path306"
+     style="stroke-width:3;fill:#ffffff;fill-opacity:1" />
+</svg>

static/icons/instagram-dark.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="-1.5 -3 53 53"
+   version="1.1"
+   id="svg1086"
+   sodipodi:docname="instagram-dark.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1090" />
+  <sodipodi:namedview
+     id="namedview1088"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     showgrid="false"
+     inkscape:zoom="13.566038"
+     inkscape:cx="4.4596662"
+     inkscape:cy="27.384562"
+     inkscape:window-width="1296"
+     inkscape:window-height="969"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1086" />
+  <path
+     d="M25 1c-6.52 0-7.34.03-9.9.14-2.55.12-4.3.53-5.82 1.12a11.76 11.76 0 0 0-4.25 2.77 11.76 11.76 0 0 0-2.77 4.25c-.6 1.52-1 3.27-1.12 5.82C1.03 17.66 1 18.48 1 25c0 6.5.03 7.33.14 9.88.12 2.56.53 4.3 1.12 5.83a11.76 11.76 0 0 0 2.77 4.25 11.76 11.76 0 0 0 4.25 2.77c1.52.59 3.27 1 5.82 1.11 2.56.12 3.38.14 9.9.14 6.5 0 7.33-.02 9.88-.14 2.56-.12 4.3-.52 5.83-1.11a11.76 11.76 0 0 0 4.25-2.77 11.76 11.76 0 0 0 2.77-4.25c.59-1.53 1-3.27 1.11-5.83.12-2.55.14-3.37.14-9.89 0-6.51-.02-7.33-.14-9.89-.12-2.55-.52-4.3-1.11-5.82a11.76 11.76 0 0 0-2.77-4.25 11.76 11.76 0 0 0-4.25-2.77c-1.53-.6-3.27-1-5.83-1.12A170.2 170.2 0 0 0 25 1zm0 4.32c6.4 0 7.16.03 9.69.14 2.34.11 3.6.5 4.45.83 1.12.43 1.92.95 2.76 1.8a7.43 7.43 0 0 1 1.8 2.75c.32.85.72 2.12.82 4.46.12 2.53.14 3.29.14 9.7 0 6.4-.02 7.16-.14 9.69-.1 2.34-.5 3.6-.82 4.45a7.43 7.43 0 0 1-1.8 2.76 7.43 7.43 0 0 1-2.76 1.8c-.84.32-2.11.72-4.45.82-2.53.12-3.3.14-9.7.14-6.4 0-7.16-.02-9.7-.14-2.33-.1-3.6-.5-4.45-.82a7.43 7.43 0 0 1-2.76-1.8 7.43 7.43 0 0 1-1.8-2.76c-.32-.84-.71-2.11-.82-4.45a166.5 166.5 0 0 1-.14-9.7c0-6.4.03-7.16.14-9.7.11-2.33.5-3.6.83-4.45a7.43 7.43 0 0 1 1.8-2.76 7.43 7.43 0 0 1 2.75-1.8c.85-.32 2.12-.71 4.46-.82 2.53-.11 3.29-.14 9.7-.14zm0 7.35a12.32 12.32 0 1 0 0 24.64 12.32 12.32 0 0 0 0-24.64zM25 33a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm15.68-20.8a2.88 2.88 0 1 0-5.76 0 2.88 2.88 0 0 0 5.76 0z"
+     id="path1084"
+     style="fill:#ffffff" />
+</svg>

static/icons/rss-dark.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--Generator: Apple Native CoreSVG 149-->
+
+<svg
+   version="1.1"
+   width="53"
+   height="53"
+   id="svg61"
+   sodipodi:docname="rss-dark.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs65" />
+  <sodipodi:namedview
+     id="namedview63"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     showgrid="false"
+     width="50px"
+     inkscape:zoom="6.0121264"
+     inkscape:cx="8.2333598"
+     inkscape:cy="32.184952"
+     inkscape:window-width="1312"
+     inkscape:window-height="969"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg61"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <g
+     id="Regular-M"
+     transform="matrix(0.65102047,0,0,0.65101968,-5.6059862,50.286349)"
+     style="fill:#ffffff">
+    <path
+       d="m 19.4336,1.36719 q 2.832,0 4.8584,-2.02637 2.0264,-2.02637 2.0264,-4.8584 0,-2.88086 -2.002,-4.90722 -2.0019,-2.0264 -4.8828,-2.0264 -2.832,0 -4.9072,2.0752 -2.0752,2.07522 -2.0752,5.00491 0,2.68554 2.0996,4.71191 2.0996,2.02637 4.8828,2.02637 z m -6.25,-29.78519 q 0,1.6114 1.1719,2.7588 1.1718,1.1475 2.7832,1.1475 5.8105,0 10.6201,2.8808 4.8096,2.8809 7.6904,7.6905 2.8809,4.80954 2.8809,10.62009 0,1.61133 1.1474,2.783201 1.1475,1.171875 2.7588,1.171875 1.6114,0 2.7832,-1.171875 1.1719,-1.171871 1.1719,-2.783201 0,-6.00586 -2.2705,-11.27929 -2.2705,-5.2734 -6.2744,-9.2529 -4.0039,-3.9795 -9.2774,-6.25 -5.2734,-2.2705 -11.2304,-2.2705 -1.6114,0 -2.7832,1.1718 -1.1719,1.1719 -1.1719,2.7832 z m 0,-19.3847 q 0,1.6113 1.1719,2.7588 1.1718,1.1474 2.7832,1.1474 8.3984,0 15.747,3.1494 7.3487,3.1494 12.9395,8.7403 5.5908,5.5908 8.7402,12.9394 3.1494,7.3486 3.1494,15.74709 0,1.61133 1.1475,2.783201 1.1475,1.171875 2.7588,1.171875 1.6113,0 2.7832,-1.171875 1.1719,-1.171871 1.1719,-2.783201 0,-10.00979 -3.7842,-18.79879 -3.7842,-8.7891 -10.4492,-15.4297 -6.6651,-6.6407 -15.4297,-10.4248 -8.7647,-3.7842 -18.7744,-3.7842 -1.6114,0 -2.7832,1.1719 -1.1719,1.1718 -1.1719,2.7832 z m 0,-20.6543 q 0,1.6113 1.1719,2.7832 1.1718,1.1718 2.7832,1.1718 10.1074,0 19.2871,3.0762 9.1797,3.0762 16.8213,8.7158 7.6416,5.6397 13.2568,13.2813 5.6152,7.6416 8.7158,16.8213 3.1006,9.1797 3.1006,19.28709 0,1.61133 1.1719,2.783201 1.1719,1.171875 2.7832,1.171875 1.6113,0 2.7588,-1.171875 1.1474,-1.171871 1.1474,-2.783201 0,-11.42579 -3.4912,-21.75289 -3.4912,-10.3272 -9.8388,-18.9698 -6.3477,-8.6425 -14.9903,-14.9902 -8.6425,-6.3477 -18.9941,-9.8389 -10.3516,-3.4912 -21.7285,-3.4912 -1.6114,0 -2.7832,1.1475 -1.1719,1.1474 -1.1719,2.7588 z"
+       id="path58"
+       style="fill:#ffffff" />
+  </g>
+</svg>

static/icons/twitter-dark.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Logo"
+   x="0px"
+   y="0px"
+   viewBox="0 0 248 248"
+   xml:space="preserve"
+   sodipodi:docname="Logo black.svg"
+   width="248"
+   height="248"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1147" /><sodipodi:namedview
+   id="namedview1145"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   height="248px"
+   inkscape:zoom="2.2751002"
+   inkscape:cx="62.634605"
+   inkscape:cy="119.77495"
+   inkscape:window-width="1296"
+   inkscape:window-height="969"
+   inkscape:window-x="0"
+   inkscape:window-y="25"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Logo" />
+<g
+   id="Logo_1_"
+   transform="translate(-0.075,22.496312)"
+   style="fill:#ffffff">
+	<path
+   id="white_background"
+   d="m 221.95,51.29 c 0.15,2.17 0.15,4.34 0.15,6.53 0,66.73 -50.8,143.69 -143.69,143.69 v -0.04 C 50.97,201.51 24.1,193.65 1,178.83 c 3.99,0.48 8,0.72 12.02,0.73 22.74,0.02 44.83,-7.61 62.72,-21.66 -21.61,-0.41 -40.56,-14.5 -47.18,-35.07 7.57,1.46 15.37,1.16 22.8,-0.87 C 27.8,117.2 10.85,96.5 10.85,72.46 c 0,-0.22 0,-0.43 0,-0.64 7.02,3.91 14.88,6.08 22.92,6.32 C 11.58,63.31 4.74,33.79 18.14,10.71 c 25.64,31.55 63.47,50.73 104.08,52.76 -4.07,-17.54 1.49,-35.92 14.61,-48.25 20.34,-19.12 52.33,-18.14 71.45,2.19 11.31,-2.23 22.15,-6.38 32.07,-12.26 -3.77,11.69 -11.66,21.62 -22.2,27.93 10.01,-1.18 19.79,-3.86 29,-7.95 -6.78,10.16 -15.32,19.01 -25.2,26.16 z"
+   style="fill:#ffffff" />
+</g>
+</svg>

static/icons/twitter.svg

@@ -1,42 +1,47 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
 <svg
-   viewBox="0.9 0.5 53.000002 53.000002"
    version="1.1"
-   id="svg258"
-   sodipodi:docname="twitter.svg"
-   width="53"
-   height="53"
+   id="Logo"
+   x="0px"
+   y="0px"
+   viewBox="0 0 248 248"
+   xml:space="preserve"
+   sodipodi:docname="Logo black.svg"
+   width="248"
+   height="248"
    inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs262" />
-  <sodipodi:namedview
-     id="namedview260"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     width="64px"
-     inkscape:zoom="7.4630677"
-     inkscape:cx="17.6201"
-     inkscape:cy="38.255046"
-     inkscape:window-width="1296"
-     inkscape:window-height="969"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg258" />
-  <g
-     id="g256"
-     transform="matrix(2.1139787,0,0,2.1139787,1.419202,6.1823306)">
-    <path
-       d="m 23.643,4.937 c -0.835,0.37 -1.732,0.62 -2.675,0.733 0.962,-0.576 1.7,-1.49 2.048,-2.578 -0.9,0.534 -1.897,0.922 -2.958,1.13 -0.85,-0.904 -2.06,-1.47 -3.4,-1.47 C 14.086,2.752 12,4.838 12,7.412 12,7.776 12.042,8.13 12.12,8.472 8.247,8.277 4.816,6.422 2.518,3.604 c -0.4,0.69 -0.63,1.49 -0.63,2.342 0,1.616 0.823,3.043 2.072,3.878 C 3.196,9.799 2.478,9.59 1.85,9.241 v 0.06 c 0,2.257 1.605,4.14 3.737,4.568 -0.392,0.106 -0.803,0.162 -1.227,0.162 -0.3,0 -0.593,-0.028 -0.877,-0.082 0.593,1.85 2.313,3.198 4.352,3.234 -1.595,1.25 -3.604,1.995 -5.786,1.995 -0.376,0 -0.747,-0.022 -1.112,-0.065 2.062,1.323 4.51,2.093 7.14,2.093 8.57,0 13.255,-7.098 13.255,-13.254 0,-0.2 -0.005,-0.402 -0.014,-0.602 0.91,-0.658 1.7,-1.477 2.323,-2.41 z"
-       id="path254" />
-  </g>
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs1147" /><sodipodi:namedview
+   id="namedview1145"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   height="248px"
+   inkscape:zoom="2.2751002"
+   inkscape:cx="62.634605"
+   inkscape:cy="119.77495"
+   inkscape:window-width="1296"
+   inkscape:window-height="969"
+   inkscape:window-x="0"
+   inkscape:window-y="25"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Logo" />
+<g
+   id="Logo_1_"
+   transform="translate(-0.075,22.496312)"
+   style="fill:#000000">
+	<path
+   id="white_background"
+   d="m 221.95,51.29 c 0.15,2.17 0.15,4.34 0.15,6.53 0,66.73 -50.8,143.69 -143.69,143.69 v -0.04 C 50.97,201.51 24.1,193.65 1,178.83 c 3.99,0.48 8,0.72 12.02,0.73 22.74,0.02 44.83,-7.61 62.72,-21.66 -21.61,-0.41 -40.56,-14.5 -47.18,-35.07 7.57,1.46 15.37,1.16 22.8,-0.87 C 27.8,117.2 10.85,96.5 10.85,72.46 c 0,-0.22 0,-0.43 0,-0.64 7.02,3.91 14.88,6.08 22.92,6.32 C 11.58,63.31 4.74,33.79 18.14,10.71 c 25.64,31.55 63.47,50.73 104.08,52.76 -4.07,-17.54 1.49,-35.92 14.61,-48.25 20.34,-19.12 52.33,-18.14 71.45,2.19 11.31,-2.23 22.15,-6.38 32.07,-12.26 -3.77,11.69 -11.66,21.62 -22.2,27.93 10.01,-1.18 19.79,-3.86 29,-7.95 -6.78,10.16 -15.32,19.01 -25.2,26.16 z"
+   style="fill:#000000" />
+</g>
 </svg>

static/styles/main.css

@@ -30,6 +30,11 @@
     --tag-hover-background-color: #bbb;
 
     --separator-color: #888;
+
+    --twitter-icon: url(/icons/twitter.svg);
+    --github-icon: url(/icons/github.svg);
+    --instagram-icon: url(/icons/instagram.svg);
+    --rss-icon: url(/icons/rss.svg);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -40,6 +45,11 @@
         --tag-text-color: #aaa;
         --tag-background-color: rgb(40, 40, 40);
         --tag-hover-background-color: rgb(73, 73, 73);
+
+        --twitter-icon: url(/icons/twitter-dark.svg);
+        --github-icon: url(/icons/github-dark.svg);
+        --instagram-icon: url(/icons/instagram-dark.svg);
+        --rss-icon: url(/icons/rss-dark.svg);
     }
 }