Add custom CSS to project website

Author: rich-iannone

docs/_quarto.yml

@@ -4,6 +4,9 @@ project:
 format:
   html:
     theme: flatly
+    css:
+      - styles.css
+      - reference/_styles-quartodoc.css
     toc: true
     grid:
       sidebar-width: 300px

docs/styles.css

@@ -0,0 +1,121 @@
+.table a {
+    text-underline-offset: 4px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    color: inherit;
+    font-weight: bold;
+    font-size: 0.875em;
+    word-break: initial;
+    text-decoration-thickness: 2px;
+}
+
+body {
+    background-color: #FAFAFA;
+}
+
+p a {
+    color: black;
+    text-underline-offset: 4px;
+}
+
+.table td {
+    padding-left: 0px;
+}
+
+.sidebar-item-container {
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 0.875em;
+    color: rgb(18, 18, 18);
+}
+
+p,h1,h2,h3,#toc-title,#toc-function-reference,.nav-link,.table {
+    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+[id^=validation-steps] td a:after {
+    content: "()"
+}
+
+[id^=column-selection] td a:after {
+    content: "()"
+}
+
+[id^=interrogation-and-reporting] td a:after {
+    content: "()"
+}
+
+#toc-title {
+    font-size: 20px;
+}
+
+#quarto-margin-sidebar nav ul {
+    font-size: 16px;
+    padding-top: 5px;
+}
+
+#quarto-margin-sidebar nav ul li  {
+    padding-top: 3px;
+}
+
+#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a:hover {
+    background-color: rgb(240, 112, 0);
+    color: white;
+    border-radius: 5px;
+}
+
+#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a {
+    color: white;
+    font-weight: bold;
+}
+
+#api-reference > h1 {
+    margin: 0;
+}
+
+.navbar-title {
+    font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+    font-weight: bold;
+    color: white;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 3px;
+    padding-bottom: 4px;
+}
+
+#quarto-header > nav > div {
+    margin-left: 5%;
+    margin-right: 5%;
+}
+
+.navbar {
+	background: linear-gradient(-45deg, #04778b, #1c7ff0, #006c93, #05614c);
+	background-size: 200% 100%;
+	animation: gradient 20s ease infinite;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.ms-auto > li {
+    padding-right: 5px
+}
+
+.shrink-example .cell-output table {
+    zoom: 60%;
+}