From 909b7ebba9f4441c3a72428cf3cc89cba560c9e0 Mon Sep 17 00:00:00 2001
From: Benjamin Franzke <benjaminfranzke@googlemail.com>
Date: Sun, 3 Jul 2016 11:57:58 +0200
Subject: Rework styling to be responsive and more "wide"

---
 checkmark.svg   |   2 +-
 concept.xml     |   7 +-
 controlling.xml |  10 +-
 impress.xml     |   4 +-
 inception.xml   |   2 +-
 style/style.css | 295 +++++++++++++++++++++++++++++++-------------------------
 xsl/common.xsl  |   7 +-
 xsl/layout.xsl  |  78 ++++++++-------
 xsl/svg.xsl     |  49 ++++++++++
 9 files changed, 273 insertions(+), 181 deletions(-)
 create mode 100644 xsl/svg.xsl

diff --git a/checkmark.svg b/checkmark.svg
index 249a00b..f29607d 100644
--- a/checkmark.svg
+++ b/checkmark.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" viewBox="0 0 55 55" id="checkmark">
   <path style="fill: #983d3a; stroke: #d45951; stroke-width: 0.2"
     d="M 21,55
        S       11,44  0,38
diff --git a/concept.xml b/concept.xml
index 4cc879a..9c2e67b 100644
--- a/concept.xml
+++ b/concept.xml
@@ -4,6 +4,7 @@
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:s="https://beratung-franzke.de/web-tpl">
 
+  <h1>Leitbild</h1>
   <p class="intro">
     <strong>
       Als Unternehmensberaterin und Buchführungshelferin handle ich
@@ -13,13 +14,13 @@
     </strong>
   </p>
   <img src="kundenbetreuung.jpg" alt="Kundenbetreuung" class="right"/>
-  <h3>Dies heißt für mich</h3>
+  <h2>Dies heißt für mich</h2>
   <ul>
     <li>meine Kunden individuell zu beraten</li>
     <li>den Beratungsauftrag ganzheitlich zu verstehen</li>
     <li>den Lösungsansatz zukunftsfähig zu gestalten</li>
   </ul>
-  <h3 style="clear:right">Meine Arbeit gründet sich auf dem folgenden Leitbild:</h3>
+  <h2 style="clear:right">Meine Arbeit gründet sich auf dem folgenden Leitbild:</h2>
   <ol>
     <li>
       Ich helfe bestehenden und potenziellen Unternehmern, sowie den
@@ -47,7 +48,7 @@
       als auch nach Festpreisen.
     </li>
   </ol>
-  <h3>Dies heißt für Sie:</h3>
+  <h2>Dies heißt für Sie:</h2>
   <p>
     Business- und Coachingkompetenz führen zu einem erfolgreichen Unternehmen.
     Nur wenn wir Denken und Intuition gleichermaßen berücksichtigen, kann ich
diff --git a/controlling.xml b/controlling.xml
index 53faaf9..5c0ac16 100644
--- a/controlling.xml
+++ b/controlling.xml
@@ -6,23 +6,25 @@
 
   <h1>Buchführung und Lohnrechnung</h1>
 
-  <h3>Buchführung</h3>
+  <h2>Buchführung</h2>
   <img src="folder.jpg" alt="Angelika Franzke mit Ordner" class="right"/>
   <p>
     Die Buchführung ist nicht nur zur steuerlichen Erfassung von Einnahmen
     und Ausgaben gegenüber dem Finanzamt notwendig, sondern auch intern für
     das Unternehmen als wichtiges Kontrollinstrument unabdingbar.
-    <br/>
+  </p>
+  <p>
     Wichtige Kenziffern werden aus der Gewinn- und Verlustrechnung oder aus
     dem Mahnwesen abgerufen um Entscheidungen für betriebliche Prozesse zu treffen.
-    <br/>
+  </p>
+  <p>
     Die Finanzbuchhaltung muss zwingend den Grundsätzen ordnungsgemäßer Buchführung entsprechen.
     Dies sind Übersichtlichkeit, Nachprüfbarkeit, Richtigkeit, Ordnung, Vollständigkeit und Zeitnahigkeit.
     Um allem gerecht zu werden ist es ratsam, die Hilfe einer kompetenten Buchführungshelferin in Anspruch
     zu nehmen, damit Sie sich auf das eigentliche Kerngeschäft Ihres Unternehmens konzentrieren können.
   </p>
 
