Add Theme Switcher

3 files changed, 180 insertions, 88 deletions

diff --git a/templates/macros/head.html b/templates/macros/head.html
index 4dc5895..2df6fef 100644
--- a/templates/macros/head.html
+++ b/templates/macros/head.html
@@ -1,37 +1,164 @@
-{%- macro stylesheet() %}
-  <link rel="stylesheet" href="{{ get_url(path=config.extra.stylesheet, trailing_slash=false, cachebust=true) | safe }}" />
+{%- macro theme() %}
+  {%- if config.extra.js_theme %}
+  {%- if config.extra.js_themeButton or config.extra.js_bundle %}
+  <script src="{{ get_url(path=config.extra.js_theme, trailing_slash=false) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_theme, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
 {%- endmacro %}
 
+{%- macro stylesheets() %}
+
+  {%- if config.extra.stylesheets %}{%- for i in config.extra.stylesheets %}
+  <link rel="stylesheet" href="{{ get_url(path=i, trailing_slash=false, cachebust=true) | safe }}" />
+  {%- endfor %}{%- endif %}
 
-{%- macro resource() %}
 {%- if config.extra.fonts %}{%- for i in config.extra.fonts %}
   {%- if i.url is matching("^http[s]?://") %}
-  <link rel="preload" as="style" href="{{ i.url | safe }}" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" />
+  <link rel="preload" as="style" class="preStyle" href="{{ i.url | safe }}" crossorigin="anonymous" />
   {%- else %}
-  <link rel="preload" as="font" href="{{ get_url(path=i.url, trailing_slash=false) | safe }}" type="font/woff2" crossorigin />
+  <link rel="preload" as="font" href="{{ get_url(path=i.url, trailing_slash=false) | safe }}" type="font/woff2" crossorigin="anonymous" />
   {%- endif %}
 {%- endfor %}{%- endif %}
 
 {%- if config.extra.fontawesome %}
-  <link rel="preload" href="{{ config.extra.fontawesome | safe }}" as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" />
+  <link rel="preload" as="style" class="preStyle" href="{{ config.extra.fontawesome | safe }}" crossorigin="anonymous" />
 {%- endif %}
 
-{%- if config.build_search_index %}
+{%- if config.extra.math or page.extra.math %}
+
+  {%- if config.extra.katex_css %}{%- if config.extra.katex_css is matching("^http[s]?://") %}
+  <link rel="preload" as="style" class="preStyle" href="{{ config.extra.katex_css | safe }}" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" crossorigin="anonymous" />
+  {%- else %}
+  <link rel="preload" as="style" class="preStyle" href="{{ get_url(path=config.extra.katex_css, trailing_slash=false) }}" integrity="sha384-{{ get_file_hash(path=config.extra.katex_css, sha_type=384, base64=true) | safe }}" crossorigin="anonymous" />
+  {%- endif %}{%- endif %}
+
+{%- endif %}
+
+{%- endmacro %}
+
+
+
+{%- macro feed() %}
+  {%- if config.generate_feed %}
+  <link rel="alternate" type="{% if config.feed_filename is containing('atom') %}application/atom+xml{% else %}application/rss+xml{% endif %}" title="Atom/RSS Feed" href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" />
+  {%- endif %}
+{%- endmacro %}
+
+
+
+{%- macro js() %}
+
+  {%- set preStyle = false %}
+
+  {%- if config.extra.fonts %}{%- for i in config.extra.fonts %}
+    {%- if i.url is matching("^http[s]?://") %}
+      {%- set preStyle = true %}
+    {%- endif %}
+  {%- endfor %}{%- endif %}
+
+  {%- if config.extra.fontawesome %}
+    {%- set preStyle = true %}
+  {%- endif %}
+
+  {%- if config.extra.math or page.extra.math %}
+    {%- if config.extra.katex_css %}
+      {%- set preStyle = true %}
+    {%- endif %}
+  {%- endif %}
+
+{%- if config.build_search_index and config.extra.js_bundle %}
+
   {%- if config.extra.js_search_index %}
   <script defer src="{{ get_url(path=config.extra.js_search_index, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_search_index, sha_type=384, base64=true) | safe }}"></script>
   {%- endif %}
