From a298f24301c5a7fff14e470777ac245440a76c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Burgener?= <benoit.burgener@liip.ch>
Date: Wed, 24 Feb 2016 14:38:06 +0100
Subject: [PATCH] Relative path for styleguide links & assets

---
 src/locales/de/docs.yml                       | 16 ++++----
 src/locales/en/docs.yml                       | 18 ++++-----
 src/locales/fr/docs.yml                       | 36 ++++++++---------
 src/views/layouts/default.html                | 40 +++++++++----------
 src/views/layouts/includes/f-footer.html      |  2 +-
 src/views/layouts/includes/f-header.html      |  6 +--
 src/views/layouts/includes/f-menu-item.html   |  4 +-
 src/views/layouts/includes/f-menu-mobile.html |  2 +-
 src/views/layouts/includes/f-menu.html        | 16 ++++----
 9 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/src/locales/de/docs.yml b/src/locales/de/docs.yml
index 7e3d11ae..4014d873 100644
--- a/src/locales/de/docs.yml
+++ b/src/locales/de/docs.yml
@@ -173,7 +173,7 @@ basic-grid:
     Die Webseiten bestehen aus drei Bereichen: dem Header, dem vierspaltig aufgebauten Inhaltsbereich und dem Footer.
 
     <figure>
-      <img src="/styleguide-img/grid.png" alt="Page grid example">
+      <img src="../../styleguide-img/grid.png" alt="Page grid example">
       <figcaption> Das vierspaltige Raster wird von den verschiedenen Seitentypen unterschiedlich belegt.</figcaption>
     </figure>
 
@@ -223,7 +223,7 @@ cd-elements:
     Der Absender einer Website wird immer mit dem vollständigen Bundeslogo (Wappen mit viersprachiger Wortmarke) und der Bezeichnung der Organisationseinheit inklusive Kürzel oder Kurzform gekennzeichnet. Diese zwei Bestandteile sind durch eine vertikale Linie voneinander getrennt. Die Kennzeichnung ist immer oben links im Header positioniert.
 
     <figure>
-      <img src="/styleguide-img/kennzeichnung.png" alt="Page grid example">
+      <img src="../../styleguide-img/kennzeichnung.png" alt="Page grid example">
       <figcaption> Die Kennzeichnung besteht aus dem vollständigen Bundeslogo und der Bezeichnung der Organisationseinheit, sowie einer Trennlinie.</figcaption>
     </figure>
 
@@ -232,7 +232,7 @@ cd-elements:
     Für Anwendungen, bei denen der Platz im Header eingeschränkt ist, kann das Wappen allein ohne die Wortmarke verwendet werden. Die Bezeichnung der Organisationseinheit kann als Kürzel (z.B. EDA) oder Kurzform (z.B. MeteoSchweiz) verwendet werden. Organisationseinheiten, für die es keine Kürzel oder Kurzformen gibt, werden ausgeschrieben. Das kann dazu führen, dass die Bezeichnung mehrzeilig und der Header-Bereich dadurch höher wird.
 
     <figure>
-      <img src="/styleguide-img/mobile_header.png" alt="Page grid example">
+      <img src="../../styleguide-img/mobile_header.png" alt="Page grid example">
       <figcaption>Für die Kennzeichnung im Header auf Smartphones kann auch das Kürzel verwendet werden. Wenn die Organisationseinheit ausgeschrieben werden muss, kann die Bezeichnung mehrzeilig werden.</figcaption>
     </figure>
 
@@ -241,7 +241,7 @@ cd-elements:
     Die vollständige Bezeichnung der Organisationseinheit wird bei mobilen Geräten ausserdem in einem Bereich oberhalb des Headers eingeblendet. Dieser Bereich wird beim ersten Scrollen ausgeblendet.
 
     <figure>
-       <img src="/styleguide-img/schublade.png" alt="Beispiel einer vollständigen Bezeichnung">
+       <img src="../../styleguide-img/schublade.png" alt="Beispiel einer vollständigen Bezeichnung">
        <figcaption>Die vollständige Bezeichnung der Organisationseinheit bei Smartphones.</figurecaption>
     </figure>
 
@@ -249,7 +249,7 @@ cd-elements:
 
     Die rote Trennlinie schliesst den Header nach unten ab. Sie kann einen ausgewählten Bereich in der Globalnavigation auszeichnen.
 