-  <h3>Lohnrechnung</h3>
+  <h2>Lohnrechnung</h2>
   <p>
     Sie als Arbeitgeber sind gegenüber Ihren Mitarbeitern, aber auch gegenüber dem Finanzamt,
     den Krankenkassen, den Berufsgenossenschaften und Ihrer eigenen internen Kostenrechnung rechenschaftspflichtig.
diff --git a/impress.xml b/impress.xml
index 6795d09..9600941 100644
--- a/impress.xml
+++ b/impress.xml
@@ -6,7 +6,7 @@
 
   <h1>Impressum</h1>
 
-  <h3>Angaben gemäß § 5 TMG:</h3>
+  <h2>Angaben gemäß § 5 TMG:</h2>
   <p>
     Beratung &amp; Controlling<br />
     Angelika Franzke<br />
@@ -18,7 +18,7 @@
     Quelle: erstellt mit dem Impressum-Generator Einzelunternehmer von eRecht24.
   </em>
 
-  <h3>Haftungsausschluss:</h3>
+  <h2>Haftungsausschluss:</h2>
   <p>
     <strong>Haftung für Inhalte</strong>
     Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
diff --git a/inception.xml b/inception.xml
index 776d6c8..817d301 100644
--- a/inception.xml
+++ b/inception.xml
@@ -19,7 +19,7 @@
     helfen bei der Erstellung des Businessplanes und stellen Ihr Unternehmen auf sichere Füße.
   </p>
 
-  <h3>Unsere Leistungen:</h3>
+  <h2>Unsere Leistungen:</h2>
   <ul>
     <li>Prüfung Ihrer Geschäftsidee zur Vermeidung von Fehlern im Vorfeld der Existenzgründung</li>
     <li>Hilfe bei der Erstellung des Businessplanes</li>
diff --git a/style/style.css b/style/style.css
index 9032c7e..7a49690 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,27 +1,59 @@
-/*
-Design [inspired] by Free CSS Templates
-http://www.freecsstemplates.org
-Released for free under a Creative Commons Attribution 2.5 License
- */
+@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic);
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Rammetto+One|Archivo+Black);
+
+:root {
+  --text-color:      #333;
+  //--color-red:       #983d3a;
+  --color-red:       hsl(2, 45%, 41%);
+  //--color-red:       hsl(2, 45%, 45%);
+  --color-red-hover: hsl(2, 45%, 30%);
+  --color-gray-dark: #4c4d51;
+}
 
 * {
 	margin: 0;
 	padding: 0;
 }
 
