*/
-li > details {
- margin: 0;
-}
-
-/* To un-indent details in a list item */
-li:has(> details) {
- list-style-type: none;
-}
-li > details > summary {
- translate: calc(-1em);
-}
-
-/* To restore space (removed by TACC) at bottom of idnex page */
-/* (unnecessary after DesignSafe-CI/DS-User-Guide#155) */
-/* https://github.com/TACC/TACC-Docs/blob/v0.15.1/docs/css/core/tacc-docs.css#L510-L512 */
-[data-page-name="index.md"] footer {
- display: revert;
-}
-
-/* To style definition lists */
-/* https://python-markdown.github.io/extensions/definition_lists/ */
-/* TODO: Move to Core-Styles, Demo in Mkdocs-TACC */
-dt {
- font-weight: bold;
-}
-dd {
- margin-bottom: 1em;
-}
-
-/* To distinguish active item from heading */
-/* To highlight active item with more than just bold */
-/* https://github.com/TACC/TACC-Docs/blob/v0.15.1/docs/css/core/tacc-docs.css#L75-L104 */
-/* FAQ: Overrides TACC (which overrides ReadTheDocs) */
-/* NOTE: Remove after repo uses mkdocs-tacc, cuz it has this style */
-.wy-menu-vertical li.current > a:not(:has(+ ul li.current)) {
- background: #e3e3e3; /* copied from TACC's .wy-menu-vertical a:hover */
-}
diff --git a/user-guide/css/ds-user-guide/_import.css b/user-guide/css/ds-user-guide/_import.css
new file mode 100644
index 00000000..39ab56a2
--- /dev/null
+++ b/user-guide/css/ds-user-guide/_import.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');
diff --git a/user-guide/css/ds-user-guide/definition-lists.css b/user-guide/css/ds-user-guide/definition-lists.css
new file mode 100644
index 00000000..602fb133
--- /dev/null
+++ b/user-guide/css/ds-user-guide/definition-lists.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;
+}
diff --git a/user-guide/css/ds-user-guide/hide-extra-space.css b/user-guide/css/ds-user-guide/hide-extra-space.css
new file mode 100644
index 00000000..8d6dfc67
--- /dev/null
+++ b/user-guide/css/ds-user-guide/hide-extra-space.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 li > p {
+ margin: 0;
+}
+/* To hide extra spacing caused by core-styles space on all
*/
+li > details {
+ margin: 0;
+}
diff --git a/user-guide/css/ds-user-guide/hide-some-anchor-links.css b/user-guide/css/ds-user-guide/hide-some-anchor-links.css
new file mode 100644
index 00000000..e96e6c35
--- /dev/null
+++ b/user-guide/css/ds-user-guide/hide-some-anchor-links.css
@@ -0,0 +1,4 @@
+/* To hide anchor link for deeper headings */
+:is(h4, h5, h6) .headerlink {
+ display: none;
+}
diff --git a/user-guide/css/ds-user-guide/horizontal-rule.css b/user-guide/css/ds-user-guide/horizontal-rule.css
new file mode 100644
index 00000000..00c839ec
--- /dev/null
+++ b/user-guide/css/ds-user-guide/horizontal-rule.css
@@ -0,0 +1,4 @@
+/* A custom horizontal rule to use between large documents */
+hr.spacer {
+ margin-block: 20rem 5rem;
+}
diff --git a/user-guide/css/ds-user-guide/mimic-designsafe-logo.css b/user-guide/css/ds-user-guide/mimic-designsafe-logo.css
new file mode 100644
index 00000000..21e95c31
--- /dev/null
+++ b/user-guide/css/ds-user-guide/mimic-designsafe-logo.css
@@ -0,0 +1,15 @@
+/* To write "DESIGNSAFE" like its logo */
+/* FAQ: To use, write `# DesignSafe` */
+: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);
+}
diff --git a/user-guide/css/ds-user-guide/subtitle-via-attribute.css b/user-guide/css/ds-user-guide/subtitle-via-attribute.css
new file mode 100644
index 00000000..65778113
--- /dev/null
+++ b/user-guide/css/ds-user-guide/subtitle-via-attribute.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);
+}
diff --git a/user-guide/css/ds-user-guide/titles-long-and-short.css b/user-guide/css/ds-user-guide/titles-long-and-short.css
new file mode 100644
index 00000000..1df1c2c9
--- /dev/null
+++ b/user-guide/css/ds-user-guide/titles-long-and-short.css
@@ -0,0 +1,25 @@
+/* To make:
+ - short title (heading) less emphasized
+ - long title (paragraph following heading) look like heading */
+.document header h2 + p {
+ font-size: var(--global-font-size--xx-large);
+ font-weight: var(--bold);
+}
+.document header h3 + p {
+ font-size: var(--global-font-size--x-large);
+ font-weight: var(--bold);
+}
+.document header h4 + p {
+ font-size: var(--global-font-size--large);
+ font-weight: var(--bold);
+}
+.document header :is(h2, h3, h4) {
+ font-weight: var(--regular);
+ margin-bottom: -24px; /* to remove excess space between titles */
+}
+.document header h2 {
+ font-size: var(--global-font-size--x-large);
+}
+.document header h3 {
+ font-size: var(--global-font-size--large);
+}
diff --git a/user-guide/css/ds-user-guide/unindent-details-in-lists.css b/user-guide/css/ds-user-guide/unindent-details-in-lists.css
new file mode 100644
index 00000000..8c9a76e7
--- /dev/null
+++ b/user-guide/css/ds-user-guide/unindent-details-in-lists.css
@@ -0,0 +1,7 @@
+/* To un-indent details in a list item */
+li:has(> details) {
+ list-style-type: none;
+}
+li > details > summary {
+ translate: calc(-1em);
+}
diff --git a/user-guide/css/for-other-repos/README.md b/user-guide/css/for-other-repos/README.md
new file mode 100644
index 00000000..f540aa65
--- /dev/null
+++ b/user-guide/css/for-other-repos/README.md
@@ -0,0 +1,8 @@
+# TACC Styles That Belong in Other Repositories
+
+Some styles in DS-User-Guide actually belong in upstream projects e.g.
+
+| folder | repo | purpose |
+| - | - | - |
+| `for-mkdocs-tacc` | [TACC/mkdocs-tacc](https://github.com/TACC/mkdocs-tacc) | TACC's theme for [MkDocs](https://www.mkdocs.org/) |
+| `for-core-styles` | [TACC/Core-Styles](https://github.com/TACC/Core-Styles) | various styles for any web UI |
diff --git a/user-guide/css/for-other-repos/_import.css b/user-guide/css/for-other-repos/_import.css
new file mode 100644
index 00000000..a8b8e615
--- /dev/null
+++ b/user-guide/css/for-other-repos/_import.css
@@ -0,0 +1,14 @@
+/* To organize styles that belong in other repositories */
+
+/* TACC/CORE-STYLES */
+/* To add CSS intended for TACC/Core-Styles */
+/* TODO: Move to TACC/Core-Styles */
+
+@import url('./for-mkdocs-tacc/user-guide/css/tacc/for-core-styles/h5-and-h6.css') layer(project);
+
+/* TACC/MKDOCS-TACC */
+/* To add CSS intended for TACC/mkdocs-tacc */
+/* TODO: Move to TACC/mkdocs-tacc */
+
+@import url('./for-mkdocs-tacc/deep-vs-shallow-nav.css') layer(cosmetic);
+@import url('./for-mkdocs-tacc/space-around-certain-icons.css') layer(cosmetic);
diff --git a/user-guide/css/for-other-repos/for-core-styles/h5-and-h6.css b/user-guide/css/for-other-repos/for-core-styles/h5-and-h6.css
new file mode 100644
index 00000000..701fc9d9
--- /dev/null
+++ b/user-guide/css/for-other-repos/for-core-styles/h5-and-h6.css
@@ -0,0 +1,12 @@
+/* To restore some font weight to the deepest headings */
+/* NOTE: Designer says these are too deep to support,
+ but documentation is deeper than websites */
+/* TODO: Migrate change to Core-Styles */
+:where(
+ :is([role=main],main),
+ :not(:is(#root))
+) h5 { font-weight: var(--extra-bold); letter-spacing: 0.03125em; }
+:where(
+ :is([role=main],main),
+ :not(:is(#root))
+) h6 { font-weight: var(--bold); }
diff --git a/user-guide/css/for-other-repos/for-mkdocs-tacc/deep-vs-shallow-nav.css b/user-guide/css/for-other-repos/for-mkdocs-tacc/deep-vs-shallow-nav.css
new file mode 100644
index 00000000..962ecd0f
--- /dev/null
+++ b/user-guide/css/for-other-repos/for-mkdocs-tacc/deep-vs-shallow-nav.css
@@ -0,0 +1,18 @@
+/* TODO: Move to TACC/mkdocs-tacc */
+
+/* To distinguish deeper nav from shallower nav */
+:is(
+ .wy-menu-vertical li.toctree-l5,
+ .wy-menu-vertical li.toctree-l6,
+ .wy-menu-vertical li.toctree-l7,
+ .wy-menu-vertical li.toctree-l8,
+ .wy-menu-vertical li.toctree-l9,
+ .wy-menu-vertical li[class*="toctree-l1"]:not(.toctree-l1)
+) {
+ & a.current {
+ font-weight: var(--medium);
+ }
+ & a:not(.current) {
+ font-weight: var(--regular);
+ }
+}
diff --git a/user-guide/css/for-other-repos/for-mkdocs-tacc/space-around-certain-icons.css b/user-guide/css/for-other-repos/for-mkdocs-tacc/space-around-certain-icons.css
new file mode 100644
index 00000000..75133b62
--- /dev/null
+++ b/user-guide/css/for-other-repos/for-mkdocs-tacc/space-around-certain-icons.css
@@ -0,0 +1,6 @@
+/* TODO: Move to TACC/mkdocs-tacc */
+
+/* To add space before and after icon from `_text_{ .fa fa.icon-name }` */
+.document .fa::before {
+ margin-inline: 0.5ch;
+}
diff --git a/user-guide/css/import.css b/user-guide/css/import.css
new file mode 100644
index 00000000..380ead88
--- /dev/null
+++ b/user-guide/css/import.css
@@ -0,0 +1,15 @@
+/*
+ * DesignSafe User Guide Styles - Import Manifest
+ *
+ * IMPORTANT: Do not add styles directly to this file.
+ * Add styles to appropriate stylesheet listed below.
+ * If unsure where styles belong, add them to `inbox.css`
+ */
+
+/* Contribute any styles */
+@import url("inbox.css");
+
+/* Organize established styles */
+@import url("for-other-repos/_import.css");
+@import url("ds-user-guide/_import.css") @layer(cosmetic);
+@import url("tacc/_import.css");
diff --git a/user-guide/css/inbox.css b/user-guide/css/inbox.css
new file mode 100644
index 00000000..a8697825
--- /dev/null
+++ b/user-guide/css/inbox.css
@@ -0,0 +1,11 @@
+/*
+ * Style Contributions Inbox
+ *
+ * Add any styles here if you're unsure where they belong.
+ * These will be periodically reviewed and organized into appropriate files.
+ *
+ * IMPORTANT: Add a comment describing what your styles do.
+ */
+
+
+
diff --git a/user-guide/css/tacc/_import.css b/user-guide/css/tacc/_import.css
new file mode 100644
index 00000000..696ffcf0
--- /dev/null
+++ b/user-guide/css/tacc/_import.css
@@ -0,0 +1,3 @@
+/* To customize TACC styles */
+@import url('core-styles.docs.css') layer(project);
+@import url('mkdocs-tacc.css') layer(cosmetic);
diff --git a/user-guide/css/tacc/core-styles.docs.css b/user-guide/css/tacc/core-styles.docs.css
new file mode 100644
index 00000000..736c9256
--- /dev/null
+++ b/user-guide/css/tacc/core-styles.docs.css
@@ -0,0 +1,28 @@
+/* TACC/CORE-STYLES */
+/* To customize TACC/Core-Styles CSS */
+/* https://github.com/TACC/Core-Styles/blob/v2/src/lib/_imports/core-styles.base.css */
+/* https://github.com/TACC/Core-Styles/blob/v2/src/lib/_imports/core-styles.docs.css */
+
+/* To use DesignSafe colors */
+@import url('https://cdn.jsdelivr.net/gh/TACC/Core-Styles@epic/v3--gh-345-tokens-from-figma/src/v3/variables/designsafe.light.css');
+:scope {
+ --global-color-accent--xxx-light: var(--color-accent-1-light-3x);
+ --global-color-accent--xx-light: var(--color-accent-1-light-2x);
+ --global-color-accent--x-light: var(--color-accent-1-light-x);
+ --global-color-accent--light: var(--color-accent-1-light);
+ --global-color-accent--normal: var(--color-accent-1-normal);
+ --global-color-accent--dark: var(--color-accent-1-dark);
+ --global-color-accent--x-dark: var(--color-accent-1-dark-x);
+ --global-color-accent--xx-dark: var(--color-accent-1-dark-2x);
+ --global-color-accent--xxx-dark: var(--color-accent-1-dark-3x);
+}
+
+/* To also support underlining headings in hovered card for `.h1` et cetera */
+/* https://github.com/DesignSafe-CI/DS-User-Guide/blob/df64c11/user-guide/docs/usecases/overview.md?plain=1#L34-L37 */
+/* https://github.com/TACC/Core-Styles/blob/v2.27.0/src/lib/_imports/components/c-card--docs.css#L23-L29 */
+a[class*=card--]:hover :is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-decoration-thickness: var(--global-border-width--normal);
+ text-underline-offset: .2em;
+}
diff --git a/user-guide/css/tacc/mkdocs-tacc.css b/user-guide/css/tacc/mkdocs-tacc.css
new file mode 100644
index 00000000..3a76ac31
--- /dev/null
+++ b/user-guide/css/tacc/mkdocs-tacc.css
@@ -0,0 +1,56 @@
+/* TACC/MKDOCS-TACC */
+/* To customize TACC/mkdocs-tacc CSS */
+
+/* To force a logo `![]()
` loading an SVG to have dimensions */
+/* FAQ: Happens if `swapImgSvgWithRawSvg.js` does not work or is unavailable */
+.wy-side-nav-search > a img.logo[src$=".svg"] {
+ width: 100%;
+}
+
+/* To customize name under logo */
+.wy-side-nav-search .nav-name {
+ font-weight: var(--medium);
+ color: #565656;
+}
+/* To give logo more horizontal space */
+.wy-side-nav-search > a {
+ --pad-horz: 0;
+ --link-pad-horz: 0;
+}
+.wy-side-nav-search > a.logo {
+ margin-bottom: 0;
+}
+
+/* To make horizontal rules more obvious */
+/* FAQ: Our pages are so tall, that we will let users on big
s */ +/* NOTE: Alternative UX is more difficult using our ReadTheDocs theme */ +hr:where(:not( + [role="navigation"] hr, + [role="main"] ~ footer hr +)) { + margin-block: 3rem; +} + +/* To update old markup that should be `` */ +b { + font-weight: var(--bold); +} + +/* To extend grid pattern (for pages like usecases/overview) */ +/* https://github.com/TACC/TACC-Docs/blob/v0.15.1/docs/css/core/tacc-docs.css#L521-L527 */ +/* https://github.com/TACC/mkdocs-tacc/blob/v0.6.0/mkdocs_tacc/tacc_readthedocs/css/tacc-theme/core-docs.css#L52-L58 */ +.grid__header, +.grid > :is(h1, h2, h3, h4, h5, h6) { + margin-block: 0; + grid-column: span 2; +} +/* To remove space from top of header-less intro paragraph in a grid */ +/* https://github.com/TACC/TACC-Docs/blob/f2e80b4/docs/index.md?plain=1#L107-L109 */ +/* https://github.com/DesignSafe-CI/DS-User-Guide/blob/92882f2/user-guide/docs/usecases/overview.md?plain=1#L21-L23 */ +.grid__header > p:first-child { + margin-top: 0; +} +/* To remove extra space under cards */ +.grid [class*="card"] { + margin-bottom: 0; +} diff --git a/user-guide/js/README.md b/user-guide/js/README.md index 6f86586a..60e80bca 100644 --- a/user-guide/js/README.md +++ b/user-guide/js/README.md @@ -1,5 +1,8 @@ # DesignSafe User Guide Scripts +1. Create your JavaScript in appropriate folder, or `inbox.module.js` if unsure. +2. For each file you add, `import` it in `import.css`. + Scripts specific to DS-User-Guide should be in this directory. Scripts for all TACC-themed docs belong in https://github.com/TACC/mkdocs-tacc. diff --git a/user-guide/js/ds-user-guide.js b/user-guide/js/ds-user-guide.js deleted file mode 100644 index 2820f184..00000000 --- a/user-guide/js/ds-user-guide.js +++ /dev/null @@ -1 +0,0 @@ -/* Any DesignSafe-specific scripting may go here */ diff --git a/user-guide/js/ds-user-guide/sample.module.js b/user-guide/js/ds-user-guide/sample.module.js new file mode 100644 index 00000000..52df0295 --- /dev/null +++ b/user-guide/js/ds-user-guide/sample.module.js @@ -0,0 +1,2 @@ +/* To test this script is loaded */ +// console.log('Test sample JavaScript'); diff --git a/user-guide/js/import.js b/user-guide/js/import.js new file mode 100644 index 00000000..7cc36a8c --- /dev/null +++ b/user-guide/js/import.js @@ -0,0 +1,13 @@ +/* + * DesignSafe User Guide Scripts - Import Manifest + * + * IMPORTANT: Do not add scripts directly to this file. + * Add scripts to appropriate stylesheet or folder. + * If unsure where scripts belong, add them to `inbox.module.js` + */ + +/* Contribute any scripts */ +import('./inbox.module.js'); + +/* Organize established scripts */ +import('./ds-user-guide/sample.module.js'); diff --git a/user-guide/js/inbox.module.js b/user-guide/js/inbox.module.js new file mode 100644 index 00000000..f9d28864 --- /dev/null +++ b/user-guide/js/inbox.module.js @@ -0,0 +1,13 @@ +/* + * Script Contributions Inbox + * + * Any DesignSafe-specific scripting may go here. + * These will be periodically reviewed and organized into appropriate files. + * + * IMPORTANT: Add a comment describing what your script does. + */ + + +/* To test this script is loaded */ +// console.log('Test inbox JavaScript'); +
s */ +/* NOTE: Alternative UX is more difficult using our ReadTheDocs theme */ +hr:where(:not( + [role="navigation"] hr, + [role="main"] ~ footer hr +)) { + margin-block: 3rem; +} + +/* To update old markup that should be `` */ +b { + font-weight: var(--bold); +} + +/* To extend grid pattern (for pages like usecases/overview) */ +/* https://github.com/TACC/TACC-Docs/blob/v0.15.1/docs/css/core/tacc-docs.css#L521-L527 */ +/* https://github.com/TACC/mkdocs-tacc/blob/v0.6.0/mkdocs_tacc/tacc_readthedocs/css/tacc-theme/core-docs.css#L52-L58 */ +.grid__header, +.grid > :is(h1, h2, h3, h4, h5, h6) { + margin-block: 0; + grid-column: span 2; +} +/* To remove space from top of header-less intro paragraph in a grid */ +/* https://github.com/TACC/TACC-Docs/blob/f2e80b4/docs/index.md?plain=1#L107-L109 */ +/* https://github.com/DesignSafe-CI/DS-User-Guide/blob/92882f2/user-guide/docs/usecases/overview.md?plain=1#L21-L23 */ +.grid__header > p:first-child { + margin-top: 0; +} +/* To remove extra space under cards */ +.grid [class*="card"] { + margin-bottom: 0; +} diff --git a/user-guide/js/README.md b/user-guide/js/README.md index 6f86586a..60e80bca 100644 --- a/user-guide/js/README.md +++ b/user-guide/js/README.md @@ -1,5 +1,8 @@ # DesignSafe User Guide Scripts +1. Create your JavaScript in appropriate folder, or `inbox.module.js` if unsure. +2. For each file you add, `import` it in `import.css`. + Scripts specific to DS-User-Guide should be in this directory. Scripts for all TACC-themed docs belong in https://github.com/TACC/mkdocs-tacc. diff --git a/user-guide/js/ds-user-guide.js b/user-guide/js/ds-user-guide.js deleted file mode 100644 index 2820f184..00000000 --- a/user-guide/js/ds-user-guide.js +++ /dev/null @@ -1 +0,0 @@ -/* Any DesignSafe-specific scripting may go here */ diff --git a/user-guide/js/ds-user-guide/sample.module.js b/user-guide/js/ds-user-guide/sample.module.js new file mode 100644 index 00000000..52df0295 --- /dev/null +++ b/user-guide/js/ds-user-guide/sample.module.js @@ -0,0 +1,2 @@ +/* To test this script is loaded */ +// console.log('Test sample JavaScript'); diff --git a/user-guide/js/import.js b/user-guide/js/import.js new file mode 100644 index 00000000..7cc36a8c --- /dev/null +++ b/user-guide/js/import.js @@ -0,0 +1,13 @@ +/* + * DesignSafe User Guide Scripts - Import Manifest + * + * IMPORTANT: Do not add scripts directly to this file. + * Add scripts to appropriate stylesheet or folder. + * If unsure where scripts belong, add them to `inbox.module.js` + */ + +/* Contribute any scripts */ +import('./inbox.module.js'); + +/* Organize established scripts */ +import('./ds-user-guide/sample.module.js'); diff --git a/user-guide/js/inbox.module.js b/user-guide/js/inbox.module.js new file mode 100644 index 00000000..f9d28864 --- /dev/null +++ b/user-guide/js/inbox.module.js @@ -0,0 +1,13 @@ +/* + * Script Contributions Inbox + * + * Any DesignSafe-specific scripting may go here. + * These will be periodically reviewed and organized into appropriate files. + * + * IMPORTANT: Add a comment describing what your script does. + */ + + +/* To test this script is loaded */ +// console.log('Test inbox JavaScript'); +