-    ![Die rote Trennlinie wird zur Markierung eines aktiven Bereichs in der Globalnavigation verwendet.](/styleguide-img/rotelinie.png)
+    ![Die rote Trennlinie wird zur Markierung eines aktiven Bereichs in der Globalnavigation verwendet.](../../styleguide-img/rotelinie.png)
 
     ## Typographie
 
@@ -294,7 +294,7 @@ devices:
     Auf Desktop Computern, Laptops und Tablets, die im Querformat gehalten werden, wird das vierspaltige Original-Layout beibehalten. Sobald ein Tablet im Hochformat gehalten wird, wird der Inhalt der rechten Spalte (Kontextspalte) unterhalb des Inhalts angezeigt.
 
     <figure>
-      <img src="/styleguide-img/responsive.png" alt="Grafik zur Anordnung des Inhalts je nach Endgerät">
+      <img src="../../styleguide-img/responsive.png" alt="Grafik zur Anordnung des Inhalts je nach Endgerät">
       <figcaption> Auf den verschiedenen Endgeräten werden die Inhalte unterschiedlich angeordnet.</figcaption>
     </figure>
 
@@ -364,7 +364,7 @@ header-footer:
     Diese Elemente sind entweder Markenelemente oder verbindliche Elemente. Sie dürfen nicht verändert werden.
 
     <figure>
-      <img src="/styleguide-img/header.png" alt="Page grid example">
+      <img src="../../styleguide-img/header.png" alt="Page grid example">
       <figcaption> Der Header mit den prägenden Elementen</figcaption>
     </figure>
 
@@ -411,7 +411,7 @@ header-footer:
     In der Fusszeile unterhalb des Footers, wird ein Hinweis auf das Copyright und Links auf "Rechtliches" und "Impressum" aufgeführt. Die Fusszeile ist ein Markenelement. Die Verwendung ist zwingend.
 
     <figure>
-      <img src="/styleguide-img/footer.png" alt="Beispiel für einen Footer">
+      <img src="../../styleguide-img/footer.png" alt="Beispiel für einen Footer">
       <figcaption> Der Footer mit den verschiedenen Bereichen </figcaption>
     </figure>
 
diff --git a/src/locales/en/docs.yml b/src/locales/en/docs.yml
index dce9b467..3753e84f 100644
--- a/src/locales/en/docs.yml
+++ b/src/locales/en/docs.yml
@@ -104,7 +104,7 @@ basic-grid:
     the header, the four-column content section, and the footer.
 
     <figure>
-      <img src="/styleguide-img/grid.png" alt="Page grid example">
+      <img src="../../styleguide-img/grid.png" alt="Page grid example">
       <figcaption>The four-column grid is used in different ways by the various page types</figcaption>
     </figure>
 
@@ -151,7 +151,7 @@ cd-elements:
     The originator of the website is always identified via the full form of the Confederation logo (coat of arms and the four-language wordmark) and the name of the organizational unit, including its abbreviation or shortened form. These two components are separated from one another by a vertical line. The designation is always positioned at the top left of the header. As an alternative to the organizational unit, the title of the website may also be shown.
 
     <figure>
-      <img src="/styleguide-img/kennzeichnung.png" alt="Page grid example">
+      <img src="../../styleguide-img/kennzeichnung.png" alt="Page grid example">
       <figcaption>The designation comprises the full form of the Confederation logo, and the name of the organizational unit, as well as a separating line.</figcaption>
     </figure>
 
@@ -160,7 +160,7 @@ cd-elements:
     For applications in which space for the header is limited, the coat of arms can be used on its own without the wordmark. The name of the organizational unit can be given in its abbreviated form (e.g. EDA) or as a short form (e.g. MeteoSchweiz). Organizational units for which there is no abbreviation or short form are written in full. This can mean that the designation covers several lines and the height of the header section is increased to accommodate the name.
 
     <figure>
-      <img src="/styleguide-img/mobile_header.png" alt="Page grid example">
+      <img src="../../styleguide-img/mobile_header.png" alt="Page grid example">
       <figcaption>For the designation on smartphones the abbreviation can also be used. If the name of the organizational unit has to be written out in full, the designation may cover several lines.</figcaption>
     </figure>
 
@@ -168,13 +168,13 @@ cd-elements:
 
     In mobile devices, the complete name of the organizational unit is shown together with the language selection in a drawer section above the header. This section is hidden automatically the first time the user scrolls down.
 
-    ![image](/styleguide-img/schublade.png)
+    ![image](../../styleguide-img/schublade.png)
 
     ## Separating Line below the Header
 
     The red separating line marks the bottom of the header. It can also indicate a field selected in the global navigation.
 
