Move inline styles to a separate CSS files

Most inline shortcode styles were left alone for now.

Author: danielledeleo

assets/css/inline-overrides.css

@@ -0,0 +1,44 @@
+/*
+ * These styles were previously defined inline in the theme as hacks. They
+ * live here so we know where they came from.
+ *
+ * Where necessary, new classes were defined in their place so they don't 
+ * interfere with the new theme CSS. (e.g. .override-sidebar-collapse)
+ **/
+
+.override-table {
+    width: 100%;
+    overflow-x: scroll;
+    display: block;
+}
+
+.override-sidebar-collapse {
+    max-width: calc(100% + 30px) !important;
+    flex-wrap: nowrap;
+}
+
+#api-component {
+    max-width: 100%;
+}
+
+#consent_blackbar {
+    position: fixed;
+    top: 0px;
+    width: 100%;
+}
+
+#navbar-sites-button {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+#navbarNavScroll {
+    position: relative;
+    left: -0px;
+    flex: 1;
+}
+
+.sidenav {
+    width: 25%;
+}

layouts/_default/baseof.html

@@ -66,6 +66,6 @@
   </footer>
 
 {{ partial "scripts.html" . }} 
-<div id="consent_blackbar" style="position:fixed;top:0px;width:100%"></div>
+<div id="consent_blackbar"></div>
 </body>
 </html>

layouts/_default/docs.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
-<div class="row" style="max-width: calc(100% + 30px) !important; flex-wrap: nowrap;">
-  <nav class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top" style="width: 25%;">
+<div class="row override-sidebar-collapse">
+  <nav class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
     {{ partial "sidebar.html" . }}
   </nav>
 
@@ -26,7 +26,7 @@ <h1>{{ .Title }}</h1>
   </main>
   {{ if and (gt .WordCount 200 ) (.Params.toc) }}
     {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top" style="width: 25%;">
+      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
       {{ partial "toc.html" . }}
       </div>
     {{ end }}

layouts/partials/api.html

@@ -1,6 +1,6 @@
 <!--Use wide page layout for the API reference pages-->
   <div class="nginx-docs-api-container">     
-    <div id="api-component" class="content" style="max-width: 100%;">
+    <div id="api-component" class="content">
       {{ .Content}}
     </div>
   </div>

layouts/partials/header.html

@@ -14,7 +14,7 @@
       </div>
     {{ end }}
     {{ if ( in .Site.Params.buildtype "package" ) }}
-    <div class="navbar-nav-scroll" id="navbarNavScroll" style="position: relative;left: -0px;flex: 1;">
+    <div class="navbar-nav-scroll" id="navbarNavScroll">
       <ul class="navbar-nav flex-row">
         <li class="nav-item dropdown active">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -33,7 +33,7 @@
     }}
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button" style="display: flex; gap: 8px; align-items: center;">
+          <button id="navbar-sites-button" class="button navbar-button">
               F5 Sites
               <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
           </button>

layouts/partials/styles.html

@@ -5,6 +5,7 @@
 {{ $css5 := resources.Get "css/highlight.css" }}
 {{ $css6 := resources.Get "css/coveo.css" }}
 {{ $css7 := resources.Get "css/v2/style.css" }}
+{{ $css8 := resources.Get "css/inline-overrides.css" }}
 
 <!-- load v2 theme assets -->
 <link href="{{ $css7.RelPermalink }}" integrity="{{ $css7.Data.Integrity }}" rel="stylesheet" type="text/css" id="css7"
@@ -51,6 +52,9 @@
 {{ $cssF5Hugo := $css4 | minify | fingerprint "sha512"}}
 <link href="{{ $cssF5Hugo.RelPermalink }}" rel="stylesheet" type="text/css" id="css4">
 
+{{ $cssOverrides := $css8 | minify | fingerprint "sha512"}}
+<link href="{{ $cssOverrides.RelPermalink }}" rel="stylesheet" type="text/css" id="css8">
+
 {{ if fileExists "assets/css/custom.css" }}
 {{ $customCSS := resources.Get "css/custom.css" | minify | fingerprint "sha512" }}
 <link href="{{ $customCSS.RelPermalink }}" rel="stylesheet" type="text/css">

layouts/shortcodes/table.html

@@ -12,6 +12,6 @@
       text-align: center;
     }
 </style>
-<div style="width:100%;overflow-x:scroll;display:block;">
+<div class="override-table">
 {{.Inner}}
 </div>