Rework styling to be responsive and more "wide"

1 files changed, 49 insertions, 0 deletions

diff --git a/xsl/svg.xsl b/xsl/svg.xsl
new file mode 100644
index 0000000..dd18d72
--- /dev/null
+++ b/xsl/svg.xsl
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  version="1.0"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns:s="https://beratung-franzke.de/web-tpl">
+
+  <!--
+  <xsl:template match="s:svg" mode="html">
+    <xsl:call-template name="svg-img">
+      <xsl:with-param name="svg-file" select="@src" />
+      <xsl:with-param name="svg-alt"  select="@alt" />
+    </xsl:call-template>
+  </xsl:template>
+  -->
+  <xsl:template match="s:svg" mode="html">
+    <xsl:call-template name="svg-inline">
+      <xsl:with-param name="svg-file" select="@file" />
+    </xsl:call-template>
+  </xsl:template>
+
+  <xsl:template name="svg-img">
+    <xsl:param name="svg-file" />
+    <xsl:param name="svg-alt" />
+
+    <xsl:variable name="png-file" select="concat(substring-before($svg-file, '.svg'), '.png')" />
+
+    <img src="{$svg-file}" alt="{$svg-alt}" class="svg" />
+
+    <object data="{$svg-file}" type="image/svg+xml" class="svg" style="display: none">
+      <xsl:attribute name="width">
+        <xsl:value-of select="ceiling(document(concat('../', $svg-file))/svg:svg/@width)" />
+      </xsl:attribute>
+      <xsl:attribute name="height">
+        <xsl:value-of select="ceiling(document(concat('../', $svg-file))/svg:svg/@height)" />
+      </xsl:attribute>
+      <param name="src" value="{$svg-file}" />
+      <img src="{$png-file}" alt="{$svg-alt}" />
+    </object>
+  </xsl:template>
+
+  <xsl:template mode="inline-svg" match="svg:*">
+    <xsl:copy>
+      <xsl:copy-of select="@*"/>
+      <xsl:apply-templates mode="inline-svg"/>
+    </xsl:copy>
+  </xsl:template>
+
+</xsl:stylesheet>