Change Font and Update imagehover shortcode

4 files changed, 15 insertions, 11 deletions

diff --git a/config.toml b/config.toml
index 2d235cc..95003e3 100644
--- a/config.toml
+++ b/config.toml
@@ -68,7 +68,7 @@ menu_footer = [
 
 security_header_referrer = "strict-origin-when-cross-origin"
 
-security_header_csp = "default-src 'none'; frame-ancestors 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; font-src 'self' cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.jsdelivr.net fonts.googleapis.com; object-src 'self'; frame-src 'self' *.youtube.com; img-src 'self' data: cdn.cloudflare.com; script-src 'self' 'unsafe-inline' *.youtube.com maps.gstatic.com *.googleapis.com *.google-analytics.com cdnjs.cloudflare.com"
+#security_header_csp = "default-src 'none'; frame-ancestors 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; font-src 'self' cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.jsdelivr.net fonts.googleapis.com; object-src 'self'; frame-src 'self' *.youtube.com; img-src 'self' data: cdn.cloudflare.com; script-src 'self' 'unsafe-inline' *.youtube.com maps.gstatic.com *.googleapis.com *.google-analytics.com cdnjs.cloudflare.com"
 
 
 
diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index db9d0db..0d3e4ec 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -1,5 +1,5 @@
 +++
-title = "Abridge Zola theme and css framework"
+title = "Abridge Zola Theme and css Framework"
 date = 2021-05-16
 
 [taxonomies]
diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md
index 82910b4..0292b6c 100644
--- a/content/overview-fonts-imagehover-shortcode/index.md
+++ b/content/overview-fonts-imagehover-shortcode/index.md
@@ -1,5 +1,5 @@
 +++
-title = "Image Comparison imagehover shortcode"
+title = "Image Comparison imagehover Shortcode"
 date = 2022-05-15
 
 [taxonomies]
diff --git a/templates/shortcodes/imagehover.html b/templates/shortcodes/imagehover.html
index 350506c..68f25be 100644
--- a/templates/shortcodes/imagehover.html
+++ b/templates/shortcodes/imagehover.html
@@ -1,25 +1,29 @@
 {%- set_global bg = " " %}
+{%- set_global bgname = " " %}
 {%- for source in sources %}
-  {%- if not loop.first %}
-    ## {{ source | safe }}
-    <div id="hoverimage{{loop.index}}"> </div>
+  {%- set sourcename = source | split(pat=".") | first %}
+  {%- if loop.first %}
+    {%- set_global bg = source %}
+    {%- set_global bgname = source | split(pat=".") | first %}
   {%- else %}
-    {% set_global bg = source %}
+
+    <div id="{{ sourcename }}">## {{ sourcename }} </div>
+    <a onmouseover="document.getElementById('{{ sourcename }}').innerHTML='{{ bgname }}';" onmouseout="document.getElementById('{{ sourcename }}').innerHTML='{{ sourcename }}';" href="#"><div id="{{ sourcename }}image"> </div></a>
+
   {%- endif %}
 {%- endfor %}
 
 <style>
   {%- for source in sources %}
+    {%- set sourcename = source | split(pat=".") | first %}
     {%- if not loop.first %}
-      #hoverimage{{loop.index}} {
+      #{{ sourcename | safe }}image {
         background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ source | safe }}');
         width: 560px;
         height: 650px;
       }
-      #hoverimage{{loop.index}}:hover {
+      #{{ sourcename | safe }}image:hover {
         background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ bg | safe }}');
-        width: 560px;
-        height: 650px;
       }
     {%- endif %}
   {%- endfor %}