From 8fc24ac4f41dd1caae1f523e6c92d035d17401c8 Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 18 Feb 2025 12:59:21 +0000
Subject: [PATCH] Use Docsy-like styling for documentation

Adapt the existing styles for the docs section, to align more closely
with how Docsy does it.
---
 assets/scss/_documentation.scss     | 735 +++++++++++++++-------------
 assets/scss/_variables_project.scss |   7 +
 2 files changed, 401 insertions(+), 341 deletions(-)

diff --git a/assets/scss/_documentation.scss b/assets/scss/_documentation.scss
index ff816fd90b..46ddcce2b8 100644
--- a/assets/scss/_documentation.scss
+++ b/assets/scss/_documentation.scss
@@ -19,6 +19,342 @@
   border-spacing: 6px;
 }
 
+div.feature-state-notice {
+  background-color: $feature;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1em;
+
+  font-size: 1.2em;
+
+  > .feature-state-name::before {
+    content: 'ⓘ  ';
+    color: $primary;
+  }
+  > .feature-state-name {
+    display: inline-block;
+    font-size: 0.95em;
+    font-weight: bold;
+    color: #000;
+    background-color: $feature;
+  }
+
+  code {
+    color: #000;
+    font-size: 1em;
+    font-family: inherit; // don't treat as actual code
+    background-color: $feature;
+  }
+
+  margin-right: 2em;
+  max-width: 80%;
+}
+
+.includecode .highlight {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+
+// Customize color for warning callouts
+
+.alert.alert-warning {
+  border-color: #d9534f;
+  hr {
+    border-top-color: #d9534f;
+  }
+}
+
+// Bootstrap doesn't have a “caution” color. Add this here.
+
+.alert.alert-caution {
+  border-color: #f0ad4e;
+  hr {
+    border-top-color: #f0ad4e;
+  }
+}
+
+// Make note (aka info) callouts render the heading as if it
+// is bold running text.
+.alert.alert-info {
+  border-color: #428bca;
+
+  h4, h4.alert-heading {
+    color: #000;
+    display: block;
+    float: initial;
+    font-size: 1rem;
+    padding: 0;
+    padding-right: 0.5rem;
+    margin: 0;
+    line-height: 1.5; // match paragraph style
+  }
+}
+
+// Only danger headings need large text (per Docsy)
+// For other callouts, use the size of the running text
+.alert:not(.alert-danger) h4 {
+  font-size: 1em;
+}
+
+// All callout headings should be bold
+.alert {
+  border-style: solid;
+  border-width: 0 0 0 4px;
+  border-radius: 0 0 2rem 0;
+  h4 {
+    font-weight: bold;
+    font-style: initial;
+  }
+}
+
+.glossary-tooltip {
+  display: inline-block;
+  border-bottom: 1px dotted black;
+  color: $black;
+  background: transparent;
+  text-decoration: none !important;
+}
+
+/* code samples */
+.code-sample > .copy-code-icon {
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  justify-content: right;
+  padding: 0.2rem;
+}
+
+/* CSS for 'figure' full-screen display */
+
+/* Define styles for full-screen overlay */
+.figure-fullscreen-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.95); /* White background with some transparency */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: calc(5% + 20px);
+  box-sizing: border-box;
+}
+
+/* CSS class to scale the image when zoomed */
+.figure-zoomed {
+  transform: scale(1.2);
+}
+
+/* Define styles for full-screen image */
+.figure-fullscreen-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Maintain aspect ratio and fit within the container */
+}
+
+/* Define styles for close button */
+.figure-close-button {
+  position: absolute;
+  top: 1%;
+  right: 2%;
+  cursor: pointer;
+  font-size: calc(min(5vw + 10px, 4rem));
+  color: $primary;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* Sidebar menu */
+#td-sidebar-menu {
+  #m-docs span, small {
+    visibility: hidden;
+  }
+  #m-docs small {
+    visibility: collapse; // if supported
+  }
+}
+
+/* Styles for CVE table */
+table tr.cve-status-open, table tr.cve-status-unknown {
+  > td.cve-item-summary {
+    font-weight: bold;
+  }
+}
+
+/* Styles for general tables */
+table td.value-not-applicable {
+  text-align: center;
+}
+
+// <details> shortcode
+
+details > summary {
+  margin-bottom: 1em;
+  color: $primary;
+  background: transparent;
+}
+
+details:not([open]) > summary:after {
+  content: '…';
+  display: inline-block;
+}
+
+// glossary
+
+body.glossary {
+  main {
+
+    ul.glossary-terms > li {
+      list-style-type: none;
+      padding: 0.5em;
+      padding-bottom: calc(min(1em, 0.25em + 0.25vh ));
+      margin: 0;
+      margin-top: calc(min(1.5em, 0.2em + 1vh ));
+    }
+
+    ul.glossary-terms > li.hide {
+      display: none;
+    }
+
+    ul.glossary-terms > li:has(.term-anchor:target) {
+      border-left: 0.3em solid $primary;
+      background: rgba($secondary, 0.2);
+    }
+
+    #tag-container {
+      float: left;
+      max-width: calc(max(80%, 100em));
+      border-top: 1px solid $secondary;
+      border-bottom: 1px solid $secondary;
+      padding-top: 0.5em 0;
+      margin: 2em 0;
+
+      > p {
+        display: inline-block;
+        padding-top: 0.2em;
+      }
+
+      .hide {
+        display: none;
+      }
+
+      .tag-option {
+        border-radius: 0.33em;
+        padding: 0.75em;
+        margin: 1em;
+        margin-top: 0.2em;
+        float: left;
+        font-weight: bold;
+      }
+
+      .tag-description {
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0.2em;
+        padding-bottom: 0.8em;
+        text-align: center;
+      }
+      .canonical-tag {
+        color: white;
+        background-color: $secondary;
+      }
+
+      .canonical-tag a {
+        color: inherit;
+        background: transparent;
+        text-decoration: none !important;
+      }
+
+      .active-tag {
+        color: $white;
+        background-color: $primary;
+      }
+    }
+
+    .term-anchor:target + .term-name > span {
+      color: $primary;
+    }
+
+    .term-anchor:target {
+      visibility: initial;
+    }
+
+    .glossary-term-name {
+      font-weight: bold;
+      display: inline-block;
+      padding-left: 0.25em;
+      padding-right: 0.25em;
+    }
+
+    .glossary-aka {
+      display: inline-block;
+      padding-left: 0.25em;
+      padding-right: 0.25em;
+      padding-bottom: 0.25em;
+    }
+
+    #glossary-details-before {
+       margin-top: 3em;
+       font-style: italic;
+       clear: both;
+    }
+
+    .preview-text {
+      display: inline-block;
+      margin-bottom: 0.2em;
+    }
+
+    .preview-text + * {
+      margin-top: 0.2em;
+    }
+
+    .term-definition {
+       margin-left: calc(min(2em, 0.5em + 0.75vw));
+
+       .hide {
+          display: none;
+       }
+    }
+
+    .glossary-aka {
+      font-style: italic;
+    }
+
+    .preview-text p {
+      display: inline;
+    }
+
+    .permalink {
+      display: inline-block;
+      width: 0.9em;
+      height: 0.9em;
+      padding-left: 0.1em;
+
+      &.hide {
+        visibility: hidden;
+      }
+    }
+
+    .term-anchor {
+      display: block;
+      position: relative;
+      top: -4rem; // adjust scrolling to target
+      visibility: hidden;
+    }
+
+
+    .invisible {
+      visibility: hidden;
+    }
+
+  }
+}
+
+/* Table content */
+.tab-content table{
+  border-collapse: separate;
+  border-spacing: 6px;
+}
+
 .tab-pane {
   border-radius: 0.25rem;
   padding: 0 16px 16px;
@@ -30,159 +366,6 @@
   }
 }
 
