From e04b3187355d9acfcda9626089d1eec1eacfdb8e Mon Sep 17 00:00:00 2001
From: akwizgran <michael@briarproject.org>
Date: Tue, 11 Jun 2024 11:37:11 +0100
Subject: [PATCH] Set base URL so site can be deployed at a relative URL.

---
 assets/main.scss                           | 10 +--
 config.toml                                |  4 +-
 layouts/partials/brand/logo.html           | 80 +++++++++++-----------
 layouts/partials/brand/typography.html     |  2 +-
 layouts/partials/design/illustrations.html | 24 +++----
 layouts/partials/design/spacing.html       |  2 +-
 layouts/partials/head.html                 | 12 ++--
 layouts/partials/navbar.html               | 12 ++--
 layouts/partials/navbar_side.html          | 12 ++--
 layouts/partials/scripts.html              | 12 ++--
 10 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 87689f4..284db65 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -14,7 +14,7 @@ body {
 
 body:after{
  display: none;
- content: url("../images/wide-logo.png") url("../images/logo-text-white.png");
+ content: url("/styleguide/images/wide-logo.png") url("/styleguide/images/logo-text-white.png");
 }
 
 a {
@@ -33,9 +33,9 @@ a:hover {
     --text: #{$gray-900};
     --link: #{$blue-500};
     --link-hover: #{$blue-600};
-    --logo: url("../images/wide-logo.png");
+    --logo: url("/styleguide/images/wide-logo.png");
     --logo-bg: #{$white};
-    --header-svg: url("../images/app.svg");
+    --header-svg: url("/styleguide/images/app.svg");
     --header-text: #{$gray-950};
     --sidebar-bg: #{$gray-100};
     --sidebar-inner-bg: #{$gray-50};
@@ -71,9 +71,9 @@ a:hover {
     --text: #{$white};
     --link: #{$white};
     --link-hover: #{$gray-200};
-    --logo: url("../images/logo-text-white.png");
+    --logo: url("/styleguide/images/logo-text-white.png");
     --logo-bg: #{$night-900};
-    --header-svg: url("../images/app-dark.svg");
+    --header-svg: url("/styleguide/images/app-dark.svg");
     --header-text: #{$gray-950};
     --sidebar-bg: #{$night-800};
     --sidebar-inner-bg: #{$night-700};
diff --git a/config.toml b/config.toml
index aac04d1..8d58e2d 100644
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
-baseURL = ""
+baseURL = "/styleguide/"
 languageCode = "en-us"
 title = "Briar"
 [params]
-  logo = "/images/logo.svg"
+  logo = "/styleguide/images/logo.svg"
diff --git a/layouts/partials/brand/logo.html b/layouts/partials/brand/logo.html
index 1697731..4429fe3 100644
--- a/layouts/partials/brand/logo.html
+++ b/layouts/partials/brand/logo.html
@@ -6,13 +6,13 @@
 <div class="col-md-6 col-sm-12 mb-3">
   <h5 class="pb-3">Composition (Horizontal)</h5>
   <div class="bg-box text-center p-5">
-    <img src="/images/composition-horizontal.svg" />
+    <img src="/styleguide/images/composition-horizontal.svg" />
   </div>
 </div>
 <div class="col-md-6 col-sm-12">
   <h5 class="pb-3">Composition (Vertical)</h5>
 	<div class="bg-box text-center p-5">
-		<img src="/images/composition-vertical.svg" />
+		<img src="/styleguide/images/composition-vertical.svg" />
   </div>
 </div>
 </div>
@@ -21,13 +21,13 @@
 <div class="col-md-6 col-sm-12 mb-3">
   <h5 class="pb-3">Safe Space (Horizontal)</h5>
   <div class="bg-box text-center p-5">
-    <img src="/images/safespace-horizontal.svg" />
+    <img src="/styleguide/images/safespace-horizontal.svg" />
   </div>
 </div>
 <div class="col-md-6 col-sm-12">
   <h5 class="pb-3">Safe Space (Vertical)</h5>
   <div class="bg-box text-center p-5">
-    <img src="/images/safespace-vertical.svg" />
+    <img src="/styleguide/images/safespace-vertical.svg" />
   </div>
 </div>
 </div>
@@ -39,7 +39,7 @@
 <div class="row mb-5">
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-4">
-            <img class="rb-contain" src="/images/briar_horizontal_color.png" alt="Briar Horizontal color logo">
+            <img class="rb-contain" src="/styleguide/images/briar_horizontal_color.png" alt="Briar Horizontal color logo">
         </div>
         <p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
         <div class="dropdown mb-5">
@@ -47,15 +47,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_horizontal_color.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_horizontal_color.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_color.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_color.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-4">
-            <img class="rb-contain" src="/images/briar_horizontal_black.png" alt="Briar Horizontal black logo">
+            <img class="rb-contain" src="/styleguide/images/briar_horizontal_black.png" alt="Briar Horizontal black logo">
         </div>
         <p class="mb-0 mt-2 caption">Horizontal Black Light Background</p>
         <div class="dropdown mb-5">
@@ -63,15 +63,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_horizontal_black.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_horizontal_black.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_black.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_black.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-4 background-night-700">
-          <img class="rb-contain" src="/images/briar_horizontal_color_bg.png" alt="Briar Horizontal color logo with light background">
+          <img class="rb-contain" src="/styleguide/images/briar_horizontal_color_bg.png" alt="Briar Horizontal color logo with light background">
         </div>
         <p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
         <div class="dropdown mb-5">
@@ -79,14 +79,14 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_horizontal_color_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_horizontal_color_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_color_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_color_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-4 background-black">
-          <img class="rb-contain" src="/images/briar_horizontal_white.png" alt="Briar Horizontal white logo with black background">
+          <img class="rb-contain" src="/styleguide/images/briar_horizontal_white.png" alt="Briar Horizontal white logo with black background">
         </div>
         <p class="mb-0 mt-2 caption">Horizontal White Black Background</p>
         <div class="dropdown mb-5">
@@ -94,8 +94,8 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_horizontal_white_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_horizontal_white_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_white_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_horizontal_white_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
@@ -104,7 +104,7 @@
 <div class="row pt-2">
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-4">
-            <img class="rb-contain" src="/images/briar_vertical_color.png" alt="Briar Vertical color logo">
+            <img class="rb-contain" src="/styleguide/images/briar_vertical_color.png" alt="Briar Vertical color logo">
         </div>
         <p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
         <div class="dropdown mb-5">
@@ -112,15 +112,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_vertical_color.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_vertical_color.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_color.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_color.svg" download>SVG</a>
                   </div>
         </div>
 </div>
 
 <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-4">
-            <img class="rb-contain" src="/images/briar_vertical_black.png" alt="Briar Vertical black logo">
+            <img class="rb-contain" src="/styleguide/images/briar_vertical_black.png" alt="Briar Vertical black logo">
         </div>
         <p class="mb-0 mt-2 caption">Vertical Black Light Background</p>
         <div class="dropdown mb-5">
@@ -128,15 +128,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_vertical_black.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_vertical_black.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_black.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_black.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-4 background-night-700">
-          <img class="rb-contain" src="/images/briar_vertical_color_bg.png" alt="Briar Vertical color logo with light background">
+          <img class="rb-contain" src="/styleguide/images/briar_vertical_color_bg.png" alt="Briar Vertical color logo with light background">
         </div>
         <p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
         <div class="dropdown mb-5">
@@ -144,14 +144,14 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_vertical_color_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_vertical_color_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_color_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_color_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-4 background-black">
-          <img class="rb-contain" src="/images/briar_vertical_white.png" alt="Briar Vertical white logo with black background">
+          <img class="rb-contain" src="/styleguide/images/briar_vertical_white.png" alt="Briar Vertical white logo with black background">
         </div>
         <p class="mb-0 mt-2 caption">Vertical White Black Background</p>
         <div class="dropdown mb-5">
@@ -159,8 +159,8 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_vertical_white_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_vertical_white_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_white_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_vertical_white_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
@@ -169,7 +169,7 @@
 <div class="row mb-5">
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-5">
-            <img class="rb-contain" src="/images/briar_icon_color.png" alt="Briar icon color logo">
+            <img class="rb-contain" src="/styleguide/images/briar_icon_color.png" alt="Briar icon color logo">
         </div>
         <p class="mb-0 mt-2 caption">Icon Color Light Background</p>
         <div class="dropdown mb-5">
@@ -177,15 +177,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_icon_color.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_icon_color.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_color.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_color.svg" download>SVG</a>
                   </div>
         </div>
 </div>
 
 <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-5">
-            <img class="rb-contain" src="/images/briar_icon_black.png" alt="Briar icon black logo">
+            <img class="rb-contain" src="/styleguide/images/briar_icon_black.png" alt="Briar icon black logo">
         </div>
         <p class="mb-0 mt-2 caption">Icon Black Light Background</p>
         <div class="dropdown mb-5">
@@ -193,15 +193,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_icon_black.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_icon_black.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_black.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_black.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-5 background-night-700">
-          <img class="rb-contain" src="/images/briar_icon_color.png" alt="Briar icon color logo with light background">
+          <img class="rb-contain" src="/styleguide/images/briar_icon_color.png" alt="Briar icon color logo with light background">
         </div>
         <p class="mb-0 mt-2 caption">Icon Color Light Background</p>
         <div class="dropdown mb-5">
@@ -209,14 +209,14 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_icon_color_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_icon_color_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_color_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_color_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
     <div class="col-sm-12 col-md-3 col-sm-3">
         <div class="image border p-5 background-black">
-          <img class="rb-contain" src="/images/briar_icon_white.png" alt="Briar icon white logo with black background">
+          <img class="rb-contain" src="/styleguide/images/briar_icon_white.png" alt="Briar icon white logo with black background">
         </div>
         <p class="mb-0 mt-2 caption">Icon White Black Background</p>
         <div class="dropdown mb-5">
@@ -224,8 +224,8 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/briar_icon_white_bg.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/briar_icon_white_bg.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_white_bg.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/briar_icon_white_bg.svg" download>SVG</a>
                   </div>
         </div>
     </div>
diff --git a/layouts/partials/brand/typography.html b/layouts/partials/brand/typography.html
index dc68c0c..5ef553c 100644
--- a/layouts/partials/brand/typography.html
+++ b/layouts/partials/brand/typography.html
@@ -13,7 +13,7 @@
 </div>
 <div class="col-md-6 col-sm-12">
 	<div class="bg-box text-center p-5">
-		<img src="/images/briar-wordmark.svg" />
+		<img src="/styleguide/images/briar-wordmark.svg" />
   </div>
   <div class="alert alert-warning mt-3" role="alert">
             <i class="material-icons orange-icon">warning</i> <a class="underline" href="https://www.fontsquirrel.com/fonts/sinkin-sans" target="_blank" rel="noopener">Sinkin Sans</a> is used for the Briar wordmark. Its use is limited to the Briar logo exclusively and should not be used elsewhere.
diff --git a/layouts/partials/design/illustrations.html b/layouts/partials/design/illustrations.html
index 3eae273..057c878 100644
--- a/layouts/partials/design/illustrations.html
+++ b/layouts/partials/design/illustrations.html
@@ -5,7 +5,7 @@
 <div class="row mb-5">
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4 pl-lg-0 pl-sm-0">
         <div class="image flexing border p-1">
-            <img class="rb-contain" src="/images/chat_doodle_black.png" alt="Chat Doodles Black">
+            <img class="rb-contain" src="/styleguide/images/chat_doodle_black.png" alt="Chat Doodles Black">
         </div>
         <p class="mb-0 mt-2 caption">Chat Doodles Black</p>
         <div class="dropdown mb-5">
@@ -13,15 +13,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/chat_doodle_black.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/chat_doodle_black.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_black.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_black.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-1">
-            <img class="rb-contain" src="/images/chat_doodle_subtle.png" alt="Chat Doodles Subtle">
+            <img class="rb-contain" src="/styleguide/images/chat_doodle_subtle.png" alt="Chat Doodles Subtle">
         </div>
         <p class="mb-0 mt-2 caption">Chat Doodles Subtle</p>
         <div class="dropdown mb-5">
@@ -29,15 +29,15 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle.svg" download>SVG</a>
                   </div>
         </div>
     </div>
 
     <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
         <div class="image flexing border p-1 background-night-900">
-          <img class="rb-contain" src="/images/chat_doodle_subtle_dark.png" alt="Chat Doodles Subtle Dark">
+          <img class="rb-contain" src="/styleguide/images/chat_doodle_subtle_dark.png" alt="Chat Doodles Subtle Dark">
         </div>
         <p class="mb-0 mt-2 caption">Chat Doodles Subtle Dark</p>
         <div class="dropdown mb-5">
@@ -45,14 +45,14 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle_dark.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle_dark.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle_dark.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle_dark.svg" download>SVG</a>
                   </div>
         </div>
     </div>
     <div class="col-sm-12 col-md-3 col-sm-3 mb-5">
         <div class="image flexing border p-1 background-lime-950">
-          <img class="rb-contain" src="/images/chat_doodle_subtle_lime_dark.png" alt="Chat Doodles Subtle Lime Dark">
+          <img class="rb-contain" src="/styleguide/images/chat_doodle_subtle_lime_dark.png" alt="Chat Doodles Subtle Lime Dark">
         </div>
         <p class="mb-0 mt-2 caption">Chat Doodles Subtle Lime Dark</p>
         <div class="dropdown mb-5">
@@ -60,8 +60,8 @@
                     Download
                   </button>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle_lime_dark.png" download>PNG</a>
-                   <a class="dropdown-item" href="/images/chat_doodle_subtle_lime_dark.svg" download>SVG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle_lime_dark.png" download>PNG</a>
+                   <a class="dropdown-item" href="/styleguide/images/chat_doodle_subtle_lime_dark.svg" download>SVG</a>
                   </div>
         </div>
     </div>
diff --git a/layouts/partials/design/spacing.html b/layouts/partials/design/spacing.html
index 7f62199..ba8282e 100644
--- a/layouts/partials/design/spacing.html
+++ b/layouts/partials/design/spacing.html
@@ -3,5 +3,5 @@
     <p>Briar uses <a class="underline" href="https://material.io/design/layout/#usage" target="_blank" rel="noopener">Material Design spacing guidelines</a> for both Web and Android platforms. Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing. Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such as iconography and typography, can align to a 4dp grid.</p>
 </div>
 <div class="p-1">
-    <img src="/images/grid.png" />
+    <img src="/styleguide/images/grid.png" />
 </div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 86c70b4..96791a1 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,17 +1,17 @@
 <head>
   <meta charset="utf-8">
   <title>{{ .Site.Title}}</title>
-  <link rel="shortcut icon" type="image/png" href='/images/favicon.png'/>
+  <link rel="shortcut icon" type="image/png" href='/styleguide/images/favicon.png'/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel = 'canonical' href = '{{ .Permalink }}'>
   {{- $options := (dict "targetPath" "main.css" "outputStyle" "expanded" "enableSourceMap" "true") -}}
   {{- $styles := resources.Get "/main.scss" | resources.ToCSS $options }}
   <link rel = 'stylesheet' href = '{{ $styles.Permalink }}' integrity = '{{ $styles.Data.Integrity }}'>
-  <link rel="stylesheet" href='/css/bootstrap.min.css'>
-  <link rel="stylesheet" href='/css/material-icons.css'>
-  <link rel="stylesheet" href='/css/all.min.css'>
-  <link rel="stylesheet" href='/fonts/inter.css'>
-  <link rel="stylesheet" href='/fonts/roboto.css'>
+  <link rel="stylesheet" href='/styleguide/css/bootstrap.min.css'>
+  <link rel="stylesheet" href='/styleguide/css/material-icons.css'>
+  <link rel="stylesheet" href='/styleguide/css/all.min.css'>
+  <link rel="stylesheet" href='/styleguide/fonts/inter.css'>
+  <link rel="stylesheet" href='/styleguide/fonts/roboto.css'>
   <noscript>
     <style type="text/css">
         .code-snippet {display:block;}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index fb0b02e..5a13af8 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light border-black sticky-top rp-navbar__top">
-  <a class="navbar-brand" href="/">
+  <a class="navbar-brand" href="/styleguide/">
     <img src="{{ .Site.Params.logo }}"  height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -8,20 +8,20 @@
     <div class="collapse navbar-collapse " id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto display-xs">
         <li class="nav-item">
-          <a class="nav-link" href="/getting-started"><i class="material-icons">navigation</i> Getting Started</a>
+          <a class="nav-link" href="/styleguide/getting-started"><i class="material-icons">navigation</i> Getting Started</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/brand"><i class="material-icons">star</i> Brand</a>
+          <a class="nav-link" href="/styleguide/brand"><i class="material-icons">star</i> Brand</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/design/"><i class="material-icons">create</i> Design</a>
+          <a class="nav-link" href="/styleguide/design/"><i class="material-icons">create</i> Design</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/components/"><i class="material-icons">layers</i> Components</a>
+          <a class="nav-link" href="/styleguide/components/"><i class="material-icons">layers</i> Components</a>
         </li>
         <!--
         <li class="nav-item">
-          <a class="nav-link" href="/writing/"><i class="material-icons">text_format</i> Writing</a>
+          <a class="nav-link" href="/styleguide/writing/"><i class="material-icons">text_format</i> Writing</a>
         </li>
         -->
         <li class="nav-item">
diff --git a/layouts/partials/navbar_side.html b/layouts/partials/navbar_side.html
index 685af2f..a9c71c6 100644
--- a/layouts/partials/navbar_side.html
+++ b/layouts/partials/navbar_side.html
@@ -1,8 +1,8 @@
 <div class="sidebar">
-<a href="/"><div class="navbar-wide-logo"></div></a>
+<a href="/styleguide/"><div class="navbar-wide-logo"></div></a>
     <ul class="col-sm-16 col-xs-12 p-0 list-group pt-0">
 
-          <a href="/getting-started/" class="sidebar__link__darkGray">
+          <a href="/styleguide/getting-started/" class="sidebar__link__darkGray">
               <li class="list-group-item rb-main-sidebar"><i class="material-icons">navigation</i> Getting Started</li>
               {{ range .Params.sidebar_start }}
                 {{ range . }}
@@ -13,7 +13,7 @@
               {{ end }}
           </a>
 
-          <a href="/brand/" class="sidebar__link__darkGray">
+          <a href="/styleguide/brand/" class="sidebar__link__darkGray">
               <li class="list-group-item rb-main-sidebar"><i class="material-icons">star</i> Brand</li>
               {{ range .Params.sidebar_brand }}
                 {{ range . }}
@@ -24,7 +24,7 @@
               {{ end }}
           </a>
 
-          <a href="/design/" class="sidebar__link__darkGray">
+          <a href="/styleguide/design/" class="sidebar__link__darkGray">
               <li class="list-group-item rb-main-sidebar"><i class="material-icons">create</i> Design</li>
               {{ range .Params.sidebar_design }}
                 {{ range . }}
@@ -35,7 +35,7 @@
               {{ end }}
           </a>
 
-          <a href="/components/" class="sidebar__link__darkGray">
+          <a href="/styleguide/components/" class="sidebar__link__darkGray">
               <li class="list-group-item rb-main-sidebar"><i class="material-icons">layers</i> Components</li>
               {{ range .Params.sidebar_components }}
                 {{ range . }}
@@ -47,7 +47,7 @@
           </a>
 
           <!--
-          <a href="/writing/" class="sidebar__link__darkGray">
+          <a href="/styleguide/writing/" class="sidebar__link__darkGray">
               <li class="list-group-item rb-main-sidebar"><i class="material-icons">text_format</i> Writing</li>
               {{ range .Params.sidebar_writing }}
                 {{ range . }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 1d92009..7e24f9e 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,6 +1,6 @@
-<script src='/js/modernizr.min.js'></script>
-<script src='/js/jquery-3.3.1.slim.min.js'></script>
-<script src='/js/popper.min.js'></script>
-<script src='/js/bootstrap.min.js'></script>
-<!-- <script src='/js/run_prettify.js'></script> /* -->
-<script src="/js/index.js"></script>
+<script src='/styleguide/js/modernizr.min.js'></script>
+<script src='/styleguide/js/jquery-3.3.1.slim.min.js'></script>
+<script src='/styleguide/js/popper.min.js'></script>
+<script src='/styleguide/js/bootstrap.min.js'></script>
+<!-- <script src='/styleguide/js/run_prettify.js'></script> /* -->
+<script src="/styleguide/js/index.js"></script>
-- 
GitLab