feat: add UI changes to the site (#380)

* feat: add new ui changes to all pages in docs.jenkins.io site

* more changes

* fixing dark mode

* fix

* fix2

* Update ui/src/partials/head-styles.hbs

Co-authored-by: Kris Stern <[email protected]>

---------

Co-authored-by: Kris Stern <[email protected]>

Author: biru-codeastromer

playbook/package-lock.json

@@ -20,19 +20,23 @@ html {
 body {
   background: var(--body-background);
   color: var(--body-font-color);
-  font-family: var(--body-font-family), serif;
+  font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
   tab-size: 4;
-  word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
+  word-wrap: anywhere;
 }
 
 a {
-  text-decoration: none;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  color: var(--link-font-color);
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  color: var(--link_hover-font-color);
 }
 
 a:active {
@@ -42,7 +46,7 @@ a:active {
 code,
 kbd,
 pre {
-  font-family: var(--monospace-font-family), serif;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 b,
@@ -99,7 +103,7 @@ summary {
 
 table {
   border-collapse: collapse;
-  word-wrap: normal; /* table widths aren't computed as expected when word-wrap is enabled */
+  word-wrap: normal;
 }
 
 object[type="image/svg+xml"]:not([width]) {

ui/src/css/base.css

@@ -6,6 +6,7 @@
   margin: var(--doc-margin);
   max-width: var(--doc-max-width);
   padding: 1rem;
+  font-family: var(--body-font-family);
 }
 
 @media screen and (min-width: 1024px) {
@@ -29,11 +30,14 @@
   hyphens: none;
   line-height: 1.3;
   margin: 1rem 0 0;
+  font-family: var(--body-font-family);
 }
 
 .doc > h1.page:first-child {
-  font-size: calc(36 / var(--rem-base) * 1rem);
-  margin: 1.5rem 0;
+  font-family: var(--body-font-family);
+  font-weight: 800;
+  font-size: 2rem;
+  margin: 1.5rem 0 0.5rem;
 }
 
 @media screen and (min-width: 769px) {
@@ -63,15 +67,36 @@
 }
 
 .doc h2:not(.discrete) {
+  font-family: var(--body-font-family);
+  font-weight: 800;
+  font-size: 1.75rem;
   border-bottom: 1px solid var(--section-divider-color);
-  margin-left: -1rem;
-  margin-right: -1rem;
+  margin: 1.5rem -1rem 0.5rem;
   padding: 0.4rem 1rem 0.1rem;
 }
 
-.doc h3:not(.discrete),
+.doc h3:not(.discrete) {
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin: 1.25rem 0 0.5rem;
+}
+
 .doc h4:not(.discrete) {
-  font-weight: var(--alt-heading-font-weight);
+  font-size: 1.25rem;
+  font-weight: 800;
+  margin: 1rem 0 0.5rem;
+}
+
+.doc h5:not(.discrete) {
+  font-size: 1.1rem;
+  font-weight: 800;
+  margin: 0.75rem 0 0.5rem;
+}
+
+.doc h6:not(.discrete) {
+  font-size: 1rem;
+  font-weight: 800;
+  margin: 0.75rem 0 0.5rem;
 }
 
 .doc h1 .anchor,
@@ -108,17 +133,27 @@
   visibility: visible;
 }
 
-.doc p,
+.doc p {
+  font-size: 1rem;
+  line-height: 1.65;
+  margin: 0 0 1.5rem 0;
+  font-weight: 500;
+}
+
 .doc dl {
   margin: 0;
 }
 
 .doc a {
   color: var(--link-font-color);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
 }
 
 .doc a:hover {
   color: var(--link_hover-font-color);
+  text-decoration-thickness: 2px;
 }
 
 .doc a.bare {
@@ -137,11 +172,13 @@
 .doc p code,
 .doc thead code,
 .doc .colist > table code {
-  color: var(--code-font-color);
-  background: var(--code-background);
+  color: var(--jenkins-error-red);
+  background: transparent;
   border-radius: 0.25em;
   font-size: 0.95em;
   padding: 0.125em 0.25em;
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .doc code,
@@ -281,7 +318,6 @@
   border-top-width: 0;
 }
 
-/* NOTE let the grid win in case of frame-none */
 .doc table.frame-sides > :last-child > :last-child > * {
   border-bottom-width: 0;
 }
@@ -332,18 +368,7 @@
 }
 
 .doc .admonitionblock {
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   margin: 1.4rem 0 0;
 }
 
@@ -894,7 +919,6 @@
   margin-top: 0;
 }
 
-/* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
 .doc .tableblock pre,
 .doc .listingblock.wrap pre {
   white-space: pre-wrap;
@@ -908,9 +932,7 @@
   overflow-x: auto;
   padding: 0.875em;
   background-color: #e7f3ff;
-  font-family:
-    Source Code Pro,
-    monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   box-shadow:
     rgba(255, 255, 255, 0.02) 0 1px 3px 0,
     rgba(27, 31, 35, 0.15) 0 0 0 1px;
@@ -1095,7 +1117,6 @@
 
 .doc b.button {
   white-space: nowrap;
-  /* effectively ignores hyphens setting */
 }
 
 .doc b.button::before {
@@ -1120,7 +1141,6 @@
   padding: 0.25em 0.5em;
   vertical-align: text-bottom;
   white-space: nowrap;
-  /* effectively ignores hyphens setting */
 }
 
 .doc kbd,