From 4e63a0e61b731aaee7faf3031f3953e99a294c09 Mon Sep 17 00:00:00 2001
From: Jacob Cain <115182890+jrcain-usgs@users.noreply.github.com>
Date: Fri, 7 Jun 2024 09:29:35 -0700
Subject: [PATCH] Header and tooltip CSS (#100)
* better glossary tooltips
* small css adj
---
custom_theme/main.html | 7 +++
docs/css/extras.css | 119 +++++++++++++++++++++++++++++++++++++++--
2 files changed, 122 insertions(+), 4 deletions(-)
diff --git a/custom_theme/main.html b/custom_theme/main.html
index b2f0ed4..20cb72b 100644
--- a/custom_theme/main.html
+++ b/custom_theme/main.html
@@ -2,6 +2,13 @@
{% block scripts %}
<script async type="text/javascript" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOI" id="_fed_an_ua_tag"></script>
+ <script>
+ let myAbbrs = document.getElementsByTagName("abbr")
+ for (let i = 0; i < myAbbrs.length; i++) {
+ myAbbrs[i].dataset.title = myAbbrs[i].title
+ myAbbrs[i].removeAttribute("title")
+ }
+ </script>
{{super()}}
{% endblock %}
diff --git a/docs/css/extras.css b/docs/css/extras.css
index 4b8851f..f5088f5 100644
--- a/docs/css/extras.css
+++ b/docs/css/extras.css
@@ -1,6 +1,117 @@
-/* This handles the issue where mkdocs-css and uswds-css are in conflict. Both try to set html to a specific font-size percentage.
- mkdocs-css makes the font too large causing the usa banner to be too large. uswds-css makes the page font too small.
- Therefore a solution is to set the font-size percentage in the middle.*/
+/* mkdocs-css enlarges the whole page, so this scales back some of the uswds-css components*/
+
html {
- font-size: 120%!important;
+ font-size: 125%;
}
+
+@font-face{
+ font-family:"Public Sans Web";
+ font-style:normal;
+ font-weight:400;
+ font-display:fallback;
+ src:url(https://asc-public-docs.s3.us-west-2.amazonaws.com/common/uswds/3.6.0/fonts/public-sans/PublicSans-Medium.woff2) format("woff2");
+}
+@font-face{
+ font-family:"Public Sans Web";
+ font-style:normal;
+ font-weight:700;
+ font-display:fallback;
+ src:url(https://asc-public-docs.s3.us-west-2.amazonaws.com/common/uswds/3.6.0/fonts/public-sans/PublicSans-Bold.woff2) format("woff2");
+}
+
+.usa-banner__header-text, .usa-banner__button, .usa-banner__guidance {
+ font-family: Public Sans Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+}
+
+.usa-banner__guidance {
+ font-size: .8rem;
+}
+
+.usa-banner__button {
+ font-size: .6rem;
+ font-weight: 400;
+}
+
+.usa-banner__button::after, .usa-banner__button[aria-expanded="true"]::after {
+ height: 0.8rem;
+ width: 0.8rem;
+ mask-size: 0.8rem;
+}
+
+@media (max-width: 39.99rem) {
+
+ .usa-banner__button::after, .usa-banner__button[aria-expanded="true"]::after {
+ height: 2.4rem;
+ width: 2.4rem;
+ mask-size: 1.2rem;
+ }
+ .usa-banner__button[aria-expanded="true"]::before {
+ height: 2.4rem;
+ width: 2.4rem;
+ }
+ .usa-banner__header {
+ min-height: 2.4rem;
+ padding-top: 0.4rem;
+ padding-bottom: 0.4rem;
+ }
+}
+
+@media (min-width: 40rem) {
+ .usa-banner__header {
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ }
+}
+
+.usa-banner__header-flag {
+ width: .8rem;
+ margin-top: 1px;
+}
+
+.usa-banner__header-text {
+ font-size: .6rem;
+ line-height: 1.2;
+}
+
+.usa-banner__header {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 61rem;
+ padding-left: 0.8rem;
+}
+
+.usa-banner__inner {
+ padding-left: 0rem !important;
+}
+
+.usa-banner__icon {
+ width: 2rem;
+}
+
+.header-search {
+ max-width: 59.5rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@media screen and (min-width: 0px) {
+ abbr[data-title] {
+ position: relative;
+ }
+
+ abbr[data-title]:hover::after,
+ abbr[data-title]:focus::after {
+ content: attr(data-title);
+ background-color: #1e1e1e;
+ color: white;
+ position: absolute;
+ left: 0;
+ top: 22px;
+ min-width: 15rem;
+ border-radius: 4px;
+ box-shadow: 1px 1px 4px 0 rgba(1, 1, 1, 0.5);
+ font-size: 14px;
+ padding: 3px 5px;
+ z-index: 50;
+ }
+}
\ No newline at end of file
--
GitLab