-table tr.cve-status-open, table tr.cve-status-unknown {
-  > td.cve-item-summary {
-    font-weight: bold;
-  }
-}
-
-.launch-cards {
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 1em;
-  .launch-card {
-    display: flex;
-    padding: 0 30px 0 0;
-    .card-content{
-      width: fit-content;
-      display: flex;
-      flex-direction: column;
-      margin: 0;
-      row-gap: 1em;
-      h2 {
-        font-size: 1.75em;
-        padding: 0.5em 0;
-        margin: 0;
-        a {
-          display: none;
-        }
-      }
-
-      p {
-        margin: 0;
-      }
-
-      ul {
-        list-style: none;
-        height: fit-content;
-        line-height: 1.6;
-        padding: 0;
-        margin-block-end: auto;
-      }
-
-      br {
-        display: none;
-      }
-
-      button {
-        height: min-content;
-        width: auto;
-        padding: .5em 1em;
-        cursor: pointer;
-        box-sizing: border-box;
-      }
-    }
-  }
-
-  @media only screen and (max-width: 1000px) {
-    grid-template-columns: 1fr;
-    .launch-card {
-      width: 100%;
-    }
-  }
-}
-
-
-// blockquotes and callouts
-
-body {
-  .alert {
-    // Override Docsy styles
-    padding: 0.4rem 0.4rem 0.4rem 1rem;
-    border-top: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    border-right: 1px solid #eee;
-    border-radius: 0.25em;
-    border-left-width: 0.5em; // fallback in case calc() is missing
-    background: #fff;
-    color: #000;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-  // Set minimum width and radius for alert color
-  .alert {
-      border-left-width: calc(max(0.5em, 4px));
-      border-top-left-radius: calc(max(0.5em, 4px));
-      border-bottom-left-radius: calc(max(0.5em, 4px));
-      padding-top: 0.75rem;
-  }
-  .alert.alert-caution {
-    border-left-color: #f0ad4e;
-  }
-  .alert.alert-info {
-    border-left-color: #428bca;
-    h4, h4.alert-heading {
-      color: #000;
-      display: block;
-      float: initial;
-      font-size: 1rem;
-      padding: 0;
-      padding-right: 0.5rem;
-      margin: 0;
-      line-height: 1.5;
-      font-weight: bolder;
-    }
-  }
-  .alert.alert-caution {
-    border-left-color: #f0ad4e;
-    h4, h4.alert-heading {
-      font-size: 1em;
-      font-weight: bold;
-    }
-  }
-  .alert.alert-warning {
-    border-left-color: #d9534f;
-  }
-  .alert.third-party-content {
-    border-left-color: #444;
-  }
-
-  h1:first-of-type + .alert.callout {
-    margin-top: 1.5em;
-  }
-
-  div.feature-state-notice {
-    background-color: #daeaf9;
-    border-radius: 0.75rem;
-    padding: 1rem;
-    margin-bottom: 1em;
-
-    font-size: 1.2em;
-
-    > .feature-state-name::before {
-      content: 'ⓘ  ';
-      color: $primary;
-    }
-    > .feature-state-name {
-      display: inline-block;
-      font-size: 0.95em;
-      font-weight: bold;
-      color: #000;
-      background-color: #daeaf9;
-    }
-
-    code {
-      color: #000;
-      font-size: 1em;
-      background-color: #daeaf9;
-    }
-
-    margin-right: 2em;
-    max-width: 80%;
-  }
-}
-
 // Special color for third party content disclaimers
 .alert.third-party-content { border-left-color: #222 };
 
@@ -206,203 +389,76 @@ body {
   background: #f8f9cb;
 }
 
-.deprecation-warning, .pageinfo.deprecation-warning {
-    padding: clamp(10px, 2vmin, 20px);
-    margin: clamp(10px, 1vh, 20px) 0;
-    background-color: #faf5b6;
-    color: #000;
-}
+#mainContent .launch-content {
 
-.deprecation-warning.outdated-blog, .pageinfo.deprecation-warning.outdated-blog {
-    background-color: $primary;
-    color: $white;
-}
+  .launch-cards {
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 1em;
+    .launch-card {
+      display: flex;
+      padding: 0 30px 0 0;
+      .card-content{
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        row-gap: 1em;
+        h2 {
+          font-size: 1.75em;
+          padding: 0.5em 0;
+          margin: 0;
+          a {
+            display: none;
+          }
+        }
 
-body.td-home .deprecation-warning, body.td-blog .deprecation-warning, body.td-documentation .deprecation-warning {
-    border-radius: 3px;
-}
+        p {
+          margin: 0;
+        }
 
-.deprecation-warning p:only-child {
-  margin-bottom: 0;
-}
+        ul {
+          list-style: none;
+          height: fit-content;
+          line-height: 1.6;
+          padding: 0;
+          margin-block-end: auto;
+        }
 
-.td-documentation .td-content > .highlight {
-  max-width: initial;
-  width: 100%;
-}
-
-body.td-home #deprecation-warning {
-    max-width: 1000px;
-    margin-top: 2.5rem;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-// <details> shortcode
-
-details > summary {
-  margin-bottom: 1em;
-  color: $primary;
-  background: transparent;
-}
-
-details:not([open]) > summary:after {
-  content: '…';
-  display: inline-block;
-}
-
-// glossary
-
-body.glossary {
-  main {
-    ul.glossary-terms > li {
-      list-style-type: none;
-      padding: 0.5em;
-      padding-bottom: calc(min(0.5em, 0.25em + 0.15vh ));
-      margin: 0;
-      margin-top: calc(min(1.0em, 0.25em + 0.15vh ));
-    }
-    ul.glossary-terms > li.hide {
-      display: none;
-    }
-    ul.glossary-terms > li:has(.term-anchor:target) {
-      border-left: 0.3em solid $primary;
-      background: rgba(#999999, 0.2);
-    }
-    #tag-container {
-      float: left;
-      max-width: calc(max(80%, 100em));
-      border-top: 1px solid #999999;
-      border-bottom: 1px solid #999999;
-      padding-top: 0.5em 0;
-      margin: 2em 0;
-      > p {
-        display: inline-block;
-        padding-top: 0.2em;
-      }
-      .hide {
-        display: none;
-      }
-      .tag-option {
-        border-radius: 0.33em;
-        padding: 0.5em;
-        padding-left: 0.6em;
-        padding-right: 0.75em;
-        margin: 0.75em;
-        margin-top: 0.1em;
-        float: left;
-        font-weight: bold;
-        font-size: 0.925em;
-      }
-      .tag-option:not(.canonical-tag):hover {
-        outline: 1.5px solid $primary;
-      }
-      .tag-description {
-        margin-left: auto;
-        margin-right: auto;
-        padding: 0.2em;
-        padding-bottom: 0.8em;
-        text-align: center;
-      }
-      .canonical-tag {
-        color: white;
-        background-color: #999999;
-      }
-      .canonical-tag a {
-        color: inherit;
-        background: transparent;
-        text-decoration: none !important;
-      }
-      .active-tag {
-        color: $white;
-        background-color: $primary;
-      }
-      // darken on hover
-      .canonical-tag:hover {
-        background: darken(#999999, 15%)
-      }
-      .canonical-tag.active-tag:hover {
-        background: darken($primary, 10%);
-      }
-    }
-    .term-anchor:target + .term-name > span {
-      color: $primary;
-    }
-    .term-anchor:target {
-      visibility: initial;
-    }
-    .glossary-term-name {
-      font-weight: bold;
-      display: inline-block;
-      padding-left: 0.25em;
-      padding-right: 0.25em;
-    }
-    .glossary-aka {
-      display: inline-block;
-      padding-left: 0.25em;
-      padding-right: 0.25em;
-      padding-bottom: 0.25em;
-    }
-    #glossary-details-before {
-       margin-top: 3em;
-       font-style: italic;
-       clear: both;
-    }
-    .preview-text {
-      display: inline-block;
-      margin-bottom: 0.2em;
-    }
-    .preview-text + * {
-      margin-top: 0.2em;
-    }
-    .term-definition {
-       margin-left: calc(min(2em, 0.5em + 0.75vw));
-       .hide {
+        br {
           display: none;
-       }
+        }
+
+        button {
+          height: min-content;
+          width: auto;
+          padding: .5em 1em;
+          cursor: pointer;
+          box-sizing: border-box;
+        }
+      }
     }
-    .glossary-aka {
-      font-style: italic;
-    }
-    .preview-text p {
-      display: inline;
-    }
-    .permalink {
-      display: inline-block;
-      background-image: url(../images/link.png);
-      background-repeat: no-repeat;
-      background-size: contain;
-      width: 1em;
-      height: 1em;
-      padding-left: 0.1em;
-    }
-    .term-name:hover {
-      color: $primary;
-    }
-    .term-name:not(:hover) > .permalink {
-      visibility: hidden;
-    }
-    .term-anchor {
-      display: block;
-      position: relative;
-      top: -4rem; // adjust scrolling to target
-      visibility: hidden;
-    }
-    .invisible {
-      visibility: hidden;
+
+    @media only screen and (max-width: 1000px) {
+      grid-template-columns: 1fr;
+      .launch-card {
+        width: 100%;
+      }
     }
   }
 }
 
-/* SCSS Related to the list of metris in Kubernetes */
+
+/* SCSS related to the list of metrics in Kubernetes */
 main {
 
-  div.metric:nth-of-type(odd) { // Look & Feel , Aesthetics
+  // Look & Feel , Aesthetics
+  div.metric:nth-of-type(odd) {
     background-color: $light-grey;
   }
 
   div.metrics {
-
     .metric {
       div:empty{
         display: none;
@@ -415,12 +471,13 @@ main {
       padding:.75em .75em .75em .75em;
 
       .metric_name{
+        font-family: $font-family-monospace;
         font-size: large;
         font-weight: bold;
         word-break: break-word;
       }
 
-      label{
+      label {
         font-weight: bold;
         margin-right: .5em;
       }
@@ -435,20 +492,16 @@ main {
         li.metric_labels_varying{
           span{
                 display: inline-block;
-                background-color: rgb(240, 239, 239);
+                background-color: $metric-labels-varying;
                 padding: 0 0.5em;
                 margin-right: .35em;
                 font-family: monospace;
-                border: 1px solid rgb(230 , 230 , 230);
+                border: 1px solid $metric-labels-varying-border;
                 border-radius: 5%;
                 margin-bottom: .35em;
           }
         }
-
       }
-
     }
-
-
   }
 }
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index d1d5590be4..7a26f776bd 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -9,6 +9,13 @@ $medium-grey: #4c4c4c;
 $dark-grey: #303030;
 $white: #ffffff;
 
+// feature gate colors
+$feature: #daeaf9;
+$feature-inset: #eeeeee;
+
+$metric-labels-varying: #efefef;
+$metric-labels-varying-border: #e2e2e2;
+
 // tooltip
 $tooltip-bg: #555;
 $tooltip-arrow-color: $tooltip-bg !default;