diff --git a/css/header-footer.css b/css/header-footer.css index 8fe5e7a..0a914d5 100644 --- a/css/header-footer.css +++ b/css/header-footer.css @@ -37,7 +37,6 @@ .nav { justify-self: center; - white-space: nowrap; } .nav-links { @@ -53,13 +52,15 @@ .nav-links li a { color: var(--site-text); font-weight: 550; - padding: 10px 0; + padding: 10px 0 9px; display: block; transition: color 0.2s ease, border-color 0.2s ease; border-bottom: 2px solid transparent; } -.nav-links li a:hover { +.nav-links li a:hover, +.nav-links li a.is-current, +.dropdown.is-current-section > a { color: var(--site-link); border-color: var(--site-link); } @@ -74,42 +75,85 @@ position: relative; } +.dropdown > a { + display: inline-flex; + align-items: center; + gap: 0.28rem; +} + .dropdown > a:after { - content: ' \25BE'; + content: '\25BE'; + display: inline-block; font-size: 10px; + line-height: 1; + transition: transform 0.18s ease; +} + +.dropdown:hover > a:after, +.dropdown:focus-within > a:after { + transform: rotate(180deg); } .dropdown-menu { - display: none; + display: block; position: absolute; - top: 100%; + top: calc(100% + 8px); left: 0; + z-index: 1002; background-color: var(--site-surface); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + box-shadow: 0 14px 32px rgba(12, 40, 69, 0.13); list-style: none; padding: 10px 0; margin: 0; - min-width: 200px; - border-radius: 5px; + width: max-content; + min-width: 230px; + max-width: min(360px, calc(100vw - 2rem)); + border: 1px solid var(--site-border); + border-radius: 6px; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; +} + +.dropdown-menu::before { + content: ''; + position: absolute; + top: -9px; + left: 0; + right: 0; + height: 9px; } .dropdown-menu li a { - padding: 10px 20px; - white-space: nowrap; + padding: 9px 18px; + white-space: normal; font-weight: 400; color: inherit; + line-height: 1.25; + border-bottom: 0; } .dropdown-parent span { display: block; font-weight: 700; color: var(--site-text); - padding: 14px 20px 6px; + padding: 14px 18px 6px; font-family: 'Source Sans Pro', sans-serif; + font-size: 0.82rem; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.dropdown-menu .dropdown-parent-link > a { + font-weight: 700; + color: var(--site-text); + padding-top: 14px; + padding-bottom: 6px; } .dropdown-subitem a { - padding-left: 34px; + padding-left: 30px; padding-top: 7px; padding-bottom: 7px; font-size: 0.96em; @@ -119,13 +163,19 @@ padding-top: 4px; } -.dropdown-menu li a:hover { +.dropdown-menu li a:hover, +.dropdown-menu li a:focus-visible, +.dropdown-menu li a.is-current { background-color: var(--site-link-soft); color: var(--site-link); + border-bottom: 0; } -.dropdown:hover .dropdown-menu { - display: block; +.dropdown:hover .dropdown-menu, +.dropdown:focus-within .dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); } .header-actions { @@ -423,10 +473,11 @@ right: 0; background: var(--site-surface); border-bottom: 1px solid var(--site-border); - padding: 20px; + padding: 12px 20px 18px; width: 100%; z-index: 999; justify-self: stretch; + box-shadow: 0 12px 22px rgba(12, 40, 69, 0.08); } .nav.active { @@ -446,29 +497,57 @@ .nav-links { flex-direction: column; - gap: 15px; + align-items: stretch; + gap: 2px; padding: 0; } .nav-links li a { - padding: 10px 0; + padding: 11px 0; color: var(--site-text); border-bottom: 2px solid transparent; } + .dropdown > a { + display: flex; + justify-content: space-between; + width: 100%; + } + .dropdown-menu { display: none; position: static; + width: auto; + max-width: none; + min-width: 0; + opacity: 1; + visibility: visible; + transform: none; + transition: none; box-shadow: none; - margin-top: 10px; - padding-left: 20px; + margin: 0 0 8px; + padding: 7px 0; background: var(--site-link-soft); + border: 1px solid var(--site-border); + border-radius: 6px; } .dropdown.active .dropdown-menu { display: block; } + .dropdown.active > a:after { + transform: rotate(180deg); + } + + .dropdown-menu li a { + padding: 9px 14px; + } + + .dropdown-subitem a { + padding-left: 24px; + } + .footer { padding: 30px 20px; } @@ -563,12 +642,13 @@ top: 100%; left: 0; right: 0; - background: #fff; - border-bottom: 1px solid #ddd; - padding: 20px; + background: var(--site-surface); + border-bottom: 1px solid var(--site-border); + padding: 12px 20px 18px; width: 100%; z-index: 999; justify-self: stretch; + box-shadow: 0 12px 22px rgba(12, 40, 69, 0.08); } .nav.active { @@ -581,16 +661,40 @@ .nav-links { flex-direction: column; - gap: 15px; + align-items: stretch; + gap: 2px; padding: 0; } .dropdown-menu { display: none; position: static; + width: auto; + max-width: none; + min-width: 0; + opacity: 1; + visibility: visible; + transform: none; + transition: none; box-shadow: none; - margin-top: 10px; - padding-left: 20px; - background: #f9f9f9; + margin: 0 0 8px; + padding: 7px 0; + background: var(--site-link-soft); + border: 1px solid var(--site-border); + border-radius: 6px; + } + + .dropdown.active .dropdown-menu { + display: block; + } + + .dropdown > a { + display: flex; + justify-content: space-between; + width: 100%; + } + + .dropdown.active > a:after { + transform: rotate(180deg); } } diff --git a/css/style.css b/css/style.css index d8a6a7e..84292da 100644 --- a/css/style.css +++ b/css/style.css @@ -141,6 +141,245 @@ a { max-width: 42rem; } +.policy-page { + padding-bottom: 5rem; +} + +.policy-hero, +.policy-content { + width: min(820px, calc(100% - 2rem)); + margin: 0 auto; +} + +.policy-hero { + padding: 4rem 0 1.5rem; +} + +.policy-hero h1, +.policy-content h2 { + font-family: 'IBM Plex Sans', sans-serif; + color: var(--site-text); +} + +.policy-hero h1 { + position: relative; + margin: 0 0 1rem; + padding-bottom: 0.85rem; + font-size: clamp(2.2rem, 5vw, 3.4rem); + line-height: 1.12; +} + +.policy-hero h1::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 4rem; + height: 4px; + background: var(--site-accent); +} + +.policy-hero p { + max-width: 46rem; + margin: 0; + color: var(--site-text-muted); + font-size: 1.12rem; + line-height: 1.65; +} + +.policy-content { + display: grid; + gap: 0.75rem; + padding-top: 0.5rem; +} + +.policy-content h2 { + margin: 2.1rem 0 0.35rem; + font-size: clamp(1.35rem, 3vw, 1.75rem); + line-height: 1.2; +} + +.policy-content p, +.policy-content li, +.policy-content blockquote { + font-size: 1.08rem; + line-height: 1.68; +} + +.policy-content p { + margin: 0.25rem 0 0; +} + +.policy-section { + padding-top: 0.35rem; +} + +.principles-list { + margin: 0.7rem 0 1rem; + padding-left: 1.35rem; +} + +.principles-list li { + margin-bottom: 0.65rem; + padding-left: 0.15rem; +} + +.principles-list li::marker { + color: var(--site-accent); +} + +.principles-list strong { + color: var(--site-text); +} + +.policy-content ul, +.policy-content ol:not(.principles-list) { + margin: 0.6rem 0 0; + padding-left: 1.35rem; +} + +.policy-content blockquote { + margin: 1rem 0 0; + padding: 0.2rem 0 0.2rem 1rem; + border-left: 3px solid var(--site-link); + color: var(--site-text-muted); + background: transparent; +} + +.policy-content blockquote p { + margin: 0; +} + +.policy-note { + color: var(--site-text-muted); + font-weight: 700; +} + +.policy-content a { + color: var(--site-link); + text-decoration: underline; + text-underline-offset: 0.12em; +} + +.policy-emphasis { + display: block; + margin-top: 1rem; + font-weight: 700; +} + +.travel-steps li { + margin-bottom: 0.85rem; + padding-left: 0.15rem; +} + +.travel-steps li::marker { + color: var(--site-accent); + font-weight: 700; +} + +.travel-steps ul { + margin-top: 0.45rem; +} + +.travel-steps ul li { + margin-bottom: 0.25rem; +} + +.travel-steps ul li::marker { + color: var(--site-text-muted); +} + +.policy-important { + margin-top: 1.25rem; + padding-left: 1rem; + border-left: 3px solid var(--site-accent); + color: var(--site-text-muted); +} + +.policy-important strong { + color: var(--site-text); +} + +.values-content .policy-section + .policy-section { + margin-top: 0.45rem; +} + +.values-content h2 { + letter-spacing: 0.03em; + text-transform: uppercase; +} + +.values-content p { + color: var(--site-text-muted); +} + +.policy-linkout { + margin-top: 1.6rem; + font-weight: 700; +} + +.directory-section, +.nextgens-section { + width: min(1160px, calc(100% - 2rem)); + margin: 1rem auto 0; +} + +.directory-list, +.nextgens-list { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.55rem 1.5rem; + margin: 0; + padding: 0; + list-style: none; + color: var(--site-text-muted); +} + +.directory-list li, +.nextgens-list li { + line-height: 1.45; +} + +.nextgens-list strong { + color: var(--site-text); + font-weight: 700; +} + +.nextgens-note { + margin: 1rem 0 0; + color: var(--site-text-muted); + font-size: 0.95rem; + line-height: 1.5; +} + +.form-embed-section { + width: min(1000px, calc(100% - 2rem)); + margin: 1rem auto 0; +} + +.form-embed { + display: block; + width: 100%; + min-height: 760px; + border: 1px solid var(--site-border); + border-radius: 6px; + background: var(--site-surface); +} + +.form-embed-fallback { + margin: 0.9rem 0 0; + color: var(--site-text-muted); + font-size: 0.98rem; + line-height: 1.5; +} + +.form-embed-fallback a { + color: var(--site-link); + font-weight: 700; + text-decoration: underline; + text-underline-offset: 0.12em; +} + .people-page { padding-bottom: 3.5rem; } @@ -268,12 +507,36 @@ a { grid-template-columns: 1fr; } + .nextgens-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .directory-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { + .policy-page { + padding-bottom: 3.5rem; + } + + .policy-hero { + padding-top: 3.2rem; + } + + .nextgens-list { + grid-template-columns: 1fr; + } + + .directory-list { + grid-template-columns: 1fr; + } + .people-grid { grid-template-columns: 1fr; } diff --git a/html/about/code-of-conduct.html b/html/about/code-of-conduct.html index e88fa75..635ee3d 100644 --- a/html/about/code-of-conduct.html +++ b/html/about/code-of-conduct.html @@ -10,7 +10,70 @@
-
+
+
+

Imageomics Code of Conduct

+

As members of the Imageomics community, we agree to maintain an environment where every person feels welcome to be their true self and speak from the heart. As such, all members of the Imageomics Institute community agree to abide by the principles outlined in our Code of Conduct.

+
+ +
+

Imageomics Code of Conduct

+

We agree as individuals and as a group to:

+ + + +
+

AI Use Policy

+

Borrowed from CRA.

+
    +
  • Allowable use of AI tools that do not share or use the data for training.
  • +
  • Requires permission if recording others. Language to use when requesting permission:
  • +
+
+

“We would like to use <insert tool name here> during this discussion to assist with note-taking. <insert tool name here> records and transcribes audio and can produce a summary of the discussion. The audio and transcription will only be saved and used internally. Please let us know if you object to the use of <insert tool name here>.”

+
+
+ +
+

Scope

+

We abide by these principles in all Imageomics spaces, including but not limited to digital and in-person meetings, formal and informal gatherings, online discussion forums and chat spaces, and field and lab work.

+

Acts of misconduct are prohibited. Those found to engage in misconduct will be subject to dismissal from the project and further actions as directed by the guidelines of the employers, federal law, and the place of incidence.

+
+ +
+

Reporting Misconduct

+

If you believe you have experienced or witnessed misconduct in an Imageomics setting, please take these steps:

+
    +
  1. Document the incident.
  2. +
  3. Tell someone you trust.
  4. +
  5. Report the incident to Sam Stevens, Diane, or Tanya.
  6. +
+

Privacy will be protected to the greatest extent possible.

+
+
+
diff --git a/html/about/collaborators.html b/html/about/collaborators.html index 79b563c..09e680b 100644 --- a/html/about/collaborators.html +++ b/html/about/collaborators.html @@ -10,7 +10,46 @@
-
+
+
+

Collaborators

+

We extend our heartfelt gratitude to our esteemed scientific collaborators whose invaluable contributions are instrumental in driving our research and innovation forward. Their dedication, expertise, and collaborative spirit have enriched our projects and helped us achieve new heights in scientific discovery.

+
+ +
+ +
+
diff --git a/html/about/community-values.html b/html/about/community-values.html index 5629bcf..7c9187b 100644 --- a/html/about/community-values.html +++ b/html/about/community-values.html @@ -10,7 +10,35 @@
-
+
+
+

Community Values

+
+ +
+
+

Transparency

+

We ensure our efforts are clear about assumptions, uncertainty, and limits, and provide open sources of information, processes, and discovery.

+
+ +
+

Accountability

+

We are responsible, individually and collectively, for the outcomes we produce and ensure, to the best of our abilities, that the methods outcome matches intended use.

+
+ +
+

Collaboration

+

We create and nurture collaborative environments and welcome, value, and affirm all members of our community. We also consider how and for whom solutions are created and promote the heterogeneity of perspectives in the creation process. We actively engage others' perspectives, recognize everyone's potential to contribute new ideas, and work together to find creative solutions to complex problems.

+
+ +
+

Safety

+

We ensure our practices are ethical and impartial to the best of our ability. We address ethical issues when we discover them and practice good data governance. We strive to enhance practices while openly addressing those that harm people or the environment.

+
+ +

View the Imageomics Code of Conduct

+
+
diff --git a/html/about/mailing-list.html b/html/about/mailing-list.html index ed9c2a5..3c47dd0 100644 --- a/html/about/mailing-list.html +++ b/html/about/mailing-list.html @@ -10,7 +10,24 @@
-
+
+
+

Subscribe to our Mailing List

+

Stay in the loop with the latest from the Imageomics Institute! Subscribe to our mailing list to get instant updates on upcoming events, workshops, and the most recent news in imageomics. Don't miss out—sign up now for the freshest insights and information!

+
+ +
+ +

+ If the form does not load, open the mailing list signup form. +

+
+
diff --git a/html/about/nextgens.html b/html/about/nextgens.html index 39a7425..e8fc290 100644 --- a/html/about/nextgens.html +++ b/html/about/nextgens.html @@ -10,7 +10,76 @@
-
+
+
+

NextGens

+

Our NextGen community consists of graduate students and postdoctoral researchers who lead our research endeavors in the emerging interdisciplinary field of imageomics. Coming from leading universities nationwide, this next generation of imageomics researchers represent diverse disciplines within the fields of Biological Sciences and Computer Science.

+
+ +
+ +

*NextGen has graduated or transitioned to faculty appointment.

+
+
diff --git a/html/about/visitors.html b/html/about/visitors.html index 2e6409a..492908b 100644 --- a/html/about/visitors.html +++ b/html/about/visitors.html @@ -10,7 +10,39 @@
-
+
+
+

Visiting Traveler Instructions

+

Please follow the procedures outlined below for travel funded by the Imageomics Institute. Failure to comply with these guidelines may result in the forfeiture of approved travel funding.

+
+ +
+
    +
  1. + Review the Ohio State Travel Policy before your departure. By accepting travel funds from the Imageomics Institute you are required to adhere to all federal and university policies. We recommend you review the OSU travel website for additional travel resources. +
  2. +
  3. + Complete our traveler intake form to establish a payee profile in our accounting system. +
  4. +
  5. + Following submission of the traveler intake form our travel coordinator will reach out to OSU's travel agency to book your airfare. +
      +
    • Review the proposed itinerary, provide any frequent flyer account number and TSA PreCheck, if applicable.
    • +
    • Once you approve the airfare, our travel coordinator will book it using a spend authorization (SA) number, and you will receive an email confirmation.
    • +
    • Please note, any airfare must be on a U.S. carrier and in economy/coach to be reimbursed.
    • +
    +
  6. +
  7. + Other travel expenses may be eligible for reimbursement, up to the maximum amount specified by the Imageomics Institute, only if they are pre-approved in advance. +
  8. +
  9. + Please save your itemized receipts for all expenses. +
  10. +
+ +

IMPORTANT: Within 30 days of your travel, you are required to send all itemized receipts directly to imageomics-contact@osu.edu.

+
+
diff --git a/html/components/header.html b/html/components/header.html index 922ce5d..707e461 100644 --- a/html/components/header.html +++ b/html/components/header.html @@ -20,29 +20,31 @@ - +
  • News
  • Events