diff --git a/.github/workflows/deploy_to_github_pages.yml b/.github/workflows/deploy_to_github_pages.yml new file mode 100644 index 0000000..aa528dd --- /dev/null +++ b/.github/workflows/deploy_to_github_pages.yml @@ -0,0 +1,238 @@ +name: Deploy to GitHub Pages +on: + push: #Action fires anytime there is a push to the following branches + branches: + - main + paths: + - documentation/** + pull_request: #Action also fires anytime a PR is (re)opened, closed or synchronized + types: + - opened + - reopened + - synchronize + - closed + paths: + - documentation/** + workflow_dispatch: #Action can also be triggered manually +env: + TZ: Australia/Canberra + DOC_DIR: documentation + ROOT_BUILD_DIR: ${{ github.workspace }}/website + COMMENT_LABEL: pr-preview + ROOT_DOMAIN: https://access-nri.github.io + +jobs: + set-root-url: + runs-on: ubuntu-latest + outputs: + root_url: ${{ steps.set-root-url.outputs.root_url }} + steps: + - name: Set root url + id: set-root-url + run: | + if [[ ${{ env.ROOT_DOMAIN }} == https://access-nri.github.io ]]; then + root_url=${{ env.ROOT_DOMAIN }}/${{ github.event.repository.name }} + else + root_url=${{ env.ROOT_DOMAIN }} + fi + echo "Root url set to ${root_url}" + echo "root_url=${root_url}" >> $GITHUB_OUTPUT + + get-date: + runs-on: ubuntu-latest + env: + TZ: Australia/Canberra + outputs: + date: ${{ steps.get-date.outputs.date }} + steps: + - name: Get date + id: get-date + run: echo "date=$(date '+%Y-%m-%d %H:%M %Z')" >> $GITHUB_OUTPUT + + pr-preview-setup: + # Run this job only if the action was fired because of a PR + if: ${{ github.event_name == 'pull_request' }} + needs: get-date + runs-on: ubuntu-latest + env: + HEAD: ${{ github.event.pull_request.head.sha }} + HEAD_URL: https://github.com/${{ github.event.pull_request.head.repo.full_name }}/commit/${{ github.event.pull_request.head.sha }} + permissions: + pull-requests: write + steps: + - name: Add PR preview setup comment + if: ${{ github.event.action != 'closed' }} + uses: access-nri/actions/.github/actions/comment@main + with: + message: | + PR Preview + :---: + 🛫 The preview of commit [${{ env.HEAD }}](${{ env.HEAD_URL }}) is currently being deployed.
The preview URL will be available once the deployment completes.
For further details, please check the [Actions](https://github.com/${{ github.repository }}/actions) tab. + ${{ needs.get-date.outputs.date }} + label: ${{ env.COMMENT_LABEL }} + + - name: Remove PR preview comment + if: ${{ github.event.action == 'closed' }} + uses: access-nri/actions/.github/actions/comment@main + with: + delete: true + label: ${{ env.COMMENT_LABEL }} + + build: + # Cancel any previous build/deploy jobs that are still running (no need to build/deploy multiple times) + concurrency: + group: documentation-build-deploy + cancel-in-progress: true + runs-on: ubuntu-latest + needs: set-root-url + outputs: + matrix_include: ${{ steps.build-pr-preview.outputs.matrix_include }} + if: ${{ ! ( github.event_name == 'pull_request' && github.event.action == 'closed' ) }} + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Python setup + uses: actions/setup-python@v5 + with: + python-version: 3.11.x + + - name: Install dependencies + working-directory: ${{ env.DOC_DIR }} + run: | + pip install -r requirements.txt + + - name: Build main website + working-directory: ${{ env.DOC_DIR }} + env: + GH_TOKEN: ${{ github.token }} # Required for gh usage + ROOT_URL: ${{ needs.set-root-url.outputs.root_url }} + run: | + echo "::group::Build main website" + git fetch origin main + git checkout main + if [[ -f mkdocs.yml ]]; then + dir= + site_url=${{ env.ROOT_URL }}/${dir} + build_dir=${{ env.ROOT_BUILD_DIR }}/${dir} + command="SITE_URL=${site_url} mkdocs build -f mkdocs.yml -d ${build_dir}" + echo "$command" + eval "$command" + else + echo "::warning::No configuration found in the 'main' branch." + fi + echo "::endgroup::" + + - name: Build PR previews + working-directory: ${{ env.DOC_DIR }} + env: + GH_TOKEN: ${{ github.token }} # Required for gh usage + ROOT_URL: ${{ needs.set-root-url.outputs.root_url }} + id: build-pr-preview + run: | + echo "::group::Build PR previews" + git fetch --all -Pp + # Include only open PRs, not from forks, and whose head branch is not `main` + open_pr_info=$(gh pr list \ + --state open \ + --json headRepositoryOwner,headRefOid,number,headRefName \ + --jq '.[] | select( .headRefName!="main" and .headRepositoryOwner.login=="ACCESS-NRI")' \ + ) + pr_nums=($(jq '.number' <<< "$open_pr_info")) + if [[ -n $pr_nums ]]; then + echo "Found the following open PRs: $(IFS=, ; echo "${pr_nums[*]}")." + for num in ${pr_nums[@]}; do + echo "::group::Build PR preview for PR #${num}" + gh pr checkout $num + if [[ -f mkdocs.yml ]]; then + dir=pr-preview-${num} + site_url=${{ env.ROOT_URL }}/${dir} + build_dir=${{ env.ROOT_BUILD_DIR }}/${dir} + command="SITE_URL=${site_url} mkdocs build -f mkdocs.yml -d ${build_dir}" + echo "$command" + eval "$command" + # Defining the json string for the matrix.include field used in the pr-preview job + # Defining the following fields: + # - pr_num: the PR number + # - pr_preview_url: the URL of the PR preview + # - pr_head_sha: the SHA of the commit in the PR head + json_array+=("{\"pr_num\":${num},\"pr_preview_url\":\"${site_url}\",\"pr_head_sha\":\"$(git rev-parse HEAD)\"}") + else + echo "::warning::No configuration found in the PR #${num} head." + fi + echo '::endgroup::' + done + # Create the json for the matrix.include from the json_array + matrix_include=$(jq -c <<< "[$(IFS=, ; echo "${json_array[*]}")]") + echo "matrix_include=${matrix_include}" >> "$GITHUB_OUTPUT" + else + echo "No open PR found." + fi + echo '::endgroup::' + + - name: Set permissions + run: chmod -c -R +rX ${{ env.ROOT_BUILD_DIR }} + + - name: Create artifact for deployment to GitHub Pages + uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa #v3.0.1 + with: + path: ${{ env.ROOT_BUILD_DIR }} + + deploy: + needs: build + runs-on: ubuntu-latest + # Cancel any previous build/deploy jobs that are still running (no need to build/deploy multiple times) + concurrency: + group: documentation-build-deploy + cancel-in-progress: true + permissions: + pages: write # to deploy to Pages + id-token: write # to verify the deployment originates from an appropriate source + steps: + - name: Deploy to GitHub Pages + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e #v4.0.5 + + # Set pr-preview message + pr-preview: + needs: [get-date, build, deploy] + # If there are open PRs (whose head branch is neither `development` nor `main`), run this job + if: ${{ needs.build.outputs.matrix_include != '[]' && ( github.event_name != 'pull_request' || github.event.action != 'closed' ) }} + runs-on: ubuntu-latest + # Run the same job for each of the open PRs found + strategy: + matrix: + include: ${{ fromJson(needs.build.outputs.matrix_include) }} + permissions: + pull-requests: write + steps: + - name: Add PR preview setup comment + uses: access-nri/actions/.github/actions/comment@main + with: + message: | + PR Preview + :---: + 🚀 Preview of PR head ${{ matrix.pr_head_sha }} deployed to ${{ matrix.pr_preview_url }} + ${{ needs.get-date.outputs.date }} + Preview generated through the ${{ github.workflow }} workflow run [${{ github.run_id }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}). + number: ${{ matrix.pr_num }} + label: ${{ env.COMMENT_LABEL }} + + failed-preview: + needs: [get-date, deploy] + # If any job failed (but the workflow was not cancelled) and was fired because of a pull request (not closed) + if: ${{ github.event_name == 'pull_request' && failure() }} + runs-on: ubuntu-latest + permissions: + pull-requests: write + steps: + - name: Add PR preview failure comment + uses: access-nri/actions/.github/actions/comment@main + with: + message: | + PR Preview + :---: + ⚠️ There was an error in the pr-preview deployment. + For more information check the [Actions](https://github.com/${{github.repository}}/actions) tab. + ${{ needs.get-date.outputs.date }} + number: ${{ matrix.pr_num }} + label: ${{ env.COMMENT_LABEL }} diff --git a/documentation/docs/assets/ACCESS_icon_HIVE.png b/documentation/docs/assets/ACCESS_icon_HIVE.png new file mode 100644 index 0000000..35de943 Binary files /dev/null and b/documentation/docs/assets/ACCESS_icon_HIVE.png differ diff --git a/documentation/docs/css/custom.css b/documentation/docs/css/custom.css new file mode 100644 index 0000000..031a5c3 --- /dev/null +++ b/documentation/docs/css/custom.css @@ -0,0 +1,1543 @@ +/* + ACCESS-Hive Docs CSS +*/ + +/* Import medium-weight Roboto font for tabs */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); + +:root { + --nri-green-color: 165, 205, 58; + --nri-orange-color: 249, 166, 28; + --nri-dark-blue-color: 0, 91, 148; + --nri-blue-color: 1, 173, 238; + --nri-light-blue-color: 142, 215, 248; + --nri-green: rgb(var(--nri-green-color)); /* rgb(166, 206, 57) */ + --nri-orange: rgb(var(--nri-orange-color)); /* rgb(250, 166, 25) */ + --nri-dark-blue: rgb(var(--nri-dark-blue-color)); /* rgb(17, 93, 151) */ + --nri-blue: rgb(var(--nri-blue-color)); /* rgb(6, 174, 239) */ + --nri-light-blue: rgb(var(--nri-light-blue-color)); /* rgb(142, 215, 248) */ + --tab-text-color: 235, 235, 235; /* Color for text of top tab and back to top button */ + --tab-text: rgb(var(--tab-text-color)); /* Main text in navigation tab */ + --tab-text-light: rgba(var(--tab-text-color),.7); /* Main text in navigation tab inactive */ + --md-primary-fg-color: rgb(29, 29, 29); /* top banner background */ + --md-primary-fg-color--dark: var(--nri-dark-blue); /* top tab background */ + --primary-bg-color: var(--tab-text-color); /* Color for top banner text */ + --md-primary-bg-color: rgb(var(--primary-bg-color)); /* top banner text */ + --md-primary-bg-color--light: rgba(var(--primary-bg-color),0.5); /* search bar 'Search' text */ + --md-accent-fg-color--transparent: rgba(var(--nri-blue-color),.05); /* navigation bar little arrows hover */ + --md-accent-bg-color: rgb(var(--tab-text-color)); /* back to top button text hover */ + --md-code-hl-color: purple; + --md-code-hl-string-color: #1c7d4d; + --md-code-hl-keyword-color: #ff6fb2; + --md-code-hl-special-color: #db1457; + --md-code-hl-function-color: var(--nri-blue); + --md-code-hl-constant-color: #6e59d9; + --md-typeset-mark-color: rgba(var(--nri-orange-color),.4); /* marked text ( tag)*/ + --md-typeset-del-color: rgba(245,80,61,.15); /* deleted text ( tag) */ + --md-typeset-ins-color: rgba(11,213,112,.15); /* inserted text ( tag) */ + --navigation-borders: rgba(var(--nri-orange-color),.2); /* Left border on the toc and navigation*/ + --card-borders: rgba(var(--nri-green-color),.75); /* Borders of cards */ + --md-typeset-table-color: var(--card-borders); /* table borders ( tag) */ + --md-footer-fg-color: var(--md-primary-bg-color); /* footer link icon (social) */ + --md-footer-fg-color--light: var(--md-primary-bg-color); /* Footer copyright text and social icons fill */ + --md-footer-bg-color: var(--md-primary-fg-color); /* footer background color */ + --md-footer-bg-color--dark: rgba(0,0,0,0); /* footer background color (on top of the --md-footer-bg-color) */ + --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,.05),0 0 0.05rem rgba(0,0,0,.1); + --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,.1),0 0 0.05rem rgba(0,0,0,.25); + --md-shadow-z3: 0 0.2rem 0.5rem rgba(0,0,0,.2),0 0 0.05rem rgba(0,0,0,.35); + --card-shadows: #00000075; /* Shadows on cards and other elements */ + --card-shadows-hover: #00000090; /* Shadows hover on cards and other elements */ + --animated-terminal-background: var(--md-primary-fg-color); + --animated-terminal-directory: var(--nri-green); + --animated-terminal-buttons: var(--nri-orange); + --animated-terminal-buttons-hover: var(--nri-blue); + --animated-terminal-text: rgb(235, 235, 235); + --border-width: 0.1rem; + --note-color: 158, 117, 243; /* Note admonition color */ + --note: rgb(var(--note-color)); /* Note admonition */ + --danger-color: 255, 52, 52; /* Danger admonition color */ + --danger: rgb(var(--danger-color)); /* Danger admonition */ + --info-color: var(--nri-light-blue-color); /* Info admonition color */ + --info: rgb(var(--info-color)); /* Info admonition */ + --abstract-color: var(--nri-dark-blue-color); /* Abstract admonition color */ + --abstract: rgb(var(--abstract-color)); /* Abstract admonition */ + --tip-color: var(--nri-green-color); /* Tip admonition color */ + --tip: rgb(var(--tip-color)); /* Tip admonition */ + --success-color: var(--nri-green-color); /* Success admonition color */ + --success: rgb(var(--success-color)); /* Success admonition */ + --warning-color: var(--nri-orange-color); /* Warning admonition color */ + --warning: rgb(var(--warning-color)); /* Warning admonition */ + --failure-color: 180, 0, 0; /* Failure admonition color */ + --failure: rgb(var(--failure-color)); /* Failure admonition */ + --question-color: var(--nri-blue-color); /* Question admonition color */ + --question: rgb(var(--question-color)); /* Question admonition */ + --bug-color: 197, 75, 64; /* Bug admonition color */ + --bug: rgb(var(--bug-color)); /* Bug admonition */ + --example-color: 124, 77, 255; /* Example admonition color */ + --example: rgb(var(--example-color)); /* Example admonition */ + --quote-color: 158, 158, 158; /* Quote admonition color */ + --quote: rgb(var(--quote-color)); /* Quote admonition */ + --code-adm-color: 158, 158, 158; /* Code admonition (custom) color */ + --code-adm: rgb(var(--code-adm-color)); /* Code admonition (custom) */ + --release-color: 255, 222, 8; /* Release admonition (custom) color */ + --release: rgb(var(--release-color)); /* Release admonition (custom) border */ +} + +[data-md-color-scheme="custom-dark"] { + --default-fg-color: 235, 235, 235; /* Color for main text in body, navigation, table of content*/ + --md-default-fg-color: rgb(var(--default-fg-color)); /* Main text in body, navigation, table of content*/ + --md-default-fg-color--light: rgba(var(--default-fg-color),.7); /* Back to top button text, inactive tab text */ + --md-default-fg-color--lighter: rgba(var(--default-fg-color),.4); /* pencil for editing page, passed toc items text */ + --md-default-fg-color--lightest: rgba(var(--default-fg-color),.07); + --md-typeset-color: var(--md-default-fg-color); /* Color for main text */ + --default-bg-color: 53, 54, 58; /* Color for main background */ + --md-default-bg-color: rgb(var(--default-bg-color)); /* Main background */ + --md-default-bg-color--light: rgba(var(--default-bg-color),.7); + --md-default-bg-color--lighter: rgba(var(--default-bg-color),.3); + --md-default-bg-color--lightest: rgba(var(--default-bg-color),.12); + --md-typeset-a-color: var(--nri-light-blue); /* link text */ + --md-accent-fg-color: var(--nri-blue); /* link text hover */ + --md-code-fg-color: var(--md-default-fg-color); /* code element text */ + --md-code-bg-color: rgb(41, 41, 41); /* code element background */ + --md-code-hl-name-color: var(--md-code-fg-color); + --md-code-hl-operator-color: var(--md-code-fg-color); + --md-code-hl-punctuation-color: var(--md-code-fg-color); + --md-code-hl-comment-color: rgba(var(--default-fg-color), 0.5); + --md-code-hl-number-color: var(--nri-orange); + --md-code-hl-generic-color: var(--md-code-fg-color); + --md-code-hl-variable-color: var(--md-code-fg-color); + --md-typeset-kbd-color: rgb(39, 39, 39); /* keyboard key background ( tag) */ + --md-typeset-kbd-accent-color: rgb(126, 126, 126, .16); /* keyboard key inner border ( tag) */ + --md-typeset-kbd-border-color: rgb(30, 30, 30); /* text as keyboard outer border ( tag) */ + --active-version-tab-color: var(--nri-green-color); /* Color for the Text and underline of active HTML tab */ + --active-version-tab: rgb(var(--active-version-tab-color)); /* Text and underline of active HTML tab */ + --active-version-tab-background: rgba(var(--active-version-tab-color),0.05); /* Text and underline of active HTML tab */ + --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ + --note-bg: rgba(var(--note-color),.05); /* Note admonition background */ + --danger-bg: rgba(var(--danger-color),0.05); /* Danger admonition background */ + --info-bg: rgba(var(--info-color),0.05); /* Info admonition background */ + --abstract-bg: rgba(var(--abstract-color),0.05); /* Abstract admonition background */ + --tip-bg: rgba(var(--tip-color),0.05); /* Tip admonition background */ + --success-bg: rgba(var(--success-color),0.05); /* Success admonition background */ + --warning-bg: rgba(var(--warning-color),0.05); /* Warning admonition background */ + --failure-bg: rgba(var(--failure-color),0.05); /* Failure admonition background */ + --question-bg: rgba(var(--question-color),0.05); /* Question admonition background */ + --bug-bg: rgba(var(--bug-color),0.05); /* Bug admonition background */ + --example-bg: rgba(var(--example-color),0.05); /* Example admonition background */ + --quote-bg: rgba(var(--quote-color),0.05); /* Quote admonition background */ + --code-adm-bg: rgba(var(--code-adm-color),0.05); /* Code admonition (custom) background */ + --release-bg: rgba(var(--release-color), 0.05); /* Release admonition (custom) background */ + --tooltip-background: #272728; /* Tooltip background */ + --tooltip-border-color: #404041; /* Tooltip border color */ +} + +[data-md-color-scheme="custom-light"] { + --default-fg-color: 10, 10, 10; /* Color for main text in body, navigation, table of content*/ + --md-default-fg-color: rgb(var(--default-fg-color)); /* Main text in body, navigation, table of content*/ + --md-default-fg-color--light: rgba(var(--default-fg-color),.7); /* Back to top button text, inactive tab text */ + --md-default-fg-color--lighter: rgba(var(--default-fg-color),.4); /* pencil for editing page, passed toc items text */ + --md-default-fg-color--lightest: rgba(var(--default-fg-color),.07); + --md-typeset-color: var(--md-default-fg-color); /* Color for main text */ + --default-bg-color: 255, 255, 255; /* Color for main background */ + --md-default-bg-color: rgb(var(--default-bg-color)); /* Main background */ + --md-default-bg-color--light: rgba(var(--default-bg-color),.7); + --md-default-bg-color--lighter: rgba(var(--default-bg-color),.3); + --md-default-bg-color--lightest: rgba(var(--default-bg-color),.12); + --md-typeset-a-color: var(--nri-dark-blue); /* link text */ + --md-accent-fg-color: var(--nri-blue); /* link text hover */ + --md-code-fg-color: rgb(33, 36, 44); /* code element text */ + --md-code-bg-color: #dedede; /* code element background */ + --md-code-hl-name-color: var(--md-code-fg-color); + --md-code-hl-operator-color: var(--md-code-fg-color); + --md-code-hl-punctuation-color: var(--md-code-fg-color); + --md-code-hl-comment-color: rgba(var(--default-fg-color), 0.5); + --md-code-hl-number-color: #d58d15; + --md-code-hl-generic-color: var(--md-code-fg-color); + --md-code-hl-variable-color: var(--md-code-fg-color); + --md-typeset-kbd-color: rgb(226, 226, 226); /* keyboard key background ( tag) */ + --md-typeset-kbd-accent-color: rgb(255, 255, 255, .78); /* keyboard key inner border ( tag) */ + --md-typeset-kbd-border-color: rgb(212, 212, 212); /* text as keyboard outer border ( tag) */ + --active-version-tab-color: var(--nri-dark-blue-color); /* Color for the Text and underline of active HTML tab */ + --active-version-tab: rgb(var(--active-version-tab-color)); /* Text and underline of active HTML tab */ + --active-version-tab-background: rgba(var(--active-version-tab-color),0.05); /* Text and underline of active HTML tab */ + --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ + --note-bg: rgba(var(--note-color),.1); /* Note admonition background */ + --danger-bg: rgba(var(--danger-color),0.1); /* Danger admonition background */ + --info-bg: rgba(var(--info-color),0.1); /* Info admonition background */ + --abstract-bg: rgba(var(--abstract-color),0.1); /* Abstract admonition background */ + --tip-bg: rgba(var(--tip-color),0.1); /* Tip admonition background */ + --success-bg: rgba(var(--success-color),0.1); /* Success admonition background */ + --warning-bg: rgba(var(--warning-color),0.1); /* Warning admonition background */ + --failure-bg: rgba(var(--failure-color),0.1); /* Failure admonition background */ + --question-bg: rgba(var(--question-color),0.1); /* Question admonition background */ + --bug-bg: rgba(var(--bug-color),0.1); /* Bug admonition background */ + --example-bg: rgba(var(--example-color),0.1); /* Example admonition background */ + --quote-bg: rgba(var(--quote-color),0.1); /* Quote admonition background */ + --code-adm-bg: rgba(var(--code-adm-color),0.1); /* Code admonition (custom) background */ + --release-bg: rgba(var(--release-color), 0.1); /* Release admonition (custom) background */ + --tooltip-background: #cbcdd1; /* Tooltip background */ + --tooltip-border-color: #a3a5a9; /* Tooltip border color */ +} + +/* Set rem based on viewport width */ +@media (width > 500px) { + :root { + font-size: calc(16px + 9 * ((100vw - 500px) / (2000 - 500))); + } +} +@media (width <= 500px) { + :root { + font-size: 16px; + } +} + +/* =============================================================== + Cards for ACCESS-Hive Docs navigation, model components, model tabs, MED stuff +*/ +/* Flexbox container for cards*/ +.card-container { + margin: 1em 0; + display: flex; + justify-content: left; + align-items: center; + align-content: center; + flex-wrap: wrap; + column-gap: 1.5rem; + row-gap: 0.8rem; +} + +/* Single card */ +.card-container > * { + border: var(--border-width) solid var(--card-borders); + border-radius: 0.6rem; + box-shadow: 0.28rem 0.28rem 0.45rem var(--card-shadows); + overflow: hidden; +} + +/* Single card hover */ +.card-container > *:hover { + border-color: var(--md-accent-fg-color); + box-shadow: 0.5rem 0.5rem 0.5rem var(--card-shadows); + box-shadow: 0.35rem 0.35rem 0.45rem 0.07rem var(--card-shadows); + transition-property: all; + transition-duration: 0.4s; +} + +.vertical-card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: clamp(100px,30%,250px); + min-height: 0; + container-type: inline-size; + padding: 0.4rem; + gap: 0.2rem; +} + +.horizontal-card { + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + width: 100%; + height: 6rem; + padding: 0.4rem; + gap: 0.4rem; +} + +.card-text-container { + color: var(--md-default-fg-color); + font-size: 1.2em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + line-height: 1.1em; + width: 100%; + height: 100%; + word-break: normal; +} + +.card-image-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100%; +} + +.vertical-card > .card-image-container { + flex-basis: 70%; +} +.vertical-card > .card-text-container { + height: 30%; + flex-grow: 0; + flex-shrink: 0; + font-size: 10cqi; +} + +.horizontal-card > .card-image-container { + flex-basis: 25%; +} +.horizontal-card > .card-text-container { + flex-basis: 75%; +} + +.card-image-container > img { + width: 100%; + height: 100%; + border-radius: 0.35rem; +} + +.horizontal-card > .card-text-container > *:first-child:not(:only-child) { + margin-bottom: 0.5em; +} + +/* Text card */ +/* Group of text cards similar to the ones at the top of the "How to run" pages */ +.text-card-group > p { + display: flex; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + gap: 0; + /* column-gap: 0.5em; + row-gap: 0; */ +} + +.text-card { + color: var(--md-default-fg-color) !important; + font-size: 1.4em; + border: var(--border-width) solid var(--card-borders); + border-radius: 0.6rem; + box-shadow: 0.28rem 0.28rem 0.45rem var(--card-shadows); + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + padding: 0.5rem; + width: max-content; + height: 2.5rem; + margin: 0.5em; +} +.text-card:hover { + border-color: var(--md-accent-fg-color); + box-shadow: 0.35rem 0.35rem 0.45rem 0.07rem var(--card-shadows); + transition-property: all; + transition-duration: 0.4s; +} + +/* =============================================================== + Main body +*/ +/* Grid */ +.md-grid { + max-width: 87%; +} +/* Article */ +.md-content__inner { + margin: 0 1.5rem 1rem; +} + + +/* =============================================================== + Main headings +*/ +h1, h2, h3, h4, h5, h6 { + color: var(--md-default-fg-color) !important; + font-weight: 600 !important; + text-transform: unset !important; +} + +h3 { + font-size: 1rem !important; + margin: 1.3em 0 0.4em !important; +} + +h4 { + font-size: .85rem !important; + margin: 1em 0 0.35em !important; +} + +h5 { + font-size: .8rem !important; + margin: 0.8em 0 0.3em !important; +} + +h6 { + font-size: .75rem !important; + margin: 0.7em 0 0.3em !important; +} + +/* =============================================================== + Homepage +*/ +/* Hide Title */ +h1.homepage { + display: none; +} + +/* + Introductory paragraph +*/ +.introduction { + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + margin-bottom: 0.8rem; + width: 100%; + text-align: center; +} +/* Text */ +.introduction > :first-child { + flex-basis: 80%; + font-size: 1.3rem; +} +.introduction > :first-child > :first-child { + font-weight: 600; + font-size: 1.8rem; +} +/* Logo */ +.introduction > :last-child { + flex-basis: 20%; + display: flex; + align-items: center; +} +.introduction > :last-child > img { + max-height: 5rem; + margin-left: 0.5rem; +} + + +/* Lower text on all homepage cards*/ +:is(.homepage-buttons,.homepage-navigation) .card-text-container { + color: var(--tab-text); + font-size: 12cqi; +} +:is(.homepage-buttons,.homepage-navigation) .card-text-container > * { + border-radius: 0.4rem; + background-color: var(--md-primary-fg-color--dark); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* Buttons After introductory paragraph */ +.homepage-buttons { + justify-content: space-around; + align-items: stretch; + gap: 10%; + flex-wrap: nowrap; + margin-bottom: 1.5rem; +} +.homepage-buttons > * { + width: 100%; +} + +.homepage-buttons > .vertical-card > :first-child { + color: var(--md-default-fg-color); + font-size: 1.2em; +} +.homepage-buttons .card-text-container { + height: 1.8em; + font-size: 2em; +} + +/* Navigation cards in homepage */ +.homepage-navigation { + justify-content: space-around; + flex-wrap: nowrap; +} + +.acknowledgement-img { + height: 10em !important; + width: 100%; + object-fit: cover; + border-radius: 0.5rem; +} + +/* =============================================================== + Back to top button +*/ +.md-top:hover { + background-color: var(--md-primary-fg-color--dark); +} + + +/* =============================================================== + Admonitions + (https://squidfunk.github.io/mkdocs-material/reference/admonitions/) + +/* General style admonition (In markdown --> `!!! ...`) */ +.admonition { + font-size: 1em !important; + position: relative !important; + padding: 0.3em 0.3em 0.3em 1.8em !important; + margin: 0.3em 0 0.8em 0 !important; + border-radius: 0.3rem !important; + border: solid 1.5px var(--md-primary-fg-color) !important; +} +.admonition > p { + margin: 0 !important; +} +/* Hide title of non expandable admonitions if present */ +.admonition > p.admonition-title { + display: none; +} +.admonition::before { + position: absolute; + left: 0.4em; +} + +/* General style expandable admonitions (In markdown --> `??? ...`) */ +details { + font-size: 1em !important; + border-radius: 0.3rem !important; + border: solid 1.5px var(--md-primary-fg-color) !important; +} +details > summary { + border-radius: 0.3rem !important; +} +details[open] > summary { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +details > summary::before { + background-color: transparent !important; + mask-image: none !important; +} +details > p { + margin: 0.3em 0 !important; +} + +/* note */ +.note { + border-color: var(--note) !important; + background-color: var(--note-bg) !important; +} +.note > summary { + background-color: var(--note-bg) !important; +} +.note > summary::after { + color: var(--note) !important; +} +.note:not(details)::before, +.note > summary::before { + font-family: "fontawesome" !important; + content: '\f303' !important; + color: var(--note) !important; +} +/* info */ +.info { + border-color: var(--info) !important; + background-color: var(--info-bg) !important; +} +.info > summary { + background-color: var(--info-bg) !important; +} +.info > summary::after { + color: var(--info) !important; +} +.info:not(details)::before, +.info > summary::before { + font-family: "fontawesome" !important; + content: '\f05a' !important; + color: var(--info) !important; +} +/* danger */ +.danger { + border-color: var(--danger) !important; + background-color: var(--danger-bg) !important; +} +.danger > summary { + background-color: var(--danger-bg) !important; +} +.danger > summary::after { + color: var(--danger) !important; +} +.danger:not(details)::before, +.danger > summary::before { + font-family: "fontawesome" !important; + content: '\f0e7' !important; + color: var(--danger) !important; +} +/* abstract */ +.abstract { + border-color: var(--abstract) !important; + background-color: var(--abstract-bg) !important; +} +.abstract > summary { + background-color: var(--abstract-bg) !important; +} +.abstract > summary::after { + color: var(--abstract) !important; +} +.abstract:not(details)::before, +.abstract > summary::before { + font-family: "fontawesome" !important; + content: '\f02d' !important; + color: var(--abstract) !important; +} +/* tip */ +.tip { + border-color: var(--tip) !important; + background-color: var(--tip-bg) !important; +} +.tip > summary { + background-color: var(--tip-bg) !important; +} +.tip > summary::after { + color: var(--tip) !important; +} +.tip:not(details)::before, +.tip > summary::before { + font-family: "fontello" !important; + content: "\e806" !important; + color: var(--tip) !important; +} +/* success */ +.success { + border-color: var(--success) !important; + background-color: var(--success-bg) !important; +} +.success > summary { + background-color: var(--success-bg) !important; +} +.success > summary::after { + color: var(--success) !important; +} +.success:not(details)::before, +.success > summary::before { + font-family: "fontawesome" !important; + content: "\f00c" !important; + color: var(--success) !important; +} +/* warning */ +.warning { + border-color: var(--warning) !important; + background-color: var(--warning-bg) !important; +} +.warning > summary { + background-color: var(--warning-bg) !important; +} +.warning > summary::after { + color: var(--warning) !important; +} +.warning:not(details)::before, +.warning > summary::before { + font-family: "fontello" !important; + content: "\e800" !important; + color: var(--warning) !important; +} +/* failure */ +.failure { + border-color: var(--failure) !important; + background-color: var(--failure-bg) !important; +} +.failure > summary { + background-color: var(--failure-bg) !important; +} +.failure > summary::after { + color: var(--failure) !important; +} +.failure:not(details)::before, +.failure > summary::before { + font-family: "fontawesome" !important; + content: "\58" !important; + color: var(--failure) !important; +} +/* question */ +.question { + border-color: var(--question) !important; + background-color: var(--question-bg) !important; +} +.question > summary { + background-color: var(--question-bg) !important; +} +.question > summary::after { + color: var(--question) !important; +} +.question:not(details)::before, +.question > summary::before { + font-family: "fontawesome" !important; + content: "\3f" !important; + color: var(--question) !important; +} +/* bug */ +.bug { + border-color: var(--bug) !important; + background-color: var(--bug-bg) !important; +} +.bug > summary { + background-color: var(--bug-bg) !important; +} +.bug > summary::after { + color: var(--bug) !important; +} +.bug:not(details)::before, +.bug > summary::before { + font-family: "fontawesome" !important; + content: "\f188" !important; + color: var(--bug) !important; +} +/* example */ +.example { + border-color: var(--example) !important; + background-color: var(--example-bg) !important; +} +.example > summary { + background-color: var(--example-bg) !important; +} +.example > summary::after { + color: var(--example) !important; +} +.example:not(details)::before, +.example > summary::before { + font-family: "fontawesome" !important; + content: "\f492" !important; + color: var(--example) !important; +} +/* quote */ +.quote { + border-color: var(--quote) !important; + background-color: var(--quote-bg) !important; +} +.quote > summary { + background-color: var(--quote-bg) !important; +} +.quote > summary::after { + color: var(--quote) !important; +} +.quote:not(details)::before, +.quote > summary::before { + font-family: "fontawesome" !important; + content: "\f10e" !important; + color: var(--quote) !important; +} +/* code (custom admonition) */ +.admonition.code, +details.code { + border-color: var(--code-adm) !important; + background-color: var(--code-adm-bg) !important; +} +:is(details,.admonition).code > summary { + background-color: var(--code-adm-bg) !important; +} +:is(details,.admonition).code > summary::after { + color: var(--code-adm) !important; +} +:is(details,.admonition).code:not(details)::before, +:is(details,.admonition).code > summary::before { + font-family: "fontawesome" !important; + content: "\f121" !important; + color: var(--code-adm) !important; +} + +/* not-supported */ +.not-supported { + border-color: var(--danger) !important; + background-color: var(--danger-bg) !important; +} +.not-supported > summary { + background-color: var(--danger-bg) !important; +} +.not-supported > summary::after { + color: var(--danger) !important; +} +.not-supported:not(details)::before, +.not-supported > summary::before { + font-family: "fontawesome" !important; + content: '\f057' !important; + color: var(--danger) !important; +} + +/* release */ +.release { + border-color: var(--release) !important; + background-color: var(--release-bg) !important; +} +.release > summary { + background-color: var(--release-bg) !important; +} +.release > summary::after { + color: var(--release) !important; +} +.release:not(details)::before, +.release > summary::before { + font-family: "fontawesome" !important; + content: '\f135' !important; + color: var(--release) !important; +} + +/* =============================================================== + Left Navigation and right "On this page" navigation +*/ +.md-nav--primary { + font-size: 1.7em; +} + +.md-nav--secondary { + font-size: 1.5em; +} + +.md-nav:not(.md-nav--primary) { + border-left: 1px solid var(--navigation-borders); +} + +/* Make passed items lighter */ +.md-nav__link--passed:not(.md-nav__link--active):not(:hover) { + color: var(--md-default-fg-color--lighter) !important; +} + +/* Add top margin above the first child in left navigation */ +.md-nav--primary .md-nav .md-nav__item:first-child { + margin-top: 1em; +} + +/* Hide navigation part toggling from burger menu if it has no subpages (e.g. Home) */ +.md-nav__item--active [data-md-level="1"].md-nav:not(:has(li)) { + visibility: hidden; +} + +/* =============================================================== + Main body content +*/ +.md-main__inner { + margin-top: 1.2em; +} + +/* =============================================================== + Footer +*/ +.md-footer-meta.md-typeset.md-grid { + color: var(--md-footer-fg-color--light); + padding: 0.2rem; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: stretch; + gap: 0.1rem; +} + +.md-footer-meta.md-typeset.md-grid > * { + color: var(--md-footer-fg-color--light); + display: inline-flex; + flex-direction: column; +} + +/* Funding */ +.funding { + flex-basis: 20%; +} + +/* Partners */ +.partners { + flex-basis: 80%; +} + +/* Text */ +:is(.funding,.partners) > *:first-child { + font-size: 1.2em; + font-weight: 500; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 0; + height: 20%; +} + +/* Logos */ +:is(.funding,.partners) > *:last-child { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + flex-grow: 0; + height: 80%; +} + +:is(.funding,.partners) > *:last-child a { + max-width: calc(3vw + 3rem); + max-height: 100%; + padding: 0.5rem; +} + +:is(.funding,.partners) > *:last-child a > img { + margin: auto; + max-height: 4rem; +} +.md-footer-meta__inner > * { + display: flex; + justify-content: center; + align-items: center; + margin: 0.5rem; + padding: 0; +} + +.md-copyright { + width: auto; +} + +.md-social > * { + display: flex; + justify-content: center; + align-items: center; +} + +.md-footer hr { + border-bottom: 0.03rem solid rgba(var(--tab-text-color),0.5); + display: flow-root; + margin: 0 0.2rem; +} + +.separation { + height: 80%; + width: 0.1rem; + border-radius: 1rem; + background-color: var(--md-footer-fg-color--light); + align-self: center; +} + +/* =============================================================== + Header +*/ +/* Main title */ +.md-header__title { + margin: 0 0.2em 0 0.3em !important; + flex-shrink: 1; + position: relative; +} + +/* Main logo */ +.md-header__button:hover { + opacity: 1; +} +.md-header__button.md-logo { + display: flex; + align-items: center; + height: 100%; +} +.md-header__button.md-logo img { + height: 85%; +} +/* Banner */ +.md-header__inner { + padding: 0.5em 0; + height: 4rem; + margin: 0 auto; +} + +/* Adjust anchors to links */ +:target::before { + content: ""; + display: block; + height: 1rem; /* This identifies the distance of the element from the banner when clicking on an achor link */ + margin-top: -1rem; /* This should be match the height with the sign switched */ +} + + +/* Tab section */ +.md-tabs { + background-color: var(--md-primary-fg-color--dark); +} + +/* Unselected tab */ +.md-tabs__item { + text-align: center; + height: min-content; + transition: background-color 0.5s; + color: var(--tab-text-light); +} + +/* Headings in the nav bar */ +.md-tabs__link { + font-weight: 500; + margin-top: 0; + padding: 0.8em 0; + font-size: 1.5em; +} + +/* Selected tab */ +.md-tabs__item--active { + color: var(--tab-text); +} + +.md-tabs__item--active, .md-tabs__link { + opacity: 1; +} + +/* Tab hover state */ +.md-tabs__item:hover { + transition-duration: 0.4s; + color: var(--tab-text); +} + +/* =============================================================== + Header Buttons CSS - "Hive Forum", "ACCESS-NRI", "Contribute" +*/ +.header-btn-container { + max-width: 20rem; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: stretch; + gap: 0.8rem; + margin: 0 .5rem; +} + +.header-btn { + flex-basis: 33.333%; + flex-grow: 1; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 0.2rem; + border-radius: 0.3rem; + border: 1px solid; + padding: 0 0.3em; + height: 1.6rem; + color: var(--md-primary-bg-color); +} + +.header-btn:hover { + transition-duration: 0.3s; + transition-property: all; +} +/* Hive Forum btn */ +.header-btn:first-child { + border-color: var(--nri-orange); +} +.header-btn:first-child:hover { + background-color: rgba(var(--nri-orange-color),0.14); +} +/* ACCESS-NRI btn */ +.header-btn:nth-child(2) { + border-color: var(--nri-blue); +} +.header-btn:nth-child(2):hover { + background-color: rgba(var(--nri-blue-color),0.14); +} +/* Contribute btn */ +.header-btn:last-child { + border-color: var(--md-primary-bg-color); +} +.header-btn:last-child:hover { + background-color: rgba(var(--primary-bg-color),0.14); +} + +/* btn logo wrapper */ +.header-btn >:first-child { + flex-basis: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; +} + +/* btn logo */ +.header-btn >:first-child > * { + font-size: 1.5em; +} + +/* btn logo */ +.header-btn:nth-child(-n + 2) >:first-child > * { + height: 1em; + width: auto; +} + +/* btn text */ +.header-btn >:last-child { + flex-basis: 75%; + text-align: center; + white-space: nowrap; +} + +/* =============================================================== + References +*/ +.references { + font-size:0.8em; +} + +/* =============================================================== + Show different markers for different hierarchy of points (up to 3d hierarchy) +*/ +ul:not([class^='md-']) li { + list-style-type: disc; +} + +ul:not([class^='md-']) li ul li { + list-style-type: circle; +} + +ul:not([class^='md-']) li ul li ul li { + list-style-type: square; +} + +/* =============================================================== + Code block +*/ +pre { + display: flow-root !important; + text-align: left !important; + padding: 0 !important; + margin: 0.5em 0 !important; +} + +pre>code { + white-space: pre-wrap !important; + padding: 0.5em 0.8em !important; + word-break: break-all !important; +} + +/* Copy icon turning orange when hovering over it*/ +pre > button:is(:hover,:focus).md-clipboard { + color: var(--md-primary-fg-color--dark) !important; +} + +/* =============================================================== + Terminal animations +*/ +::part(terminal-window) { + background-color: var(--animated-terminal-background); + color: var(--animated-terminal-text); + font-family: var(--md-code-font-family); + font-weight: unset; + font-size: .7rem; +} + +::part(input-character) { + color: var(--animated-terminal-buttons); +} + +::part(directory) { + color: var(--animated-terminal-directory); +} + +::part(fast-button), ::part(restart-button), ::part(img-icon) { + color: var(--animated-terminal-buttons); + font-weight: 700; +} + +::part(fast-button):hover, ::part(restart-button):hover, ::part(img-icon):hover { + color: var(--animated-terminal-buttons-hover); +} + +/* Try to format like the output of `ls` command */ +.ls-output-format { + word-spacing: 2em; + word-break: normal; +} + +img.terminal-switch { + position: absolute; + right: 0; + top: -0.5em; + height: 1.5rem; + margin: 0.5rem 0.2rem; +} + +img.terminal-switch:hover { + cursor: pointer; +} + +.terminal-switch-container { + position: relative; +} + +.terminal-switch-tooltip { + position: absolute; + display: inline-block; + z-index: 1; + right: 2em; + top: 2em; + max-width: 30vw; + font-size: 0.7em; + background-color: var(--tooltip-background); + border: solid 1.5px var(--tooltip-border-color); + border-radius: 0.3rem; + padding: 0.5em; + visibility: hidden; + opacity: 0; + transition: opacity 0.35s ease-in-out; +} + +img.terminal-switch:hover ~ .terminal-switch-tooltip { + visibility: visible; + opacity: 1; +} + +.visible { + visibility: visible; + opacity: 1; +} + +.hidden { + visibility: hidden; +} + +/* =============================================================== + Virtural terminal colours for Spack and Git output +*/ + +.spack-red { + color: #FF6E67; +} +.spack-highlighted, +.git-highlighted { + color: #FFFFFF; + font-weight: 600; +} +.spack-cyan { + color: cyan; +} +.spack-indigo { + color: #6871FF; +} +.spack-green, +.git-green { + color: #00C200; +} +.spack-pink { + color: #CA30C7; +} +.spack-grey { + color: #686868; +} + +.spack::part(directory), +.spack ::part(directory) { + color: #60FA67; +} + +.git-red { + color: #C91A00; +} +.git-cyan { + color: #00C6C7; +} + +/* =============================================================== + General styling for html tabs +*/ +.tabLabels { + position: relative; + box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset; + display: flex; + flex-wrap: wrap; + width: fit-content; + overflow: auto; + margin-top: 1em; + gap: 1px; + font-size: 0.9em; +} + +/* Style the buttons that are used to open the tab content */ +.tabLabels button { + color: var(--md-default-fg-color--light); + border-bottom: 0.1rem solid transparent; + border-radius: 0.6rem 0.6rem 0 0; + cursor: pointer; + flex-shrink: 0; + font-weight: 700; + padding: 0.78125em 1.25em 0.625em; + scroll-margin-inline-start: 1rem; + transition: background-color .25s; + white-space: nowrap; + width: auto; + -webkit-tap-highlight-color: transparent; +} + +/* Change background color of buttons on hover */ +.tabLabels button:hover { + background-color: var(--active-version-tab-background); +} + +/* Create an active/current tablink class */ +.tabLabels button.activeTab { + color: var(--active-version-tab); + border-bottom: solid 2px currentColor; + transition: border-bottom .2s; + background-color: var(--active-version-tab-background); +} + +/* Style the tab content */ +[tabcontentfor] { + display: none; +} +[tabcontentfor].activeTab { + display: contents; +} + +/* =============================================================== + External links +*/ +.external-link::after { + font-family: "fontello"; + content: '\e804'; + vertical-align: super; + font-size: 0.5em; + margin-left: 0.2em; + display: inline; +} + + +/* =============================================================== + Miscellaneous +*/ +.keep-blanks { + white-space: pre; +} + +.centered { + display: block; + margin-left: auto; + margin-right: auto; +} + +img.intro-img { + max-height: 12rem; + max-width: 40%; + margin: 0 0 0.5rem 1rem; + float: right; +} + +/* Aspect ratios */ +.aspect-ratio1to1 { + aspect-ratio: 1/1; +} + +.aspect-ratio2to1 { + aspect-ratio: 2/1; +} + +/* Gifs, videos and example images (For example the ones in 'how to run' a model */ +.example-img { + display: block; + width: 90%; + border-radius: 0.2rem; +} + +/* Justified text */ +.justified { + text-align: justify; +} + +/* Image background */ +.white-background { + background-color: #FFFFFF; +} + +/* With borders */ +.round-edges { + border-radius: 0.6rem; +} + +/* Add padding to image container */ +.with-padding { + padding: 0.4rem !important; +} + +.bold { + font-weight: 600 !important; +} + +/* image cover */ +.img-cover { + object-fit: cover !important; +} + +.img-contain { + object-fit: contain !important; +} + +.nri-link-color { + color: var(--md-typeset-a-color); +} + +.nri-blue-color { + color: var(--nri-blue); +} + +.nri-light-blue-color { + color: var(--nri-light-blue); +} + +.nri-dark-blue-color { + color: var(--nri-dark-blue); +} + +.nri-orange-color { + color: var(--nri-orange); +} + +.nri-green-color { + color: var(--nri-green); +} + +.small-text { + font-size: 0.92em !important; +} + +.med-text { + font-size: 1.2em !important; +} + +.large-text { + font-size: 1.4em !important; +} + +.display-block { + display: block; +} + +.vertical-card-half-width { + flex-direction: column; + max-width: 48%; + height: 20em; +} + +.green_prompt_output { + color: #00C202 +} + +.red_prompt_output { + color: #CA1A01; +} + +/* Style for icons before text (used for example in User Support and Contribute pages) */ +.icon-before-text { + margin-right: 0.5em; + font-size: 1.5rem; + width: 1.5rem; +} +/* =============================================================== + Media queries for website responsiveness +*/ + +@media screen and (width < 800px) { + /* Make gap scale with viewport width */ + .homepage-buttons { + gap: 5vw; + } + /* Hide upper text in homepage buttons */ + .homepage-buttons > .vertical-card > :first-child { + display: none; + } + /* Lower text in homepage buttons */ + .homepage-buttons > .vertical-card > :last-child { + font-size: calc(2.9vw + 0.15rem); + } + /* Homepage buttons Cards */ + .homepage-buttons > .vertical-card { + background-color: var(--md-primary-fg-color--dark); + height: 8vw; + border-radius: 2vw; + } +} + +@media screen and (width > 650px) { + .small-card { + max-height: 5rem; + max-width: 40%; + } +} +@media screen and (width <= 650px) { + .vertical-card { + width: 40%; + } + + /* Change the horizontal card to be rendered as a vertical one with aspect-ratio 1 */ + .horizontal-card { + align-items: center; + flex-direction: column; + height: auto; + aspect-ratio: 1; + width: 40%; + container-type: inline-size; + } + .horizontal-card > .card-text-container { + height: 30%; + flex: 0 0 auto; + font-size: 10cqi; + font-weight: 600; + } + .horizontal-card > .card-text-container > *:last-child:not(:only-child) { + display: none; + } + .horizontal-card > .card-text-container > *:first-child:not(:only-child) { + margin-bottom: 0; + } + .horizontal-card > .card-image-container { + flex-basis: 70%; + } + /* Wrap homepage navigation cards */ + .homepage-navigation { + flex-wrap: wrap; + } + + /* Make squared btn */ + .header-btn { + flex-basis: 0; + flex-grow: 0; + aspect-ratio: 1; + justify-self: start; + height: 2rem; + } + /* Increase btn Logos */ + .header-btn > :first-child > * { + font-size: 1.8em; + } + /* Hide btn Text */ + .header-btn >:last-child { + display: none; + } + + /* Homepage introduction paragraph */ + /* Upper text */ + .introduction > :first-child > :first-child { + font-size: calc(4.9vw + 0.15rem); + } + /* Lower text */ + .introduction > :first-child > :last-child { + font-size: calc(2.9vw + 0.15rem); + } + + /* Footer */ + :is(.funding,.partners) > *:first-child { + font-size: calc(1vw + 0.5rem); + } + :is(.funding,.partners) > *:last-child a { + max-width: calc(6vw + 2rem); + } + + .md-footer-meta__inner { + flex-direction: column; + } + .md-footer-meta__inner > * { + gap: 1rem; + } +} + +@media screen and (width <= 450px) { + /* Hide title in header */ + .md-header__title { + visibility: hidden; + } +} + +/* Keep logo always visible for mobile devices */ +@media screen and (max-width: 76.1875em) { + .md-header__button.md-logo { + display: flex; + } +} \ No newline at end of file diff --git a/documentation/docs/fontello/LICENSE.txt b/documentation/docs/fontello/LICENSE.txt new file mode 100644 index 0000000..3c9de20 --- /dev/null +++ b/documentation/docs/fontello/LICENSE.txt @@ -0,0 +1,21 @@ +Font license info + + +## Entypo + + Copyright (C) 2012 by Daniel Bruce + + Author: Daniel Bruce + License: SIL (http://scripts.sil.org/OFL) + Homepage: http://www.entypo.com + + +## Zocial + + Copyright (C) 2012 by Sam Collins + + Author: Sam Collins + License: MIT (http://opensource.org/licenses/mit-license.php) + Homepage: http://zocial.smcllns.com/ + + diff --git a/documentation/docs/fontello/README.txt b/documentation/docs/fontello/README.txt new file mode 100644 index 0000000..d870892 --- /dev/null +++ b/documentation/docs/fontello/README.txt @@ -0,0 +1,75 @@ +This webfont is generated by https://fontello.com open source project. + + +================================================================================ +Please, note, that you should obey original font licenses, used to make this +webfont pack. Details available in LICENSE.txt file. + +- Usually, it's enough to publish content of LICENSE.txt file somewhere on your + site in "About" section. + +- If your project is open-source, usually, it will be ok to make LICENSE.txt + file publicly available in your repository. + +- Fonts, used in Fontello, don't require a clickable link on your site. + But any kind of additional authors crediting is welcome. +================================================================================ + + +Comments on archive content +--------------------------- + +- /font/* - fonts in different formats + +- /css/* - different kinds of css, for all situations. Should be ok with + twitter bootstrap. Also, you can skip style and assign icon classes + directly to text elements, if you don't mind about IE7. + +- demo.html - demo file, to show your webfont content + +- LICENSE.txt - license info about source fonts, used to build your one. + +- config.json - keeps your settings. You can import it back into fontello + anytime, to continue your work + + +Why so many CSS files ? +----------------------- + +Because we like to fit all your needs :) + +- basic file, .css - is usually enough, it contains @font-face + and character code definitions + +- *-ie7.css - if you need IE7 support, but still don't wish to put char codes + directly into html + +- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face + rules, but still wish to benefit from css generation. That can be very + convenient for automated asset build systems. When you need to update font - + no need to manually edit files, just override old version with archive + content. See fontello source code for examples. + +- *-embedded.css - basic css file, but with embedded WOFF font, to avoid + CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. + We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` + server headers. But if you ok with dirty hack - this file is for you. Note, + that data url moved to separate @font-face to avoid problems with + + + + + + + + + +
+

fontello font demo

+ +
+
+
+
+ icon-alert0xe800 +
+
+ icon-cc0xe801 +
+
+ icon-cc-by0xe802 +
+
+ icon-key0xe803 +
+
+
+
+ icon-logout0xe804 +
+
+ icon-group-10xe805 +
+
+ icon-tip_icon0xe806 +
+
+
+
Generated by fontello.com
+ + diff --git a/documentation/docs/fontello/font/fontello.eot b/documentation/docs/fontello/font/fontello.eot new file mode 100644 index 0000000..1aadc6b Binary files /dev/null and b/documentation/docs/fontello/font/fontello.eot differ diff --git a/documentation/docs/fontello/font/fontello.svg b/documentation/docs/fontello/font/fontello.svg new file mode 100644 index 0000000..9ce303a --- /dev/null +++ b/documentation/docs/fontello/font/fontello.svg @@ -0,0 +1,24 @@ + + + +Copyright (C) 2024 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + diff --git a/documentation/docs/fontello/font/fontello.ttf b/documentation/docs/fontello/font/fontello.ttf new file mode 100644 index 0000000..af780a1 Binary files /dev/null and b/documentation/docs/fontello/font/fontello.ttf differ diff --git a/documentation/docs/fontello/font/fontello.woff b/documentation/docs/fontello/font/fontello.woff new file mode 100644 index 0000000..e6b7c2d Binary files /dev/null and b/documentation/docs/fontello/font/fontello.woff differ diff --git a/documentation/docs/fontello/font/fontello.woff2 b/documentation/docs/fontello/font/fontello.woff2 new file mode 100644 index 0000000..aed28a1 Binary files /dev/null and b/documentation/docs/fontello/font/fontello.woff2 differ diff --git a/documentation/docs/js/custom-tags.js b/documentation/docs/js/custom-tags.js new file mode 100644 index 0000000..b94abf7 --- /dev/null +++ b/documentation/docs/js/custom-tags.js @@ -0,0 +1,48 @@ +'use strict'; + +// Create an HTML tag to render the not-supported danger admonition +class NotSupported extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = `
+ NOT directly supported by ACCESS-NRI +

+ The information below can be useful for the ACCESS community, + but is not directly supported by ACCESS-NRI unless stated otherwise. +

+
+ ` + } +} + +// Create an HTML tag to render the references +class References extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + let inner = this.innerHTML.split("\n") + let ul = document.createElement("ul") + inner.forEach((item) => { + item = item.trim() + if (item != "") { + let li = document.createElement("li") + item.startsWith('- ') ? li.innerHTML = item.slice(2) : li.innerHTML = item + ul.appendChild(li) + } + }) + this.innerHTML = `
+
References
+
+ ${ul.outerHTML} +
+ ` + } +} + +customElements.define("custom-not-supported", NotSupported) +customElements.define("custom-references", References) \ No newline at end of file diff --git a/documentation/docs/js/miscellaneous.js b/documentation/docs/js/miscellaneous.js new file mode 100644 index 0000000..5832dca --- /dev/null +++ b/documentation/docs/js/miscellaneous.js @@ -0,0 +1,276 @@ +'use strict'; + +/* Hide Table of Content items that match one of the following criteria: +* - has the 'no-toc' class +* - has the 'h1' class +* - its heading has a `display: none` style (e.g. when it is inside a tab that is not active) +*/ +function hideTocItems() { + const no_toc_classes = ['no-toc', 'h1'] + let toc_items = document.querySelectorAll('[aria-label="On this page"] .md-nav__item') + toc_items.forEach(item => { + let parag_id = item.querySelector('a').href.split('#')[1]; + let parag = document.getElementById(parag_id) + if (parag && no_toc_classes.some(className => parag.classList.contains(className))) { + item.style.display = 'none' + } + }) +} + +// Add buttons at the top of each table column (when hovered) to sort it +function sortTables() { + let tables = document.querySelectorAll("article table:not([class])"); + tables.forEach(table => new Tablesort(table)); +} + +/* + Add functionality to tabs +*/ +function tabFunctionality() { + let activeEl = document.activeElement; + // If tab is activeElement (for example if a link points to an ID + // inside the tab content/button), make that tab active + if (activeEl?.parentElement.classList.contains("tabLabels")) { + activeEl.blur(); + openTab(activeEl); + } else { + // Otherwise first check if a tab was open and a page reloaded, and open the same tab, + // otherwise open the tab that has the .activeTab class, otherwise open the first tab + document.querySelectorAll(".tabLabels").forEach(tabLabels => { + let label = tabLabels.getAttribute("label"); + let tabID; + if (sessionStorage.getItem(`tabs-label=${label}`)) { + tabID = document.getElementById(tabID) ? sessionStorage.getItem(`tabs-label=${label}`) : tabLabels.firstElementChild.id; + } else if (tabLabels.querySelector(".activeTab")) { + tabID = tabLabels.querySelector(".activeTab").id; + } else { + tabID = tabLabels.firstElementChild.id; + } + openTab(document.getElementById(tabID)); + }) + } + // Add click event to tab buttons + let tabButtons = document.querySelectorAll(".tabLabels > button"); + tabButtons.forEach(button=>{ + button.addEventListener('click', (e) => openTab(e.currentTarget)); + }) + + // Add click event for links to tab IDs + document.querySelectorAll('[href^="#"]:not([class^="md"])').forEach(el => { + let href = el.getAttribute('href'); + let tabEl = document.getElementById(href.slice(1,)) + if (tabEl?.parentElement.classList.contains("tabLabels")) { + el.addEventListener("click",(e) => openTab(tabEl), false); + } + }) + + function openTab(tab) { + let label = tab.parentElement.getAttribute('label'); + let index = Array.from(tab.parentElement.children).indexOf(tab)+1; + // Remove active classes from tabs with matching labels + document.querySelectorAll(`.tabLabels[label="${label}"] > .activeTab`).forEach(elem => { + elem.classList.remove('activeTab'); + }); + // Remove active classes from contents whose none of their associated tabs IDs are activeTabs + document.querySelectorAll('[tabcontentfor]').forEach(elem => { + let tabcontentfor = elem.getAttribute('tabcontentfor'); + if ( + ! tabcontentfor.split(' ').some(tabID => { + return document.getElementById(tabID).classList.contains('activeTab') + }) + ) { + elem.classList.remove('activeTab'); + } + }); + // Add active classes to tab labels + document.querySelectorAll(`.tabLabels[label=${label}] > :nth-child(${index})`) + .forEach(button => {button.classList.add('activeTab')}); + // Add active classes to contents whose any associated tabs IDs are activeTabs + document.querySelectorAll('[tabcontentfor]').forEach(elem => { + let tabcontentfor = elem.getAttribute('tabcontentfor'); + if ( + tabcontentfor.split(' ').some(tabID => { + return document.getElementById(tabID).classList.contains('activeTab') + }) + ) { + elem.classList.add('activeTab'); + } + }); + // Add tab ID hash to URL + history.pushState(null, null, `#${tab.id}`); + // Save active tab to sessionStorage + sessionStorage.setItem(`tabs-label=${label}`,`${tab.id}`); + } +} + + +/* + Make links that go to a different website 'external' by adding the + target="_blank" attribute, and add an external-link icon to them. +*/ +function makeLinksExternal() { + // Links to be opened in a new tab + document.querySelectorAll("a[href^='http']:not([href^='https://access-hive.org.au'])") + .forEach(link => { + link.setAttribute('target','_blank'); + }); + // Add external link icon only to some external links + document.querySelectorAll("article a[href^='http']:not([href^='https://access-hive.org.au']):not(:is(.vertical-card,.horizontal-card,.text-card))") + .forEach(link => { + link.classList.add('external-link'); + }); +} + + +/* + Add button to toggle terminal-animations for the whole page (next to the page title) +*/ +function toggleTerminalAnimations() { + if (document.querySelector('terminal-window')) { + const COOKIE_TEXT = 'ACCESS-Hive-Docs-animated-terminal-state'; + const SWITCH_IMG = '/assets/terminal_animation_switch.png'; + const SWITCH_IMG_INACTIVE = '/assets/terminal_animation_switch_inactive.png'; + + function getState() { + return localStorage.getItem(COOKIE_TEXT) || 'active'; + } + + function setStateCookie(state) { + localStorage.setItem(COOKIE_TEXT, state); + } + + function setSwitchIcon(element, state) { + if (state === 'active') { + element.classList.add('hidden'); + } else { + element.classList.remove('hidden'); + } + } + + function applyStateToTerminalWindows(state) { + let terminalWindows = document.querySelectorAll('terminal-window'); + if (state === 'active') { + terminalWindows.forEach(t => { + t.removeAttribute('static'); + }) + } else { + terminalWindows.forEach(t => { + t.setAttribute('static',""); + }) + } + } + + function applyState(container, state) { + // Change the switch icon and title + setSwitchIcon(container.children[1], state); + setSwitchTooltipText(container.querySelector('.terminal-switch-tooltip'), state); + // Apply the state to terminal windows + applyStateToTerminalWindows(state); + } + + function setSwitchTooltipText(element, state) { + let word = state === 'active' ? 'disable' : 'enable'; + element.innerHTML = ` + Terminal animations are ${state}. Click to ${word} them.

+ In this documentation, the same code is sometimes shown in a code block + and also as a terminal animation.
+ The code blocks show the commands to be run in a terminal. They can be easily copied + by clicking on the icon over the right side of the code block.
+ The terminal animations are produced using + animated-terminal.js + and provide examples of the output to expect when the commands are run. + Sometimes they might slightly differ from the actual outputs. + ` + } + + function toggleState(event) { + const newstate = getState() === 'active' ? 'inactive' : 'active'; + applyState(event.currentTarget, newstate); + setStateCookie(newstate); + } + + // Create the Animation switch + const terminalAnimationsSwitch = document.createElement('img'); + terminalAnimationsSwitch.setAttribute('src',SWITCH_IMG); + terminalAnimationsSwitch.classList.add('terminal-switch'); + const terminalAnimationsSwitchInactive = document.createElement('img'); + terminalAnimationsSwitchInactive.classList.add('terminal-switch'); + terminalAnimationsSwitchInactive.setAttribute('src',SWITCH_IMG_INACTIVE); + // Create the Animation Switch tooltip + const terminalAnimationsTooltip = document.createElement('div'); + terminalAnimationsTooltip.classList.add('terminal-switch-tooltip'); + terminalAnimationsTooltip.addEventListener("mouseenter", (event) => { + terminalAnimationsTooltip.classList.add('visible'); + }); + terminalAnimationsTooltip.addEventListener("mouseleave", (event) => { + terminalAnimationsTooltip.classList.remove('visible'); + }); + // Create the Animation Switch Container + const terminalAnimationsSwitchContainer = document.createElement('div'); + terminalAnimationsSwitchContainer.classList.add('terminal-switch-container'); + terminalAnimationsSwitchContainer.appendChild(terminalAnimationsSwitch); + terminalAnimationsSwitchContainer.appendChild(terminalAnimationsSwitchInactive); + terminalAnimationsSwitchContainer.appendChild(terminalAnimationsTooltip); + terminalAnimationsSwitchContainer.addEventListener('click', toggleState, false); + let state = getState(); + applyState(terminalAnimationsSwitchContainer, state); + // Place the Animation switch within the document + const h1 = document.querySelector('h1'); + h1.parentElement.insertBefore(terminalAnimationsSwitchContainer, h1); + } +} + +/* + Fit text to div if overflowing (for 'card-text-container' and 'fitText' class) +*/ +function fitText() { + const coeff = 0.9; + function isOverflowing(el) { + return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth; + } + function fit(el) { + el.style.fontSize = null; + while (isOverflowing(el)) { + el.style.fontSize = `${parseFloat(getComputedStyle(el).fontSize) * coeff}px`; + } + } + const observer = new ResizeObserver(entries => { + entries.forEach(entry => fit(entry.target)); + }) + document.querySelectorAll('.card-text-container,.fit-text').forEach(el => { + observer.observe(el); + }) +} + + +/* + Make footnote citations link to article +*/ +function makeCitationLinks() { + let match; + let href; + document.querySelectorAll('.footnote [id^="fn:"] > p').forEach(el => { + if (match = el.innerHTML.match('${el.innerHTML}`; + } else if (match = el.innerHTML.match('URL: ${el.innerHTML}`; + } + }) +} + +// Join all functions +function main() { + tabFunctionality(); + hideTocItems(); + makeLinksExternal(); + fitText(); + toggleTerminalAnimations(); + makeCitationLinks(); + sortTables(); +} + +// Run all functions +window.onload = () => document$.subscribe(() => main()); \ No newline at end of file diff --git a/documentation/docs/pages/index.md b/documentation/docs/pages/index.md new file mode 100644 index 0000000..3b4e8b9 --- /dev/null +++ b/documentation/docs/pages/index.md @@ -0,0 +1,3 @@ + +Welcome to the WOMBAT docs! + diff --git a/documentation/hooks/hide_pages_url_segment.py b/documentation/hooks/hide_pages_url_segment.py new file mode 100644 index 0000000..bb7f074 --- /dev/null +++ b/documentation/hooks/hide_pages_url_segment.py @@ -0,0 +1,9 @@ +# Change the URL segment for pages in MkDocs to hide the "/pages" prefix, so that pages inside the +# "pages" directory are served directly at the root URL. +from mkdocs.plugins import event_priority +@event_priority(-100) +def on_page_markdown(markdown, *, page, config, files): + if page.file.url.startswith("pages/"): + page.file.url = page.file.url.removeprefix("pages/") + page.file.dest_uri = page.file.dest_uri.removeprefix("pages/") + page.file.abs_dest_path = page.file.abs_dest_path.removeprefix("pages/") \ No newline at end of file diff --git a/documentation/mkdocs.yml b/documentation/mkdocs.yml new file mode 100755 index 0000000..da4d977 --- /dev/null +++ b/documentation/mkdocs.yml @@ -0,0 +1,146 @@ +# This file uses the following environment variables set within the build workflow: +# - SITE_URL: the URL of the site (Falls back to the default URL) +# For example, for PR-previews, SITE_URL is set to /pr-preview-NUM +site_name: wombat + +# Site URL +site_url: !ENV [SITE_URL, "http://access-nri.github.io/wombat/"] + +# Git repository (Adds a link to the GitHub repository at the top) +repo_url: https://github.com/ACCESS-NRI/GFDL-generic-tracers +repo_name: ACCESS-NRI/GFDL-generic-tracers +edit_uri: blob/main/documentation/docs/ #hopefully will fix the edit button from 404'ing, https://github.com/mkdocs/mkdocs/issues/2416 + +# Theme +theme: + name: material + custom_dir: overrides + palette: + # Palette toggle for light mode + - media: "(prefers-color-scheme: light)" + scheme: custom-light + primary: none + accent: none + toggle: + icon: material/theme-light-dark + name: Switch to dark mode + # Palette toggle for dark mode + - media: "(prefers-color-scheme: dark)" + primary: none + accent: none + scheme: custom-dark + toggle: + icon: material/theme-light-dark + name: Switch to light mode + + features: + - content.action.edit # if works, will turn on the "edit on GitHub feature" https://github.com/squidfunk/mkdocs-material/issues/5261 + - navigation.instant + - navigation.tracking # The URL in the address bar is automatically updated with active anchor + - navigation.indexes + # - navigation.tabs # Tabs at the top + # - navigation.tabs.sticky + - search.suggest + - search.highlight + - search.share + - content.code.copy # for displaying copy icon at top right in code snippets + - toc.follow # the sidebar is automatically scrolled to the active anchor + + logo: assets/ACCESS_icon_HIVE.png + favicon: assets/ACCESS_icon_HIVE.png + icon: + edit: material/pencil + view: material/eye +copyright: Copyright © 2025 ACCESS-NRI + +plugins: +# - include-configuration-stubs: +# repo: ACCESS-NRI/wombat +# main_website: +# pattern: "dev-* release-*" +# ref_type: branch +# preview_website: +# pattern: "" +# ref_type: branch +# stubs_parent_url: pages/configurations +# stubs_nav_path: Configurations +# stubs_dir: documentation/stub +# + - git-revision-date-localized: + type: date + enable_creation_date: false + - search: + separator: '[\s\-,:!=\[\]()"/]+|(?!\b)(?=[A-Z][a-z])|\.(?!\d)|&[lg]t;' + - macros + - bibtex: + bib_file: references.bib + csl_file: https://raw.githubusercontent.com/citation-style-language/styles/26eccff9e537f71494a4da7b91afac1adf571dc9/apa.csl + - events: + events_dir: community_resources/events/events + +markdown_extensions: + - attr_list + - abbr + - md_in_html + - admonition + - pymdownx.details + - pymdownx.superfences + - pymdownx.inlinehilite + - pymdownx.caret + - pymdownx.mark + - pymdownx.tilde + - pymdownx.snippets + - pymdownx.highlight + - pymdownx.emoji: + emoji_index: !!python/name:material.extensions.emoji.twemoji + emoji_generator: !!python/name:materialx.emoji.to_svg + - pymdownx.tabbed: + alternate_style: true + - pymdownx.keys + - pymdownx.arithmatex: + generic: true + - def_list + - footnotes + - tables + - toc: + title: On this page + +# Navigation +nav: + - Home: index.md + +# Footer +extra: + generator: false + social: + - icon: fontawesome/brands/bluesky + link: https://bsky.app/profile/access-nri.bsky.social + name: ACCESS-NRI on Bluesky + - icon: fontawesome/brands/linkedin + link: https://www.linkedin.com/in/access-nri + name: ACCESS-NRI on Linkedin + +extra_css: + - "https://fonts.googleapis.com/icon?family=Material+Icons" # Material Icons Reference - https://material.io/resources/icons/?style=baseline + - fontello/css/fontello-codes.css + - fontello/css/fontello-ie7-codes.css + - fontello/css/fontello-ie7.css + - fontello/css/fontello.css + - css/custom.css + +extra_javascript: + - javascripts/mathjax.js # For pymdownx.arithmatex extension + - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js # For pymdownx.arithmatex extension + - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js # For tablesort functionality + - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal@3.0/animated-terminal.min.js # Terminal animations + # - js/custom-tags.js + # - js/miscellaneous.js + +# Automatically reload page when running `mkdocs serve`, for any +# of the following files outside of the 'docs' directory +watch: + - mkdocs.yml + - overrides/ + +hooks: + - hooks/hide_pages_url_segment.py diff --git a/documentation/overrides/partials/copyright.html b/documentation/overrides/partials/copyright.html new file mode 100644 index 0000000..3f6bb16 --- /dev/null +++ b/documentation/overrides/partials/copyright.html @@ -0,0 +1,41 @@ + + +{#- + This file was automatically generated - do not edit +-#} +
+ {% if config.copyright %} +
+
+ + + + + {{ config.copyright }} +
+
+ {% endif %} + {% if not config.extra.generator == false %} + Made with + + Material for MkDocs + + {% endif %} +
diff --git a/documentation/references.bib b/documentation/references.bib new file mode 100644 index 0000000..e69de29 diff --git a/documentation/requirements.txt b/documentation/requirements.txt new file mode 100644 index 0000000..690e6d2 --- /dev/null +++ b/documentation/requirements.txt @@ -0,0 +1,7 @@ +mkdocs-material==9.6.11 +mkdocs-git-revision-date-localized-plugin==1.2.0 +mkdocs-macros-plugin==1.0.4 +mkdocs-bibtex==4.4.0 +pypandoc_binary==1.15 +git+https://github.com/rbeucher/mkdocs_events_plugin.git +git+https://github.com/ACCESS-NRI/mkdocs_include_configuration_stubs_plugin.git \ No newline at end of file