diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md
index 81bd023fce..c3ea8e38a5 100644
--- a/exampleSite/content/basics/configuration/_index.en.md
+++ b/exampleSite/content/basics/configuration/_index.en.md
@@ -215,4 +215,4 @@ landingPageName = "<i class='fas fa-home'></i> Home"
 
 The home button is going to look like this:
 
-![Default Home Button](home_button_defaults.png?classes=shadow&width=300px)
+![Default Home Button](home_button_defaults.png?classes=shadow&width=18.75rem)
diff --git a/exampleSite/content/cont/i18n/_index.en.md b/exampleSite/content/cont/i18n/_index.en.md
index 2a8871ee7e..13831d4f9c 100644
--- a/exampleSite/content/cont/i18n/_index.en.md
+++ b/exampleSite/content/cont/i18n/_index.en.md
@@ -10,7 +10,7 @@ The Relearn theme is fully compatible with Hugo multilingual mode.
 - Automatic menu generation from multilingual content
 - In-browser language switching
 
-![I18n menu](i18n-menu.gif?classes=shadow&width=300px)
+![I18n menu](i18n-menu.gif?classes=shadow&width=18.75rem)
 
 ## Basic configuration
 
diff --git a/exampleSite/content/cont/pages/_index.en.md b/exampleSite/content/cont/pages/_index.en.md
index d899faa8a3..8e3682fe70 100644
--- a/exampleSite/content/cont/pages/_index.en.md
+++ b/exampleSite/content/cont/pages/_index.en.md
@@ -96,7 +96,7 @@ menuPre = "<i class='fab fa-github'></i> "
 +++
 ```
 
-![Title with icon](frontmatter-icon.png?classes=shadow&width=300px)
+![Title with icon](frontmatter-icon.png?classes=shadow&width=18.75rem)
 
 ### Ordering sibling menu/page entries
 
diff --git a/exampleSite/layouts/partials/menu-footer.html b/exampleSite/layouts/partials/menu-footer.html
index f8f4fcc105..40d77fe74b 100644
--- a/exampleSite/layouts/partials/menu-footer.html
+++ b/exampleSite/layouts/partials/menu-footer.html
@@ -1,14 +1,14 @@
 
           <style>
             #footer {
-              font-size: 13px;
-              height: 100px;
+              font-size: .8125rem;
+              height: 6.25rem;
               margin-left: auto;
               margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
-              min-width: 230px;
-              max-width: 300px;
+              min-width: 14.375rem;
+              max-width: 18.75rem;
             }
             #footer p {
               margin: 0;
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index 5a7c7b8260..1a71bcf1be 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -11,12 +11,12 @@
               color: #282828;
               color: var(--MENU-SECTIONS-BG-color);
               font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
-              font-size: 30px;
+              font-size: 1.875rem;
               font-weight: 300;
-              margin-top: -13px;
+              margin-top: -.8125rem;
               max-width: 60%;
               text-transform: uppercase;
-              width: 226px;
+              width: 14.125rem;
               white-space: nowrap;
             }
             a#logo:hover {
@@ -24,33 +24,33 @@
               color: var(--MENU-SECTIONS-BG-color);
             }
             #logo svg {
-              margin-bottom: -20px;
-              margin-inline-start: -23.5px;
+              margin-bottom: -1.25rem;
+              margin-inline-start: -1.47rem;
               width: 40.5%;
             }
-            @media only all and (max-width: 59.938em) {
+            @media only all and (max-width: 60rem) {
               a#logo {
-                font-size: 25px;
-                margin-top: -3px;
+                font-size: 1.5625rem;
+                margin-top: -.1875rem;
               }
               #logo svg {
-                margin-bottom: -12px;
-                margin-inline-start: -23px;
+                margin-bottom: -.75rem;
+                margin-inline-start: -1.47rem;
               }
             }
             @media all and (-ms-high-contrast:none) {
               {{ "/* IE11s understanding of positioning is weird at best */" | safeCSS }}
               a#logo {
-                margin-top: -58px;
+                margin-top: -3.625rem;
               }
               #logo svg {
-                margin-bottom: -62px;
-                margin-left: -23.5px;
+                margin-bottom: -3.875rem;
+                margin-left: -1.47rem;
               }
             }
-            @media only all and (-ms-high-contrast:none) and (max-width: 59.938em) {
+            @media only all and (-ms-high-contrast:none) and (max-width: 60rem) {
               #logo svg {
-                margin-left: -23px;
+                margin-left: -1.47rem;
               }
             }
           </style>
diff --git a/static/css/ie.css b/static/css/ie.css
index eb2f32e782..8bd2a47e05 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -44,7 +44,7 @@
 		padding-left: 1rem;
 	}
 	#body {
-		margin-left: 300px;
+		margin-left: 18.75rem;
 	}
 	h2, h3, h4, h5, h6 {
 		padding-right: 2rem;
@@ -96,19 +96,19 @@
 	.progress {
 		left: 1rem;
 	}
-	@media screen and (max-width: 47.938em) {
+	@media screen and (max-width: 48rem) {
 		.progress {
 			left: 4.25rem;
 		}
 	}
-	@media screen and (max-width: 59.938em) {
+	@media screen and (max-width: 60rem) {
 		#body {
-			margin-left: 230px;
+			margin-left: 14.375rem;
 		}
 	}
-	@media screen and (max-width: 47.938em) {
+	@media screen and (max-width: 48rem) {
 		.mobile-support #sidebar {
-			left: -230px;
+			left: -14.375rem;
 		}
 		.mobile-support #body {
 			margin-left: 0;
@@ -117,7 +117,7 @@
 			left: 0;
 		}
 		.mobile-support.sidebar-flyout #body {
-			margin-left: 230px;
+			margin-left: 14.375rem;
 		}
 	}
 	.copy-to-clipboard-button {
diff --git a/static/css/nucleus.css b/static/css/nucleus.css
index 67b8e65d49..a4f49f0957 100644
--- a/static/css/nucleus.css
+++ b/static/css/nucleus.css
@@ -90,7 +90,7 @@ svg:not(:root) {
   overflow: hidden; }
 
 figure {
-  margin: 1em 40px; }
+  margin: 1rem 2.5rem; }
 
 hr {
   height: 0; }
diff --git a/static/css/theme.css b/static/css/theme.css
index a285f1f788..39208a0b55 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -55,10 +55,10 @@ dd {
     inset-inline-start: 0;
     line-height: 1.574;
     min-height: 100%;
-    min-width: 300px;
-    max-width: 300px;
+    min-width: 18.75rem;
+    max-width: 18.75rem;
     position: fixed;
-    width: 300px;
+    width: 18.75rem;
 }
 
 #header-wrapper {
@@ -251,7 +251,7 @@ dd {
 #sidebar ul li .read-icon {
     display: none;
     float: right;
-    font-size: 13px;
+    font-size: .8125rem;
     margin: 4px 0 0 0;
     min-width: 16px;
     text-align: start;
@@ -292,13 +292,13 @@ html[dir="rtl"] #sidebar ul li .read-icon {
     flex-grow: 1;
     flex-shrink: 0;
     height: 100%;
-    margin-inline-start: 300px;
+    margin-inline-start: 18.75rem;
     min-height: 100%;
-    min-width: calc( 100% - 300px);
-    max-width: calc( 100% - 300px);
+    min-width: calc( 100% - 18.75rem);
+    max-width: calc( 100% - 18.75rem);
     overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
     position: relative; /* PS */
-    width: calc( 100% - 300px);
+    width: calc( 100% - 18.75rem);
     z-index: 70;
 }
 
@@ -325,7 +325,7 @@ html[dir="rtl"] #sidebar ul li .read-icon {
 
 #body img.shadow,
 #body .video-container.shadow {
-    box-shadow: 0 10px 30px rgba( 200, 200, 200, .666 );
+    box-shadow: 0 .625rem 1.875rem rgba( 200, 200, 200, .666 );
 }
 
 #body img.inline {
@@ -342,14 +342,14 @@ html[dir="rtl"] #sidebar ul li .read-icon {
     padding: 0 3.25rem 4rem 3.25rem;
     position: relative; /* PS */
 }
-@media screen and (max-width: 59.938em) {
+@media screen and (max-width: 60rem) {
     #body-inner {
-        padding: 0 2rem 15px 2rem;
+        padding: 0 2rem 1rem 2rem;
     }
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     #body-inner {
-        padding: 0 1.25rem 5px 1.25rem;
+        padding: 0 1.25rem .375rem 1.25rem;
     }
 }
 
@@ -363,33 +363,38 @@ html[dir="rtl"] #sidebar ul li .read-icon {
     margin-top: -1rem;
 }
 
+#body .flex-block-wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+}
+body:not(.print) #body .narrow .flex-block-wrapper {
+    max-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+}
+
 /* we limit width if we have large screens */
-@media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
+@media screen and ( min-width: 81.25rem ){ /* #sidebar/width + ./max-width */
     #body .flex-block-wrapper {
-        margin-left: auto;
-        margin-right: auto;
-        min-width: calc( 1300px - 300px - 2 * 3.25rem );
-        width: calc( 1300px - 300px - 2 * 3.25rem );
-        max-width: calc( 1300px - 300px - 2 * 3.25rem );
+        min-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+        width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
     }
     body:not(.print) #body .narrow .flex-block-wrapper {
-        min-width: calc( 1300px - 300px - 2 * 9.75rem );
-        width: calc( 1300px - 300px - 2 * 9.75rem );
-        max-width: calc( 1300px - 300px - 2 * 9.75rem );
+        min-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+        width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
     }
 }
 
 body:not(.print) #body-inner.narrow {
     padding: 2rem 9.75rem;
 }
-@media screen and (max-width: 59.938em) {
+@media screen and (max-width: 60rem) {
     body:not(.print) #body-inner.narrow {
-        padding: 15px 6.5rem;
+        padding: 1rem 6.5rem;
     }
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     body:not(.print) #body-inner.narrow {
-        padding: 5px 3.25rem;
+        padding: .375rem 3.25rem;
     }
 }
 
@@ -425,12 +430,12 @@ body:not(.print) #body-inner.narrow h1 {
     border-bottom: 4px solid rgba( 134, 134, 134, .125 );
     font-size: 3.5rem;
 }
-@media only screen and (min-width: 48em) and (max-width: 59.938em) {
+@media only screen and (min-width: 48em) and (max-width: 60rem) {
     body:not(.print) #body-inner.narrow h1 {
         font-size: 2.8rem;
     }
 }
-@media only screen and (max-width: 47.938em) {
+@media only screen and (max-width: 48rem) {
     body:not(.print) #body-inner.narrow h1 {
         font-size: 2.5rem;
     }
@@ -896,7 +901,7 @@ span.nav i{
 html[dir="rtl"] #body #breadcrumbs {
     float: right;
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     #body #breadcrumbs {
         text-overflow: unset;
     }
@@ -909,7 +914,7 @@ html[dir="rtl"] #body #breadcrumbs {
     inset-inline-start: 1rem;
     top: 1rem;
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     .mobile-support #sidebar-toggle-span {
         display: inline;
     }
@@ -922,7 +927,7 @@ html[dir="rtl"] #body #breadcrumbs {
     display: inline;
     padding: 0 .75rem;
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     #body #breadcrumbs .links {
         /* we just hide the breadcrumbs instead of display: none;
         this makes sure that the breadcrumbs are still usable for
@@ -949,23 +954,23 @@ html[dir="rtl"] #body #breadcrumbs {
     text-decoration: none;
 }
 
-@media screen and (max-width: 59.938em) {
+@media screen and (max-width: 60rem) {
     #sidebar {
-        min-width: 230px;
-        max-width: 230px;
-        width: 230px;
+        min-width: 14.375rem;
+        max-width: 14.375rem;
+        width: 14.375rem;
     }
     #body {
-        margin-inline-start: 230px;
-        min-width: calc( 100% - 230px);
-        max-width: calc( 100% - 230px);
-        width: calc( 100% - 230px);
+        margin-inline-start: 14.375rem;
+        min-width: calc( 100% - 14.375rem);
+        max-width: calc( 100% - 14.375rem);
+        width: calc( 100% - 14.375rem);
     }
 }
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     /* we don't support sidebar flyout in mobile */
     .mobile-support #sidebar {
-        inset-inline-start: -230px;
+        inset-inline-start: -14.375rem;
     }
     .mobile-support #navshow{
         display: inline;
@@ -986,7 +991,7 @@ html[dir="rtl"] #body #breadcrumbs {
         z-index: 90;
     }
     .mobile-support.sidebar-flyout #body {
-        margin-inline-start: 230px;
+        margin-inline-start: 14.375rem;
         overflow: hidden;
     }
     .mobile-support.sidebar-flyout #sidebar-overlay{
@@ -1262,7 +1267,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 .progress ul {
     list-style: none;
     margin: 0;
-    padding: 0 15px;
+    padding: 0 1rem;
 }
 
 #TableOfContents {
@@ -1270,7 +1275,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     font-size: .8125rem !important;
     max-height: 90vh;
     overflow: hidden;
-    padding: 15px 5px !important;
+    padding: 1rem .375rem !important;
     position: relative; /* PS */
 }
 
@@ -1379,7 +1384,7 @@ rapi-doc {
     margin-left: calc( -8px - 24px );
     width: calc( 100% + 8px + 24px + 8px );
 }
-@media (max-width: 767px) {
+@media (max-width: 48rem) {
     rapi-doc {
         margin-left: calc( -12px );
         width: calc( 100% + 12px + 4px );
@@ -1486,7 +1491,7 @@ html[dir="rtl"] .select-container span {
     width: 100%;
 }
 
-@media screen and (max-width: 47.938em) {
+@media screen and (max-width: 48rem) {
     #breadcrumbs .links {
         display: none;
     }