-    ![image](/styleguide-img/rotelinie.png)
+    ![image](../../styleguide-img/rotelinie.png)
 
     ## Typography
 
@@ -218,7 +218,7 @@ devices:
     For desktop computers, laptops, and tablets held in landscape mode, the original layout is retained. As soon as a tablet is held in portrait mode, the content of the right-hand column (the context pane) is shown below the content.
 
     <figure>
-      <img src="/styleguide-img/responsive.png" alt="Page grid example">
+      <img src="../../styleguide-img/responsive.png" alt="Page grid example">
       <figcaption>The contents are arranged and displayed differently on different end devices</figcaption>
     </figure>
 
@@ -274,7 +274,7 @@ header-footer:
     These elements are either CD elements or fixed elements. They may not be amended in any way.
 
     <figure>
-      <img src="/styleguide-img/header.png" alt="Page grid example">
+      <img src="../../styleguide-img/header.png" alt="Page grid example">
       <figcaption>The header with its key elements</figcaption>
     </figure>
 
@@ -310,7 +310,7 @@ header-footer:
     The footbar below the footer contains the copyright notice, and links to the “legal notice” and “further legal information”. The footbar is a CD element. Its use is mandatory.
 
     <figure>
-      <img src="/styleguide-img/footer.png" alt="Page grid example">
+      <img src="../../styleguide-img/footer.png" alt="Page grid example">
       <figcaption>The footer with its various sections</figcaption>
     </figure>
 
@@ -318,7 +318,7 @@ header-footer:
 sample-pages:
   title: Sample Pages
   content: |
-    Several sample pages are shown in the Confederation Web Guidelines, all of them based on the page types “Home page” and “Content Page”. They demonstrate how the different elements can be combined. The example pages can be directly used for a project. 
+    Several sample pages are shown in the Confederation Web Guidelines, all of them based on the page types “Home page” and “Content Page”. They demonstrate how the different elements can be combined. The example pages can be directly used for a project.
 
     ## Home Page with Global Navigation
 
diff --git a/src/locales/fr/docs.yml b/src/locales/fr/docs.yml
index d96f4bb4..7b9ff517 100755
--- a/src/locales/fr/docs.yml
+++ b/src/locales/fr/docs.yml
@@ -4,11 +4,11 @@ index:
   content: |
     # L’apparence de l’administration fédérale sur Internet
 
-    Les lignes directrices pour le design web de la Confédération (lignes directrices web) définissent le cadre créatif pour l’apparence de sites Internet du Conseil fédéral et de l’administration fédérale. Elles font partie de l’identité visuelle de la Confédération et sont obligatoires pour tous les sites Internet publics de l’administration fédérale. 
+    Les lignes directrices pour le design web de la Confédération (lignes directrices web) définissent le cadre créatif pour l’apparence de sites Internet du Conseil fédéral et de l’administration fédérale. Elles font partie de l’identité visuelle de la Confédération et sont obligatoires pour tous les sites Internet publics de l’administration fédérale.
 
     ## Exceptions
 
-    Des exceptions du design web de la Confédération sont possibles pour les sites Internet de campagne et partenaires. Elles doivent être approuvées par la Conférence des secrétaires généraux des départements (CSG). Les demandes correspondantes doivent être soumises au <a href="http://intranet.bk.admin.ch/themen/02268/02270/index.html?lang=de">Service Identité visuelle de la Confédération</a> de la Chancellerie fédérale. 
+    Des exceptions du design web de la Confédération sont possibles pour les sites Internet de campagne et partenaires. Elles doivent être approuvées par la Conférence des secrétaires généraux des départements (CSG). Les demandes correspondantes doivent être soumises au <a href="http://intranet.bk.admin.ch/themen/02268/02270/index.html?lang=de">Service Identité visuelle de la Confédération</a> de la Chancellerie fédérale.
 
     ## Sites Internet conviviaux et accessibles
 
@@ -141,7 +141,7 @@ accessibility:
 
       ### HeadingsMap (module complémentaire Firefox)
 
-      HeadingsMap est idéal pour rendre la structure d’une page Internet visible. Ce module complémentaire affiche la structure des titres du site Internet actuellement ouvert dans une zone supplémentaire de la fenêtre du navigateur. 
+      HeadingsMap est idéal pour rendre la structure d’une page Internet visible. Ce module complémentaire affiche la structure des titres du site Internet actuellement ouvert dans une zone supplémentaire de la fenêtre du navigateur.
 
       ### Juicy Studio Accessibility Toolbar (module complémentaire Firefox)
 
