refactor: styles (#258)

## What Did You Change?

Break up styles so "entrypoint" to contribute CSS is smaller.

<details>

- **Reorganized styles.**
    - Offer `inbox.css` (free-form) and `import.css` (structured).
    - Hide advanced stylesheets in subdirectories.
- Renamed extra JavaScript file.
    <sup>(unused, empty)</sup>

</details>

## Do You Want Support (syntax, design, etc)?

Does this structure to make CSS approachable or more intimidating?

**BEFORE**
[One 300-line
stylesheet](https://github.com/DesignSafe-CI/DS-User-Guide/blob/v3.0.0/user-guide/css/ds-user-guide.css)
(organized and commented).
```
.
├── ds-user-guide.css
└── README.md
```

**AFTER**
Many small stylesheets. One [import
stylesheet](https://github.com/DesignSafe-CI/DS-User-Guide/blob/refactor/css-and-js/user-guide/css/import.css).
One ["inbox"
stylesheet](https://github.com/DesignSafe-CI/DS-User-Guide/blob/refactor/css-and-js/user-guide/css/inbox.css).
```
.
├── ds-user-guide
│   ├── …
│   └── …
├── for-other-repos
│   ├── …
│   └── …
├── tacc
│   ├── …
│   └── …
├── import.css
├── inbox.css
└── README.md
```

Author: wesleyboar

mkdocs.yml

@@ -24,10 +24,10 @@ theme:
   nav_name: User Guide
 
 extra_css:
-  - css/ds-user-guide.css
+  - css/import.css
 
 extra_javascript:
-  - js/ds-user-guide.js
+  - js/import.js
   - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js # for pymdownx.arithmatex
 
 markdown_extensions:

user-guide/css/README.md

@@ -1,5 +1,4 @@
 # DesignSafe User Guide Styles
 
-Styles specific to DS-User-Guide should be in this directory.
-
-Styles for all TACC-themed docs belong in https://github.com/TACC/mkdocs-tacc.
+1. Create your CSS file in appropriate folder, or add CSS `inbox.css` if unsure.
+2. For each file you add, `@import` it in `_import.css` in respective folder.

user-guide/css/ds-user-guide.css

@@ -0,0 +1,11 @@
+/* DESIGNSAFE-CI/DS-USER-GUIDE */
+/* To add CSS unique to DesignSafe/DS-User-Guide */
+
+@import url('definition-lists.css');
+@import url('hide-extra-space.css');
+@import url('hide-some-anchor-links.css');
+@import url('horizontal-rule.css');
+@import url('mimic-designsafe-logo.css');
+@import url('subtitle-via-attribute.css');
+@import url('titles-long-and-short.css');
+@import url('unindent-details-in-lists.css');

user-guide/css/ds-user-guide/_import.css

@@ -0,0 +1,9 @@
+/* To style definition lists */
+/* https://python-markdown.github.io/extensions/definition_lists/ */
+/* TODO: Consider moving to Core-Styles and demo-ing in Mkdocs-TACC */
+dt {
+    font-weight: bold;
+}
+dd {
+    margin-bottom: 1em;
+}

user-guide/css/ds-user-guide/definition-lists.css

@@ -0,0 +1,17 @@
+/* To hide unused space at bottom of overview pages */
+/* https://github.com/TACC/TACC-Docs/blob/a9d01e1/docs/css/core/tacc-docs.css#L568-L574 */
+[data-page-name$="usecases/overview.md"] footer {
+  display: none; /* undo theme.css */
+}
+[data-page-name$="usecases/overview.md"] .wy-nav-content {
+  padding-bottom: 0; /* undo theme.css */
+}
+
+/* To hide extra spacing caused by paragraph side-effect of nested <details> */
+details li > p {
+    margin: 0;
+}
+/* To hide extra spacing caused by core-styles space on all <details> */
+li > details {
+    margin: 0;
+}

user-guide/css/ds-user-guide/hide-extra-space.css

@@ -0,0 +1,4 @@
+/* To hide anchor link for deeper headings */
+:is(h4, h5, h6) .headerlink {
+  display: none;
+}

user-guide/css/ds-user-guide/hide-some-anchor-links.css

@@ -0,0 +1,4 @@
+/* A custom horizontal rule to use between large documents */
+hr.spacer {
+    margin-block: 20rem 5rem;
+}

user-guide/css/ds-user-guide/horizontal-rule.css

@@ -0,0 +1,15 @@
+/* To write "DESIGNSAFE" like its logo */
+/* FAQ: To use, write `# <u><b>Design</b>Safe</u>` */
+:where(h1, h2, h3, h4, h5, h6) > u {
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: var(--medium);
+  color: #565656;
+
+  /* To use DesignSafe logo font */
+  font-family: Futura; /* WARNING: requires user have this font installed */
+}
+:where(h1, h2, h3, h4, h5, h6) > u > b {
+  color: #cb463f;
+  font-weight: var(--black);
+}

user-guide/css/ds-user-guide/mimic-designsafe-logo.css

@@ -0,0 +1,17 @@
+/* To add subtitle after headings */
+[data-subtitle]::after {
+    content: ' ' attr(data-subtitle);
+}
+[data-subtitle]:not(
+    /* headings only distinguished by weight */
+    h5, h6
+)::after {
+    font-weight: normal;
+}
+[data-subtitle]:is(
+    /* headings that need subtitle below */
+    h1
+)::after {
+    text-transform: none;
+    font-size: var(--global-font-size--xx-large);
+}