Relative path for styleguide links & assets

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,15 +241,15 @@ 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>
 
     ## Trennlinie unterhalb Header
 
     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>
 

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,21 +160,21 @@ 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>
 
     In cases where the shorter form of the designation is used in the header, the footer must contain the full form of the Confederation logo with the coat of arms and the four-language wordmark.
 
     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,15 +310,15 @@ 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>
 
     On mobile devices, many of the functions from the header (e.g. navigation, service navigation, and the full form of the Confederation logo) are moved to the 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