@@ -168,7 +168,7 @@ basic-grid:
 
     Les pages Internet se composent de trois zones: l’en-tête, la zone de contenu en quatre colonnes et le pied de page.
 
-    <figure><img src="/styleguide-img/grid.png" alt="Exemple de grille de page"><figcaption> La grille à quatre colonnes est utilisée de différentes manières par les divers types de pages.</figcaption>
+    <figure><img src="../../styleguide-img/grid.png" alt="Exemple de grille de page"><figcaption> La grille à quatre colonnes est utilisée de différentes manières par les divers types de pages.</figcaption>
     </figure>
 
     ## Types de pages
@@ -188,7 +188,7 @@ basic-grid:
     La sous-navigation dans la colonne de gauche de la zone de contenu est une «navigation de déplacement» qui indique toujours les options de la page actuelle. Elle se compose de trois zones: l’en-tête de navigation avec le titre de la page actuelle, un lien «Retour» vers le niveau de navigation supérieur et des liens vers les sous-pages. Le comportement est décrit sur la page d’élément <a href="/fr/hierarchical-navigation.html#01-hierarchical-navigation-04-page-navigation-list">Liste de navigation latérale (sous-navigation de gauche)</a>.
 
 
-    ### Zone de contenu 
+    ### Zone de contenu
 
     Dans la zone de contenu, on place les titres de page et les intertitres, ainsi que le corps du texte, les images, les encadrés d’information et les informations supplémentaires. Les informations supplémentaires sont toujours placées tout en bas de la zone de contenu et n’ont pas leur place dans la colonne de contexte. Le test d’utilisabilité a permis de constater que les utilisateurs ne font pas tellement attention aux informations placées dans la colonne de contexte.
 
@@ -217,7 +217,7 @@ cd-elements:
     L’expéditeur d’un site Internet est toujours désigné par le logo fédéral complet (blason et marque verbale en quatre langues), le nom de l’unité organisationnelle, y compris le sigle ou la forme courte. Ces deux composants sont séparés par une ligne verticale. La désignation est toujours placée en haut à gauche dans l’en-tête.
 
     <figure>
-        <img src="/styleguide-img/kennzeichnung.png" alt="Exemple de grille de page">
+        <img src="../../styleguide-img/kennzeichnung.png" alt="Exemple de grille de page">
         <figcaption> La désignation est composé du logo fédéral complet et du nom de l’unité organisationnelle ainsi que d’une ligne de séparation.</figcaption>
     </figure>
 
@@ -226,16 +226,16 @@ cd-elements:
     Pour les applications dont l’espace est limité dans l’en-tête, le blason peut être utilisé seul, sans la marque verbale. Le nom de l’unité organisationnelle peut être utilisé sous forme de sigle (p. ex. DFAE) ou dans sa forme courte (p. ex. MétéoSuisse). Les noms des unités organisationnelles n’ayant pas de sigle ou de forme courte sont écrits entièrement. Cela peut avoir comme effet que la désignation s’étend sur plusieurs lignes et que la zone d’en-tête devient plus haute.
 
     <figure>
-        <img src="/styleguide-img/mobile_header.png" alt="Exemple de grille de page">
+        <img src="../../styleguide-img/mobile_header.png" alt="Exemple de grille de page">
         <figcaption>Pour la désignation dans l’en-tête sur les smartphones, on peut également utiliser le sigle. S’il faut écrire le nom de l’unité organisationnelle en entier, la désignation peut s’étendre sur plusieurs lignes.</figcaption>
     </figure>
 
-    Partout où la forme réduite de la désignation est utilisée dans l’en-tête, le logo fédéral complet avec blason et marque verbale en quatre langues doit être répété dans le pied de page. 
-    
+    Partout où la forme réduite de la désignation est utilisée dans l’en-tête, le logo fédéral complet avec blason et marque verbale en quatre langues doit être répété dans le pied de page.
+
     Sur les appareils mobiles, le nom complet de l’unité organisationnelle est également affiché dans une zone au-dessus de l’en-tête. Cette zone est masquée dès le premier défilement de la page.
 
     <figure>
-        <img src="/styleguide-img/schublade.png" alt="Exemple d’un nom complet">
+        <img src="../../styleguide-img/schublade.png" alt="Exemple d’un nom complet">
         <figcaption>Le nom complet de l’unité d’organisation sur les smartphones.</figurecaption>
      </figure>
 