-  {%- if config.extra.js_search %}
-  <script defer src="{{ get_url(path=config.extra.js_search, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_search, sha_type=384, base64=true) | safe }}"></script>
+
+  {%- if config.extra.js_bundle %}
+  <script defer src="{{ get_url(path=config.extra.js_bundle, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_bundle, sha_type=384, base64=true) | safe }}"></script>
   {%- endif %}
+
+{%- elif config.build_search_index %}
+
+  {#- no bundle #}
+
+  {%- if preStyle == true %}
+  {%- if config.extra.js_prestyle %}
+  <script defer src="{{ get_url(path=config.extra.js_prestyle, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_prestyle, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
+
+  {%- if config.extra.js_theme %}
+  {%- if config.extra.js_themeButton %}
+  <script defer src="{{ get_url(path=config.extra.js_themeButton, trailing_slash=false) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_themeButton, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
+
+  {%- if config.extra.js_search_index %}
+  <script defer src="{{ get_url(path=config.extra.js_search_index, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_search_index, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- if config.extra.js_search %}{%- for i in config.extra.js_search %}
+  <script defer src="{{ get_url(path=i, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=i, sha_type=384, base64=true) | safe }}"></script>
+  {%- endfor %}{%- endif %}
+
+{%- elif config.extra.js_bundle %}
+
+  {#- no search #}
+
+  <script defer src="{{ get_url(path=config.extra.js_bundle, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_bundle, sha_type=384, base64=true) | safe }}"></script>
+
+{%- else %}
+
+  {#- no bundle or search #}
+
+  {%- if preStyle == true %}
+  {%- if config.extra.js_prestyle %}
+  <script defer src="{{ get_url(path=config.extra.js_prestyle, trailing_slash=false, cachebust=true) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_prestyle, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
+
+  {%- if config.extra.js_theme %}
+  {%- if config.extra.js_themeButton or config.extra.js_bundle %}
+  <script defer src="{{ get_url(path=config.extra.js_themeButton, trailing_slash=false) | safe }}" integrity="sha384-{{ get_file_hash(path=config.extra.js_themeButton, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
+
+
+{%- endif %}
+
+
+{#- https://katex.org/docs/autorender.html #}
+{#- https://github.com/KaTeX/KaTeX/ #}
+{#- https://github.com/KaTeX/KaTeX/tree/main/contrib/mathtex-script-type/ #}
+{%- if config.extra.math or page.extra.math %}
+
+  {%- if config.extra.katex_js %}{%- if config.extra.katex_js is matching("^http[s]?://") %}
+  <script defer src="{{ config.extra.katex_js | safe }}" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
+  {%- else %}
+  <script defer src="{{ get_url(path=config.extra.katex_js, trailing_slash=false, cachebust=true) }}" integrity="sha384-{{ get_file_hash(path=config.extra.katex_js, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}{%- endif %}
+
+  {%- if config.extra.mathtex_js %}{%- if config.extra.mathtex_js is matching("^http[s]?://") %}
+  <script defer src="{{ config.extra.mathtex_js | safe }}" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
+  {%- else %}
+  <script defer src="{{ get_url(path=config.extra.mathtex_js, trailing_slash=false, cachebust=true) }}" integrity="sha384-{{ get_file_hash(path=config.extra.mathtex_js, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}{%- endif %}
+
+{%- if config.extra.math_auto_render or page.extra.math_auto_render %}
+  {%- if config.extra.katex_autorender_js %}
+  {%- if config.extra.katex_autorender_js is matching("^http[s]?://") %}
+  <script defer src="{{ config.extra.katex_autorender_js | safe }}" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+  {%- else %}
+  <script defer src="{{ get_url(path=config.extra.katex_autorender_js, trailing_slash=false, cachebust=true) }}" integrity="sha384-{{ get_file_hash(path=config.extra.katex_autorender_js, sha_type=384, base64=true) | safe }}"></script>
+  {%- endif %}
+  {%- endif %}
+  <script defer src="{{ get_url(path=config.extra.katex_options, trailing_slash=false, cachebust=true) }}" integrity="sha384-{{ get_file_hash(path=config.extra.katex_options, sha_type=384, base64=true) | safe }}"></script>
 {%- endif %}
 
-{%- if config.generate_feed %}
-  <link rel="alternate" type="{% if config.feed_filename is containing('atom') %}application/atom+xml{% else %}application/rss+xml{% endif %}" title="Atom/RSS Feed" href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" />
 {%- endif %}
 
 {%- endmacro %}
 
 
+
 {%- macro favicons() %}
   {%- if config.extra.favicon_theme_color %}
   <meta name="theme-color" content="{{ config.extra.favicon_theme_color }}" />
@@ -63,6 +190,18 @@
 {%- endmacro %}
 
 
+
+{%- macro security() %}
+  {%- if config.extra.security_header_referrer %}
+  <meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
+  {%- endif %}
+  {%- if config.extra.security_header_csp %}
+  <meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
+  {%- endif %}
+{%- endmacro %}
+
+
+
 {#- type:          website or article, generally setting article for blog articles -#}
 {#- page_images:   using for the blog single template page -#}
 {#- page_section:  the blog single template page have to pass the parameter -#}
@@ -199,50 +338,3 @@
 {%- endif %}
 {#- Extra SEO END #}
 {%- endmacro %}
-
-{%- macro security() %}
-  {%- if config.extra.security_header_referrer %}
-  <meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
-  {%- endif %}
-  {%- if config.extra.security_header_csp %}
-  <meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
-  {%- endif %}
-{%- endmacro %}
-
-{# https://katex.org/docs/autorender.html #}
-{# https://github.com/KaTeX/KaTeX/ #}
-{# https://github.com/KaTeX/KaTeX/tree/main/contrib/mathtex-script-type/ #}
-{%- macro math() %}
-{%- if config.extra.math or page.extra.math %}
-
-  {%- if config.extra.katex_css %}{%- if config.extra.katex_css is matching("^http[s]?://") %}
-  <link rel="preload" href="{{ config.extra.katex_css | safe }}" as="style" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" />
-  {%- else %}
-  <link rel="preload" href="{{ get_url(path=config.extra.katex_css, trailing_slash=false) }}" as="style" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" />
-  {%- endif %}{%- endif %}
-
-  {%- if config.extra.katex_js %}{%- if config.extra.katex_js is matching("^http[s]?://") %}
-  <script defer src="{{ config.extra.katex_js | safe }}" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{ get_url(path=config.extra.katex_js, trailing_slash=false) }}" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
-  {%- endif %}{%- endif %}
-
-  {%- if config.extra.mathtex_js %}{%- if config.extra.mathtex_js is matching("^http[s]?://") %}
-  <script defer src="{{ config.extra.mathtex_js | safe }}" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{ get_url(path=config.extra.mathtex_js, trailing_slash=false) }}" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
-  {%- endif %}{%- endif %}
-
-{%- if config.extra.math_auto_render or page.extra.math_auto_render %}
-  {%- if config.extra.katex_autorender_js %}
-  {%- if config.extra.katex_autorender_js is matching("^http[s]?://") %}
-  <script defer src="{{ config.extra.katex_autorender_js | safe }}" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{ get_url(path=config.extra.katex_autorender_js, trailing_slash=false) }}" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
-  {%- endif %}
-  {%- endif %}
-  <script>document.addEventListener("DOMContentLoaded",function(){renderMathInElement(document.body,{delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],throwOnError:!1})});</script>
-{%- endif %}
-
-{%- endif %}
-{%- endmacro %}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 8003420..4b6c7d5 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -1,17 +1,17 @@
 {%- macro title(page) %}
         <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1>
-        <span>{{ page.date | date(format="%B %d, %Y") }}
-        {%- if page.taxonomies.authors and config.taxonomies %} by
-          {%- for author in page.taxonomies.authors %}
+        <span>
+          {%- if page.taxonomies.authors and config.taxonomies %}
+          <span class="hpad"><b>{%- for author in page.taxonomies.authors %}
           {%- if author_flag %} and {% endif %}
           <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a>
           {%- set_global author_flag = true %}
-          {%- endfor %}
-        {%- elif config.extra.author and config.extra.author_show %} by {{ config.extra.author }}
-        {%- endif %}
-{%- if page.taxonomies.categories %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %}
-{%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}
-{%- if config.extra.readtime %} - {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} {% endif %}</span>
+          {%- endfor %}</b></span>
+          {%- elif config.extra.author and config.extra.author_show %}<span class="hpad"><b>{{ config.extra.author }}</b></span>
+          {%- endif %}<span class="rpad"> {{ page.date | date(format="%B %d, %Y") }}</span>
+{%- if page.taxonomies.categories %}<span class="rpad"> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]</span>{% endif %}
+{%- if page.taxonomies.tags %}<span class="rpad"> {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}</span>{%- endif %}
+{%- if config.extra.readtime %}<span class="rpad"> {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} </span>{% endif %}</span>
 {%- endmacro title %}
 
 
diff --git a/templates/macros/social.html b/templates/macros/social.html
index c1b0726..96f0056 100644
--- a/templates/macros/social.html
+++ b/templates/macros/social.html
@@ -1,45 +1,45 @@
 {%- macro social_links(social_config) %}
 {%- set base_url = get_url(path="", lang=lang) %}
         {%- if config.generate_feed %}{%- if config.extra.social.feed %}
-        <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" target="_blank"><i class="svg rss" title="Atom/RSS Feed"></i></a>{% endif %}{% endif %}
+        <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" target="_blank"><i type="Button" class="svg rss" title="Atom/RSS Feed"></i></a> {% endif %}{% endif %}
         {%- if social_config.mail %}
-        <a href="mailto:{{ social_config.mail }}" target="_blank"><i class="svg mail" title="Mail"></i></a>{% endif %}
+        <a href="mailto:{{ social_config.mail }}" target="_blank"><i type="Button" class="svg mail" title="Mail"></i></a> {% endif %}
         {%- if social_config.mastodon %}
-        <a href="{{ social_config.mastodon }}/" target="_blank"><i class="svg mastodon" title="Mastodon"></i></a>{% endif %}
+        <a href="{{ social_config.mastodon }}/" target="_blank"><i type="Button" class="svg mastodon" title="Mastodon"></i></a> {% endif %}
         {%- if social_config.element %}
-        <a href="https://{{ social_config.element }}/" target="_blank"><i class="svg element" title="Element"></i></a>{% endif %}
+        <a href="https://{{ social_config.element }}/" target="_blank"><i type="Button" class="svg element" title="Element"></i></a> {% endif %}
         {%- if social_config.matrix %}
-        <a href="https://{{ social_config.matrix }}/" target="_blank"><i class="svg matrix" title="Matrix"></i></a>{% endif %}
+        <a href="https://{{ social_config.matrix }}/" target="_blank"><i type="Button" class="svg matrix" title="Matrix"></i></a> {% endif %}
         {%- if social_config.twitter %}
-        <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><i class="svg twitter" title="Twitter"></i></a>{% endif %}
+        <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><i type="Button" class="svg twitter" title="Twitter"></i></a> {% endif %}
         {%- if social_config.facebook %}
-        <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><i class="svg facebook" title="Facebook"></i></a>{% endif %}
+        <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><i type="Button" class="svg facebook" title="Facebook"></i></a> {% endif %}
         {%- if social_config.linkedin %}
-        <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><i class="svg linkedin" title="LinkedIn"></i></a>{% endif %}
+        <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><i type="Button" class="svg linkedin" title="LinkedIn"></i></a> {% endif %}
         {%- if social_config.researchgate %}
-        <a href="https://www.researchgate.net/profile/{{ social_config.researchgate }}/" target="_blank"><i class="svg researchgate" title="ResearchGate"></i></a>{% endif %}
+        <a href="https://www.researchgate.net/profile/{{ social_config.researchgate }}/" target="_blank"><i type="Button" class="svg researchgate" title="ResearchGate"></i></a> {% endif %}
         {%- if social_config.gitlab %}
-        <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><i class="svg gitlab" title="Gitlab"></i></a>{% endif %}
+        <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><i type="Button" class="svg gitlab" title="Gitlab"></i></a> {% endif %}
         {%- if social_config.github %}
-        <a href="https://github.com/{{ social_config.github }}/" target="_blank"><i class="svg github" title="Github"></i></a>{% endif %}
+        <a href="https://github.com/{{ social_config.github }}/" target="_blank"><i type="Button" class="svg github" title="Github"></i></a> {% endif %}
         {%- if social_config.bitbucket %}
-        <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><i class="svg bitbucket" title="Bitbucket"></i></a>{% endif %}
+        <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><i type="Button" class="svg bitbucket" title="Bitbucket"></i></a> {% endif %}
         {%- if social_config.python %}
-        <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><i class="svg python" title="Python"></i></a>{% endif %}
+        <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><i type="Button" class="svg python" title="Python"></i></a> {% endif %}
         {%- if social_config.docker %}
-        <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><i class="svg docker" title="Docker"></i></a>{% endif %}
+        <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><i type="Button" class="svg docker" title="Docker"></i></a> {% endif %}
         {%- if social_config.stack %}
-        <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><i class="svg stack" title="Stack"></i></a>{% endif %}
+        <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><i type="Button" class="svg stack" title="Stack"></i></a> {% endif %}
         {%- if social_config.instagram %}
-        <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><i class="svg instagram" title="Instagram"></i></a>{% endif %}
+        <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><i type="Button" class="svg instagram" title="Instagram"></i></a> {% endif %}
         {%- if social_config.pinterest %}
-        <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><i class="svg pinterest" title="Pinterest"></i></a>{% endif %}
+        <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><i type="Button" class="svg pinterest" title="Pinterest"></i></a> {% endif %}
         {%- if social_config.twitch %}
-        <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><i class="svg twitch" title="Twitch"></i></a>{% endif %}
+        <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><i type="Button" class="svg twitch" title="Twitch"></i></a> {% endif %}
         {%- if social_config.youtube %}
-        <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><i class="svg youtube" title="YouTube"></i></a>{% endif %}
+        <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><i type="Button" class="svg youtube" title="YouTube"></i></a> {% endif %}
         {%- if social_config.buymeacoffee %}
-        <a href="https://www.buymeacoffee.com/{{ social_config.buymeacoffee }}/" target="_blank"><i class="svg buymeacoffee" title="Buy Me A Coffee"></i></a>{% endif %}
+        <a href="https://www.buymeacoffee.com/{{ social_config.buymeacoffee }}/" target="_blank"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a> {% endif %}
         {%- if social_config.github_sponsor %}
-        <a href="https://github.com/sponsors/{{ social_config.github_sponsor }}/" target="_blank"><i class="svg github-sponsor" title="GitHub Sponsor"></i></a>{% endif %}
+        <a href="https://github.com/sponsors/{{ social_config.github_sponsor }}/" target="_blank"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a> {% endif %}
 {%- endmacro %}