diff --git a/_javascripts/page-loader.js b/_javascripts/page-loader.js
index bf98ad0059..f30cad67fc 100644
--- a/_javascripts/page-loader.js
+++ b/_javascripts/page-loader.js
@@ -1,3 +1,20 @@
+let newLink = "";
+let newVersion = "";
+let currentVersion = "";
+let fileRequested = "";
+
+const urlMappings = {
+ "openshift-acs": "https://docs.openshift.com/acs/",
+ "openshift-builds": "https://docs.openshift.com/builds/",
+ "openshift-enterprise": "https://docs.openshift.com/container-platform/",
+ "openshift-gitops": "https://docs.openshift.com/gitops/",
+ "openshift-lightspeed": "https://docs.openshift.com/lightspeed/",
+ "openshift-origin": "https://docs.okd.io/",
+ "openshift-pipelines": "https://docs.openshift.com/pipelines/",
+ "openshift-serverless": "https://docs.openshift.com/serverless/",
+ "openshift-telco": "https://docs.openshift.com/container-platform-telco/",
+};
+
function versionSelector(list) {
// the version we want
diff --git a/_stylesheets/docs.css b/_stylesheets/docs.css
index b964398e59..3e4cd1f36f 100644
--- a/_stylesheets/docs.css
+++ b/_stylesheets/docs.css
@@ -38,6 +38,21 @@ div.gsc-option-menu-container > div.gsc-selected-option-container {
margin: 0 10px;
}
+/* target safari only hack: https://stackoverflow.com/a/25975282/6758654 */
+/* Addresses https://github.com/openshift/openshift-docs/issues/40909 */
+@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
+ #hc-search.wide {
+ z-index: 50;
+ margin-top: 28px;
+ margin-left: -15px;
+ }
+
+ .sidebar.wide {
+ padding-top: 30px;
+ }
+}}
+/* end safari only */
+
/* ------------------------------------------------------------
Image: "Spin" https://www.flickr.com/photos/eflon/3655695161/
Author: eflon https://www.flickr.com/photos/eflon/
@@ -293,7 +308,192 @@ h6 > a.anchor:hover {
@media (min-width: 768px) {
.main {
- padding-left: 30px;
+ margin-top: 130px;
+ border-left: 0px solid #e7e7e7;
+ margin-left: 315px;
+ width: 800px;
+ }
+
+ .sidebar {
+ font-weight: 300;
+ overflow-wrap: break-word;
+ position: fixed;
+ overflow-y: scroll;
+ z-index: 2;
+ width: 300px;
+ background-color: #fff;
+ margin-left: 5px;
+ display: flex;
+ flex-flow: column;
+ top: 190px;
+ bottom: 10px;
+ display: block;
+ -webkit-animation: fadein 0.35s ease-in; /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.35s ease-in; /* Firefox < 16 */
+ -ms-animation: fadein 0.35s ease-in; /* Internet Explorer */
+ -o-animation: fadein 0.35s ease-in; /* Opera < 12.1 */
+ animation: fadein 0.35s ease-in;
+ }
+
+ #hc-search {
+ position: fixed;
+ top: 160px;
+ width: 358px;
+ }
+
+ #hc-search-btn {
+ border: 1px solid lightgrey;
+ font-size: 12px;
+ height: 25px;
+ width: 31px;
+ }
+
+ .breadcrumb {
+ margin: 0;
+ padding: 18px 0 10px;
+ font-size: 0.92em;
+ min-height: 65px;
+ position: fixed;
+ z-index: 2;
+ background-color: #fff;
+ width: 1400px;
+ margin-top: 60px;
+ margin-left: 5px;
+ }
+
+ .container {
+ width: 1440px;
+ position: relative;
+ }
+
+ nav#main {
+ height: 90px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ width: 100%;
+ }
+
+.page-header h1 {
+ font-size: 30px;
+ font-weight: 400;
+ letter-spacing: inherit;
+ color: inherit;
+ margin: 10px 0 0 0;
+ padding: 2px 0 15px 0;
+}
+
+ #hc-modal-content {
+ height: 80vh;
+ margin: auto;
+ width: 80%;
+ z-index: 4;
+ background-color: white;
+ }
+
+ footer#rh {
+ background-color: #000;
+ padding: 0px 0;
+ z-index: 5;
+ }
+
+ .close-btn-sm {
+ display: none;
+ }
+
+ /*side toc styling here */
+
+ #toc:before {
+ font-family: "RedHatText",Overpass,"Open Sans",Helvetica,Arial,sans-serif;
+ content: "TABLE OF CONTENTS";
+ color: #545454;
+ font-size: 0.82em;
+ text-decoration: none;
+ text-align: left;
+ padding-bottom: 0.6em;
+ padding-top: 0.6em;
+ padding-left: 0.8em;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ }
+
+ #toc {
+ user-select: none;
+ float: right;
+ padding-top: 0.1em !important;
+ font-size: 0.8em;
+ overflow-wrap: break-word;
+ width: 300px;
+ position: fixed;
+ display: flex;
+ flex-flow: column;
+ top: 165px;
+ bottom: 1px;
+ margin-left: 780px;
+ height: auto;
+ max-height: 800px;
+ overflow-y: auto;
+ z-index: 2;
+ vertical-align: top;
+ border-left: solid;
+ border-width: 1px;
+ border-color: #E7E7E7;
+ -webkit-animation: fadein 0.35s ease-in;
+ -moz-animation: fadein 0.35s ease-in;
+ -ms-animation: fadein 0.35s ease-in;
+ -o-animation: fadein 0.35s ease-in;
+ animation: fadein 0.35s ease-in;
+ }
+
+ #toc>ul {
+ margin-left: -2em !important;
+ list-style: outside none none !important;
+ height: inherit;
+ }
+
+ #toc ul.sectlevel0>li>a {
+ list-style: outside none none !important;
+ }
+
+ #toc ul.sectlevel2 {
+ margin-left: -20px;
+ }
+
+ #toc ul.sectlevel0 ul.sectlevel1 {
+ margin-top: 0.2em;
+ list-style: outside none none !important;
+ }
+
+ #toc ul {
+ font-family: "Open Sans", "DejaVu Sans", "Sans", sans-serif;
+ list-style-type: none;
+ margin-bottom: 0.2em !important;
+ }
+
+ #toc li {
+ margin-bottom: 0.4em !important;
+ }
+
+ #toc a:link {
+ text-decoration: none;
+ font-size: inherit;
+ }
+
+ #toc a:hover {
+ text-decoration: underline;
+ }
+
+ #toc a:active {
+ font-weight: bold;
+ }
+
+ .toc-active {
+ font-weight: bold;
+ }
+
+ #toctitle {
+ color: #7a2518;
}
}
diff --git a/_templates/_page_openshift.html.erb b/_templates/_page_openshift.html.erb
index 98f4d8ce7c..c90d218d9c 100644
--- a/_templates/_page_openshift.html.erb
+++ b/_templates/_page_openshift.html.erb
@@ -12,13 +12,13 @@
<%= (distro_key == "openshift-webscale") ? '' : '' %>
<%= [topic_title, subgroup_title].compact.join(' - ') %> | <%= group_title %> | <%= distro %> <%= version %>
-
-
+
+
-
-
+
+
@@ -190,13 +190,13 @@
-
-
-
-
+
+
+
+
-
-
+
+