@@ -243,7 +243,7 @@ cd-elements:
 
     La ligne de séparation rouge délimite l’en-tête vers le bas. Elle peut mettre en évidence une zone sélectionnée dans la navigation globale.
 
-    ![La ligne de séparation rouge est utilisée pour marquer une zone active dans la navigation globale.](/styleguide-img/rotelinie.png)
+    ![La ligne de séparation rouge est utilisée pour marquer une zone active dans la navigation globale.](../../styleguide-img/rotelinie.png)
 
     ## Typographie
 
@@ -288,7 +288,7 @@ devices:
     Sur les ordinateurs de bureau, ordinateurs portables et tablettes qui sont tenus horizontalement, la mise en page originale en quatre colonnes est maintenue. Dès qu’une tablette est tenue verticalement, le contenu de la colonne de droite (colonne de contexte) est affiché en-dessous du contenu.
 
     <figure>
-        <img src="/styleguide-img/responsive.png" alt="Illustration de l’agencement des contenus en fonction du périphérique de sortie">
+        <img src="../../styleguide-img/responsive.png" alt="Illustration de l’agencement des contenus en fonction du périphérique de sortie">
         <figcaption> Les contenus sont agencés différemment selon les divers périphériques de sortie.</figcaption>
     </figure>
 
@@ -331,8 +331,8 @@ guidelines:
     ### Ordinateur de bureau:
 
     - Internet Explorer 9 et supérieur
-    - Safari 8 et supérieur 
-    - Firefox 40 et supérieur 
+    - Safari 8 et supérieur
+    - Firefox 40 et supérieur
     - Chrome 45 et supérieur
 
     ### Mobile:
@@ -349,7 +349,7 @@ header-footer:
   title: En-tête et pied de page
   content: |
 
-    L’en-tête et le pied de page figurent sur toutes les pages et leur conception est fixe. Sur les appareils mobiles, leur affichage est ajusté. 
+    L’en-tête et le pied de page figurent sur toutes les pages et leur conception est fixe. Sur les appareils mobiles, leur affichage est ajusté.
 
     ## En-tête
 
@@ -358,7 +358,7 @@ header-footer:
     Ces éléments sont soit des éléments de marque, soit des éléments obligatoires. Ils ne doivent pas être modifiés.
 
     <figure>
-      <img src="/styleguide-img/header.png" alt="Exemple de grille de page">
+      <img src="../../styleguide-img/header.png" alt="Exemple de grille de page">
       <figcaption> L’en-tête avec les éléments distinctifs</figcaption>
     </figure>
 
@@ -376,7 +376,7 @@ header-footer:
 
     La **désignation**, composé du logo fédéral (blason et marque verbale) et du nom de l’unité organisationnelle, est l’élément de marque le plus important. Sur les sites inter-organisationnels et les portails thématiques, le nom de l’unité organisationnelle est remplacé par le titre du site Internet. Pour les appareils mobiles, la marque verbale du logo fédéral peut être omise et le nom de l’unité organisationnelle peut être abrégé. Si le nom est abrégé, il est affiché dans sa totalité dans une zone située au-dessus de l’en-tête.
 
-    La **fonction de recherche** est positionnée comme champ de texte sur le côté droit de l’en-tête, en face de la désignation. Lorsque l’utilisateur clique dans le champ de texte, le champ de texte est agrandi. 
+    La **fonction de recherche** est positionnée comme champ de texte sur le côté droit de l’en-tête, en face de la désignation. Lorsque l’utilisateur clique dans le champ de texte, le champ de texte est agrandi.
 
     Sur les appareils mobiles, la recherche peut être appelée via une icône dans l’en-tête.
 
@@ -405,7 +405,7 @@ header-footer:
     Dans la ligne de pied de page, située en-dessous du pied de page, on trouve une note concernant le copyright et des liens vers les «Informations juridiques» et l’«Impressum». La ligne de pied de page est un élément de marque. Son utilisation est obligatoire.
 
     <figure>
-      <img src="/styleguide-img/footer.png" alt="Exemple d’un pied de page">
+      <img src="../../styleguide-img/footer.png" alt="Exemple d’un pied de page">
       <figcaption> Le pied de page avec les différentes zones </figcaption>
     </figure>
 