+*, *:before, *:after {
+        box-sizing: border-box;
+}
+
 /* needed for full background when viewing .xml directly in firefox */
 html, body {
 	height: 100%;
 }
 
 body {
-	background: #433F3F;
-	background: #eeeeee;
+	background: #eee;
 
-	/*text-align: justify; */
-	font-family: Helvetica, Arial, sans-serif;
-	font-size: 13px;
-	color: #333333;
+	//font-family: Helvetica, Arial, sans-serif;
+        font-family: 'Cantarell', sans-serif;
+        font-family: 'Roboto', sans-serif;
+	font-size: 16px;
+        line-height: 1.35;
+	color: var(--text-color);
+
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+}
+
+header, footer {
+        position: relative;
+}
+header:before,
+footer:before {
+        position: absolute;
+}
+
+body > * {
+        flex: none;
+}
+
+body > .outer {
+        flex: 1 0 auto;
 }
 
 form {
@@ -29,39 +61,37 @@ form {
 
 input, textarea {
 	padding: 2px 5px;
-	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
-	color: #333333;
+	color: var(--text-color);
 }
 
-h1, h2, h3 {
+h2, h3 {
 	margin-top: 1.5em;
-	font-weight: normal;
 }
 
 h1 {
 	font-size: 2em;
+	font-weight: 500;
+        margin-bottom: 0.67em;
 }
 
 h2 {
-	font-size: 1.4em;
+	font-size: 1.5em;
+	font-weight: 500;
+        margin-bottom: 0.75em;
 }
 
 h3 {
-	font-size: 1em;
-}
-
-p {
-	/*text-align: justify; */
+	font-size: 1.2em;
+	font-weight: bold;
+        margin-bottom: 0.80em;
 }
 
 p, ul, ol {
-	margin-top: 1.2em;
-	line-height: 130%;
+        margin-bottom: 1em;
 }
 
-
 ul, ol {
-	margin-left: 3em;
+	margin-left: 1.2em;
 }
 
 blockquote {
@@ -70,12 +100,13 @@ blockquote {
 }
 
 a {
-	color: #CC6B47;
+        color: var(--color-red);
+	text-decoration: none;
 }
 
 a:hover {
 	text-decoration: none;
-	color: #3760BF;
+        color: var(--color-red-hover);
 }
 
 a img {
@@ -84,12 +115,12 @@ a img {
 
 img.left {
 	float: left;
-	margin: 1px 15px 0 10px;
+	margin: 5px 2em 0 0;
 }
 
 img.right {
 	float: right;
-	margin: 5px 5px 0 20px;
+	margin: 5px 0px 2em 2em;
 }
 
 label {
@@ -98,176 +129,176 @@ label {
 	min-width: 90px;
 }
 
-#header, #navi, #container {
-	width: 1040px;
+header, nav, main, footer {
+        width: 65em;
+	max-width: 65em;
 	margin: 0 auto;
 }
 
 /* Header */
 
-#header {
-	height: 70px;
-	padding-top: 33px;
-	padding-bottom: 7px;
+header {
+        margin-bottom: 1em;
+        padding: 2em 0 0.5em;
+        //font-family: 'Cantarell', sans-serif;
+        //font-family: 'Archivo Black', sans-serif;
 }
 
-#header h1, #header h2 {
+header h1, header h2 {
 	margin: 0;
-	letter-spacing: -0.05em;
+	letter-spacing: -0.025em;
 	font-weight: normal;
-	color: #444444;
 }
 
-#header img {
+header svg {
 	position: relative;
 	bottom: -7px;
+        margin-right: 1em;
+        width: 3.5em;
+        height: 3.5em;
 }
 
-#header h1 {
+header h1 {
 	display: inline;
-	font-size: 4em;
+	font-size: 3em;
+	color: #444;
 }
 
-#header h2 {
+header h2 {
 	display: inline;
-	padding-left: 4px;
-	font-size: 2em;
+	padding-left: .5em;
+	font-size: 1.5em;
 	color: #858585;
 }
 
-ul#navi {
-	height: 50px;
+nav > uli {
+        margin-bottom: 1.5em;
 	padding: 0;
 	list-style: none;
 	line-height: normal;
 }
 
-#navi li {
-	display: inline;
+nav > ul:after {
+        content: '';
+        display: block;
+        clear: both;
 }
 
-#navi li a {
+.outer {
+        background: white;
+	border-top: 2px var(--color-red) solid;
+        padding: 2em 0;
+        backgound: #fff;
+}
+nav > ul {
+        padding-left: 0;
+        margin-left: 0;
+}
+nav > ul > li {
+	display: block;
+        float: left;
+        width: 20%;
+}
+
+nav > ul > li + li {
+        padding-left: 2px;
+}
+
+nav > ul > li a {
 	display: inline-block;
-	margin-right: 2px;
-	padding: 5px 20px 5px 20px;
-	background: #4C4D51;
-	border: 1px #575C5F solid;
+	padding: .7em 1.5em;
+	background: var(--color-gray-dark);
 	text-decoration: none;
 	text-transform: uppercase;
 	font-weight: bold;
-	font-size: 11px;
-	color: #FFFFFF;
+	color: #fff;
+        letter-spacing: 0.05em;
+        width: 100%;
+        text-align: center;
 }
 
-#navi a:hover, #navi a.active {
-	background: #983D3A;
-	border: 1px #D45951 solid;
-	border: 1px #C02020 solid;
+nav > ul a:hover,
+nav > ul a:focus,
+nav > ul a.active {
+	background: var(--color-red);
+        color: #fff;
 }
 
-#content {
-	background: #F4EDD3;
-	border-bottom: 4px #BBB082 solid;
-	border: 3px #983D3A solid;
+article, aside {
+        margin: 2em 0;
 }
 
-#container {
-	border: 3px #983D3A solid;
-	background: white;
+article {
+        padding-right: 1em;
 }
 
-#info {
-	width: 180px;
-	float: left; 
-	font-size: 11px;
-	position: relative; 
-	padding: 10px;
-	margin-left: -200px; 
-	margin-right: 1px;
+aside {
+        padding-left: 1em;
 }
-
-.redbox, a.redbox:hover {
+.redbox,
+a.redbox:hover {
 	display: inline-block;
 	text-decoration: none;
-	width: 170px;
-	padding: 5px;
-	margin-top: 5px;
-	background: #983D3A;
-	border: 2px #C02020 solid;
+        width: 100%;
+	padding: 1em;
+	margin-top: .5em;
+        margin-bottom: 1em;
+	background: var(--color-red);
+	border: 2px solid rgba(0,0,0,.02);
 	color: white;
 }
 
-#container {
-	box-sizing: border-box;
-}
-
-#container:before,
-#container:after {
-	/* background: #BBB082; */
-	background: #d2c592;
-	content: '';
-
-	display: block;
-	width: 100%;
-	height: 20px;
-
-	/* Used to clear the infobar float */
-	clear: both;
+main {
+        display: flex;
+        flex-direction: row;
 }
 
-#page {
-	border-left: 200px solid white;
-	font-size: 14px;
-}
-
-#page h1 {
-	margin: 10px 0;
-	padding: 2px;
-	color: #CC6B47;
+main > article {
+        flex: 1 1 45em;
 }
 
-#page .intro {
-	font-size: 110%;
-	padding: 2px;
-	margin: 10px 0;
+main > aside {
+        flex: 1 1 18em;
 }
 
-#page h3 {
-	font-size: 20px;
-	margin: 5px 0;
-	padding: 7px;
-}
 
-#page p {
-	margin: 0;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-bottom: 15px;
+article h1 {
+        color: var(--color-red);
 }
 
-#page ul, #page ol {
-	padding: 0;
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-	font-size: 15px;
+article .intro {
+	font-size: 1.1em;
+	margin: 10px 0;
 }
 
-#page li {
-	padding-right: 10px;
-}
 
-#footer {
+footer {
 	margin: 0 auto;
 	padding: 20px 0;
 	text-align: center;
 }
 
-#footer p {
+footer p {
 	margin: 0;
 	font-size: .8em;
-	color: #666666;
+	color: #666;
 }
 
-#footer p a {
+footer p a {
 	color: inherit;
 }
+
+.logos {
+        background: white;
+        text-align: center;
+}
+
+.logos img {
+        vertical-align: middle;
+        margin: 1.5em 3em;
+}
+
+.social-icon {
+        width: auto;
+        height: 2em;
+}
diff --git a/xsl/common.xsl b/xsl/common.xsl
index f2e00ec..b0fa8b1 100644
--- a/xsl/common.xsl
+++ b/xsl/common.xsl
@@ -1,13 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-  version="1.0" 
+  version="1.0"
   exclude-result-prefixes="s"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:s="https://beratung-franzke.de/web-tpl"
   xmlns:html="http://www.w3.org/1999/xhtml">
-  
+
   <xsl:include href="navi.xsl" />
   <xsl:include href="link.xsl" />
+  <xsl:include href="svg.xsl" />
 
   <xsl:strip-space elements="*"/>
 
@@ -15,7 +16,7 @@
   <xsl:variable name="title" select="document('../main.xml')/s:site/s:page[@filename = $filename]/@title" />
   <xsl:param name="suffix" select="'.xml'" />
 
-  <xsl:output method="xml" indent="yes" encoding="utf-8"
+  <xsl:output method="xml" indent="no" encoding="utf-8"
     cdata-section-elements="script style"
     media-type="application/xhtml+xml"
     doctype-system="about:legacy-compat"
diff --git a/xsl/layout.xsl b/xsl/layout.xsl
index 980fd4a..8de607f 100644
--- a/xsl/layout.xsl
+++ b/xsl/layout.xsl
@@ -2,6 +2,8 @@
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   version="1.0"
   xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:s="https://beratung-franzke.de/web-tpl">
 
   <xsl:include href="common.xsl" />
@@ -20,18 +22,23 @@
         <link rel="stylesheet" type="text/css" href="style/style.css" />
       </head>
       <body>
-        <div id="header">
-          <img src="checkmark.png" alt="Checkmark"/>
+        <header>
+          <xsl:apply-templates select="document('../checkmark.svg')" mode="inline-svg"/>
           <h1>Unternehmensberatung &amp; Controlling</h1>
           <h2>Angelika Franzke</h2>
-        </div>
-        <ul id="navi">
-          <xsl:call-template name="navigation" />
-          <li style="display: none"><a href="#page" accesskey="S" /></li>
-        </ul>
-        <div id="container">
-          <div id="page">
-            <div id="info">
+        </header>
+        <nav>
+          <ul id="navi">
+            <xsl:call-template name="navigation" />
+            <li style="display: none"><a href="#page" accesskey="S" /></li>
+          </ul>
+        </nav>
+        <div class="outer">
+          <main>
+            <article>
+              <xsl:apply-templates mode="html" />
+            </article>
+            <aside id="info">
               <strong>
                 Es berät Sie gern:<br/>
                 Angelika Franzke<br/>
@@ -40,50 +47,51 @@
               Fax: 038461/599811<br/>
               Mobil: 0172/9302774<br/>
               E-Mail: <a href="mailto:info@beratung-franzke.de">info@beratung-franzke.de</a>
+              <br/>
+              <br/>
 
-	      <a href="https://www.facebook.com/pages/Beratung-Controlling-Angelika-Franzke/619857168040817">
-		      <img src="img/facebook.jpg" style="width: 30px; height:30px;" alt="Facebook" />
-	      </a>
-	      <a href="https://plus.google.com/112211240794067152603">
-		      <img src="img/gplus.png" style="width: 30px; height:30px;" alt="Google Plus" />
-	      </a>
+              <a href="https://www.facebook.com/pages/Beratung-Controlling-Angelika-Franzke/619857168040817">
+                      <img src="img/facebook.jpg" class="social-icon" alt="Facebook" />
+              </a>
+              <a href="https://plus.google.com/112211240794067152603">
+                      <img src="img/gplus.png" class="social-icon" alt="Google Plus" />
+              </a>
 
-              <hr style="margin-top: 3px; margin-bottom: 10px;"/>
+              <br/>
 
               <a href="contact{$suffix}" class="redbox">
                 <strong>Kostenlose Analyse Ihrer Gründungsidee.</strong>
                 <br/>
                 Die Kostenlose Analyse schafft Klarheit darüber, welches Umsatzpotential Ihre Idee bietet.
               </a>
-              <a style="margin-left: -5px"
-                href="http://www.idz-zertifikat.de/voraussetzung-fachberater-existenzgruender">
-                <img src="idz-siegel.jpg"
-                  alt="Fachberaterin für Existenzgründer - Institut für Dienstleistungszertifizierung" />
-              </a>
-              <a href="http://www.mikrokredit.net/">
-                <img src="kapitalinstitut.png" alt="Kapitalinstitut" />
-              </a>
-              <a style="display: block; text-align: center;"
-                href="http://www.fuer-gruender.de/beratung/dienstleister-finden/firma/beratung-controlling/">
-                <img src="fuer-gruender.de-siegel.png" alt="Für-Gründer.de" />
-              </a>
               <a class="redbox" style="text-align: center; font-size: 14px"
                 href="https://beraterboerse.kfw.de/index.php?ac=consultant_projects&amp;id=100021">
                 Referenzen
               </a>
-            </div>
-            <xsl:apply-templates mode="html" />
-          </div>
+            </aside>
+          </main>
         </div>
-        <div id="footer">
+        <div class="logos">
+          <a href="http://www.idz-zertifikat.de/voraussetzung-fachberater-existenzgruender" target="_blank">
+            <img src="idz-siegel.jpg"
+              alt="Fachberaterin für Existenzgründer - Institut für Dienstleistungszertifizierung" />
+          </a>
+          <a href="http://www.mikrokredit.net/" target="_blank">
+            <img src="kapitalinstitut.png" alt="Kapitalinstitut" />
+          </a>
+          <a href="http://www.fuer-gruender.de/beratung/dienstleister-finden/firma/beratung-controlling/" target="_blank">
+            <img src="fuer-gruender.de-siegel.png" alt="Für-Gründer.de" />
+          </a>
+        </div>
+        <footer>
           <p>
             <xsl:text disable-output-escaping="yes"><![CDATA[© 2007 All Rights Reserved.]]></xsl:text>
             <xsl:text>Designed by </xsl:text>
-            <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
+            <a href="http://www.freecsstemplates.org/" target="_blank">Free CSS Templates</a>
             <xsl:text>. </xsl:text>
             <a href="impress{$suffix}">Impressum</a>
           </p>
-        </div>
+        </footer>
       </body>
     </html>
   </xsl:template>
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>
-- 
cgit