diff --git a/src/views/layouts/default.html b/src/views/layouts/default.html
index 15f0fb93..0b755433 100644
--- a/src/views/layouts/default.html
+++ b/src/views/layouts/default.html
@@ -12,28 +12,28 @@
 	<title>{{#if category}}{{t category}}, {{/if}}{{#if title}}{{t title}}, {{/if}}{{t 'styleguide.title'}}</title>
 
   <!-- Source CSS -->
-  <link rel="stylesheet" href="/css/vendors.css">
-  <link rel="stylesheet" href="/css/admin.css">
-  <link rel="stylesheet" href="/css/print.css">
+  <link rel="stylesheet" href="{{#if baseurl}}{{baseurl}}/{{/if}}../css/vendors.css">
+  <link rel="stylesheet" href="{{#if baseurl}}{{baseurl}}/{{/if}}../css/admin.css">
+  <link rel="stylesheet" href="{{#if baseurl}}{{baseurl}}/{{/if}}../css/print.css">
 
   <!-- Styleguide CSS -->
-	{{#if fabricator}}<link rel="stylesheet" href="/css/fabricator.css">{{/if}}
+	{{#if fabricator}}<link rel="stylesheet" href="{{#if baseurl}}{{baseurl}}/{{/if}}../css/fabricator.css">{{/if}}
 
   <!-- Favicons -->
-  <link rel="shortcut icon" href="/img/ico/favicon.ico">
-  <link rel="apple-touch-icon" sizes="57x57" href="/img/ico/apple-touch-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="/img/ico/apple-touch-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="/img/ico/apple-touch-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="/img/ico/apple-touch-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="/img/ico/apple-touch-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="/img/ico/apple-touch-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="/img/ico/apple-touch-icon-76x76.png">
-  <link rel="icon" type="image/png" href="/img/ico/favicon-96x96.png" sizes="96x96">
-  <link rel="icon" type="image/png" href="/img/ico/favicon-16x16.png" sizes="16x16">
-  <link rel="icon" type="image/png" href="/img/ico/favicon-32x32.png" sizes="32x32">
+  <link rel="shortcut icon" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/favicon.ico">
+  <link rel="apple-touch-icon" sizes="57x57" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/apple-touch-icon-76x76.png">
+  <link rel="icon" type="image/png" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/favicon-96x96.png" sizes="96x96">
+  <link rel="icon" type="image/png" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/favicon-16x16.png" sizes="16x16">
+  <link rel="icon" type="image/png" href="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/favicon-32x32.png" sizes="32x32">
   <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="msapplication-TileImage" content="/img/ico/mstile-144x144.png">
-  <meta name="msapplication-config" content="/img/ico/browserconfig.xml">
+  <meta name="msapplication-TileImage" content="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/mstile-144x144.png">
+  <meta name="msapplication-config" content="{{#if baseurl}}{{baseurl}}/{{/if}}../img/ico/browserconfig.xml">
 </head>
 <body>
   <ul class="access-keys">
@@ -63,11 +63,11 @@
 	{{/if}}
 
   <!-- Source Scripts -->
-  <script src="/js/vendors.min.js"></script>
-  <script src="/js/main.min.js"></script>
+  <script src="{{#if baseurl}}{{baseurl}}/{{/if}}../js/vendors.min.js"></script>
+  <script src="{{#if baseurl}}{{baseurl}}/{{/if}}../js/main.min.js"></script>
 
   <!-- Styleguide Scripts -->
-	<script src="/js/fabricator.min.js"></script>
+	<script src="{{#if baseurl}}{{baseurl}}/{{/if}}../js/fabricator.min.js"></script>
 
 </body>
 </html>
diff --git a/src/views/layouts/includes/f-footer.html b/src/views/layouts/includes/f-footer.html
index d1618330..c0305f62 100644
--- a/src/views/layouts/includes/f-footer.html
+++ b/src/views/layouts/includes/f-footer.html
@@ -12,7 +12,7 @@ <h3>©2015 {{t 'styleguide.chancellery'}}</h3>
 
   <div class="container-fluid">
     <hr class="footer-line visible-xs">
-    <img class="visible-xs" src="/img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="back to home">
+    <img class="visible-xs" src="{{#if baseurl}}{{baseurl}}/{{/if}}../img/logo-CH.svg" onerror="this.onerror=null; this.src='{{#if baseurl}}{{baseurl}}/{{/if}}../img/logo-CH.png'" alt="back to home">
   </div>
 
   <address>
diff --git a/src/views/layouts/includes/f-header.html b/src/views/layouts/includes/f-header.html
index 89a13488..5a4d645b 100644
--- a/src/views/layouts/includes/f-header.html
+++ b/src/views/layouts/includes/f-header.html
@@ -6,7 +6,7 @@ <h2 class="sr-only">{{t 'styleguide.language'}}</h2>
         <ul>
           {{#each locales}}
             <li>
-              <a href="{{#if disabled}}#{{else}}/{{code}}/{{../../permalink}}{{/if}}" lang="{{code}}" title="{{name}}{{#isCurrentLocale code}} {{t 'styleguide.selected'}}{{/isCurrentLocale}}{{#if disabled}} {{t 'styleguide.disabled'}}{{/if}}" aria-label="{{name}} {{#isCurrentLocale code}}{{t 'styleguide.selected'}}{{/isCurrentLocale}}{{#if disabled}}{{t 'styleguide.disabled'}}{{/if}}" class="{{#isCurrentLocale code}}active{{/isCurrentLocale}}{{#if disabled}}disabled{{/if}}">{{toUpperCase code}}</a>
+              <a href="{{#if disabled}}#{{else}}{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{code}}/{{../../permalink}}{{/if}}" lang="{{code}}" title="{{name}}{{#isCurrentLocale code}} {{t 'styleguide.selected'}}{{/isCurrentLocale}}{{#if disabled}} {{t 'styleguide.disabled'}}{{/if}}" aria-label="{{name}} {{#isCurrentLocale code}}{{t 'styleguide.selected'}}{{/isCurrentLocale}}{{#if disabled}}{{t 'styleguide.disabled'}}{{/if}}" class="{{#isCurrentLocale code}}active{{/isCurrentLocale}}{{#if disabled}}disabled{{/if}}">{{toUpperCase code}}</a>
             </li>
           {{/each}}
         </ul>
@@ -22,8 +22,8 @@ <h2 class="sr-only">{{t 'styleguide.language'}}</h2>
   </div>
 
   <div class="clearfix">
-    <a href="/{{data 'locale'}}/" class="brand hidden-xs">
-      <img src="/img/logo-CH.svg" onerror="this.onerror=null; this.src='img/logo-CH.png'" alt="{{t 'styleguide.logo'}}" />
+    <a href="{{#if baseurl}}{{baseurl}}/{{/if}}../{{data 'locale'}}/" class="brand hidden-xs">
+      <img src="{{#if baseurl}}{{baseurl}}/{{/if}}../img/logo-CH.svg" onerror="this.onerror=null; this.src='{{#if baseurl}}{{baseurl}}/{{/if}}../img/logo-CH.png'" alt="{{t 'styleguide.logo'}}" />
       <h1>{{t 'styleguide.title'}}</h1>
     </a>
   </div>
diff --git a/src/views/layouts/includes/f-menu-item.html b/src/views/layouts/includes/f-menu-item.html
index 57f0d11b..ca582351 100644
--- a/src/views/layouts/includes/f-menu-item.html
+++ b/src/views/layouts/includes/f-menu-item.html
@@ -9,11 +9,11 @@
         {{#each items}}
           <li class="col-sm-3">
             <div class="yamm-content container-fluid">
-              <h4><a href="/{{data 'locale'}}/{{#if ../path}}{{@../key}}/{{/if}}{{prefixless @key}}.html">{{t @../key @key 'title'}}</a></h4>
+              <h4><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/{{#if ../path}}{{@../key}}/{{/if}}{{prefixless @key}}.html">{{t @../key @key 'title'}}</a></h4>
               <ul role="menu">
                 {{#each items}}
                   <li role="presentation">
-                    <a href="/{{data 'locale'}}/{{prefixless @../key}}.html#{{replace '(\.)' '-' @key}}">{{t @../../key @key 'title'}}</a>
+                    <a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/{{prefixless @../key}}.html#{{replace '(\.)' '-' @key}}">{{t @../../key @key 'title'}}</a>
                   </li>
                 {{/each}}
               </ul>
diff --git a/src/views/layouts/includes/f-menu-mobile.html b/src/views/layouts/includes/f-menu-mobile.html
index cb3a3372..796919ea 100644
--- a/src/views/layouts/includes/f-menu-mobile.html
+++ b/src/views/layouts/includes/f-menu-mobile.html
@@ -4,7 +4,7 @@
     <a href="#" class="icon icon--before icon--less drilldown-back">{{t 'styleguide.back'}}</a>
     <ul>
       {{#each items}}
-        <li><a href="/{{data 'locale'}}/{{#if ../path}}{{@../key}}/{{/if}}{{prefixless @key}}.html">{{t @../key @key 'title'}}</a></li>
+        <li><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/{{#if ../path}}{{@../key}}/{{/if}}{{prefixless @key}}.html">{{t @../key @key 'title'}}</a></li>
       {{/each}}
     </ul>
   </nav>
diff --git a/src/views/layouts/includes/f-menu.html b/src/views/layouts/includes/f-menu.html
index 9e7df902..52e71be7 100644
--- a/src/views/layouts/includes/f-menu.html
+++ b/src/views/layouts/includes/f-menu.html
@@ -6,9 +6,9 @@ <h2 class="sr-only">{{t 'styleguide.navigation'}}</h2>
       <div class="nav-mobile-header">
         <div class="table-row">
           <span class="nav-mobile-logo">
-            <img src="/img/swiss.svg" onerror="this.onerror=null; this.src='/img/swiss.png'" alt="{{t 'styleguide.logo'}}" />
+            <img src="{{#if baseurl}}{{baseurl}}/{{/if}}../img/swiss.svg" onerror="this.onerror=null; this.src='{{#if baseurl}}{{baseurl}}/{{/if}}../img/swiss.png'" alt="{{t 'styleguide.logo'}}" />
           </span>
-          <h1><a href="/{{data 'locale'}}/">{{t 'styleguide.title'}}</a></h1>
+          <h1><a href="{{#if baseurl}}{{baseurl}}/{{/if}}../{{data 'locale'}}/">{{t 'styleguide.title'}}</a></h1>
         </div>
       </div>
       <div class="table-cell dropdown">
@@ -23,7 +23,7 @@ <h1><a href="/{{data 'locale'}}/">{{t 'styleguide.title'}}</a></h1>
                     <a href="#" class="icon icon--before icon--less drilldown-back">{{t 'styleguide.back'}}</a>
                     <ul>
                       {{#each views.docs.items}}
-                        <li><a href="/{{data 'locale'}}/docs/{{@key}}.html">{{t 'docs' @key 'title'}}</a></li>
+                        <li><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/docs/{{@key}}.html">{{t 'docs' @key 'title'}}</a></li>
                       {{/each}}
                     </ul>
                   </nav>
@@ -39,7 +39,7 @@ <h1><a href="/{{data 'locale'}}/">{{t 'styleguide.title'}}</a></h1>
                     <a href="#" class="icon icon--before icon--less drilldown-back">{{t 'styleguide.back'}}</a>
                     <ul>
                       {{#each views.pages.items}}
-                        <li><a href="/{{data 'locale'}}/pages/{{@key}}.html">{{t 'pages' @key 'title'}}</a></li>
+                        <li><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/pages/{{@key}}.html">{{t 'pages' @key 'title'}}</a></li>
                       {{/each}}
                     </ul>
                   </nav>
@@ -66,11 +66,11 @@ <h1><a href="/{{data 'locale'}}/">{{t 'styleguide.title'}}</a></h1>
             {{#each views.docs.items}}
               <li class="col-sm-3">
                 <div class="yamm-content container-fluid">
-                  <h4><a href="/{{data 'locale'}}/docs/{{@key}}.html">{{t 'docs' @key 'title'}}</a></h4>
+                  <h4><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/docs/{{@key}}.html">{{t 'docs' @key 'title'}}</a></h4>
                   <ul role="menu">
                     {{#each items}}
                       <li role="presentation">
-                        <a href="/{{data 'locale'}}/docs/{{@../key}}.html#{{@key}}">{{t 'docs' @key 'title'}}</a>
+                        <a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/docs/{{@../key}}.html#{{@key}}">{{t 'docs' @key 'title'}}</a>
                       </li>
                     {{/each}}
                   </ul>
@@ -101,11 +101,11 @@ <h4><a href="/{{data 'locale'}}/docs/{{@key}}.html">{{t 'docs' @key 'title'}}</a
             {{#each views.pages.items}}
               <li class="col-sm-3">
                 <div class="yamm-content container-fluid">
-                  <h4><a href="/{{data 'locale'}}/pages/{{@key}}.html">{{t 'pages' @key 'title'}}</a></h4>
+                  <h4><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/pages/{{@key}}.html">{{t 'pages' @key 'title'}}</a></h4>
                   <ul role="menu">
                     {{#each items}}
                       <li role="presentation">
-                        <a href="/{{data 'locale'}}/pages/{{@../key}}.html#{{@key}}">{{t 'pages' @key 'title'}}</a>
+                        <a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/pages/{{@../key}}.html#{{@key}}">{{t 'pages' @key 'title'}}</a>
                       </li>
                     {{/each}}
                   </ul>