From 662d146ac57689a9fe4c321e70982c1878841404 Mon Sep 17 00:00:00 2001 From: Jason Amo-Mensah Date: Thu, 14 May 2026 11:50:18 -0400 Subject: [PATCH] texts for most of the about pages --- css/header-footer.css | 160 +++++++++++++++---- css/style.css | 263 +++++++++++++++++++++++++++++++ html/about/code-of-conduct.html | 65 +++++++- html/about/collaborators.html | 41 ++++- html/about/community-values.html | 30 +++- html/about/mailing-list.html | 19 ++- html/about/nextgens.html | 71 ++++++++- html/about/visitors.html | 34 +++- html/components/header.html | 14 +- js/load-components.js | 3 + js/script.js | 25 +++ 11 files changed, 686 insertions(+), 39 deletions(-) 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:

+ +
    +
  • + Listen to understand. When one person talks, others listen. +
    • +
  • + Speak to be understood. We use lay terms and are patient with people who are not experts in our specific field. We are all learning, no matter who we are. +
    • +
  • + Embrace “Yes and...” Focus on possibilities instead of obstacles. Embrace others' ideas and honor divergence of thought. +
    • +
  • + Take space / make space. Those who tend to talk a lot are intentional about letting others talk first, while those who tend to hold back are intentional about contributing. +
    • +
  • + Beware of blind spots. We do not know what we do not know. We are vigilant for differences among our experiences and positions. +
    • +
  • + Respect time. Once a meeting or session time concludes, we need to move on. Be proactive in scheduling time for follow-up and ongoing in-depth conversations. +
    • +
  • + Care for each other. We bring our full selves to the community, and we look out for each other wholeheartedly. +
    • +
+ +
+

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. +
  2. Tell someone you trust.
    3. +
  3. Report the incident to Sam Stevens, Diane, or Tanya.
    4. +
+

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.

+
+ +
+
    +
  • Conservation International
    • +
  • Cornell University
    • +
  • Drexel Metadata Research Center
    • +
  • Ecole Polytechnic Institute and State University
    • +
  • Florida State University
    • +
  • Grevy’s Zebra Trust
    • +
  • iNaturalist
    • +
  • Indiana University
    • +
  • Lincoln Park Zoo
    • +
  • Max Planck Institute
    • +
  • Microsoft AI for Earth
    • +
  • Microsoft Research
    • +
  • Midwest Big Data Hub
    • +
  • Natural History Museum, London
    • +
  • NOAA
    • +
  • Ohio Supercomputer Center
    • +
  • Open Traits Network
    • +
  • Open Tree of Life
    • +
  • Oregon Health and Science University
    • +
  • Smithsonian Institution
    • +
  • South Big Data Hub
    • +
  • The Wilds
    • +
  • University of Florida
    • +
  • University of Illinois – Urbana-Champaign
    • +
  • University of Minnesota
    • +
  • University of Pennsylvania
    • +
  • University of Washington
    • +
  • U.S. Fish and Wildlife Service
    • +
  • Wild Me
    • +
+
+
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.

+
+ +
+
    +
  • Muhammad Averly*, Ohio State (former)
    • +
  • Harish Babu Manogaran, Virginia Tech
    • +
  • Sowbaranika Balasubramanimam, Ohio State
    • +
  • Meghan Balk, Naturhistorisk Museum
    • +
  • Namrata Banerji, Ohio State
    • +
  • Nicholas Bone, Virginia Tech (former)
    • +
  • Breanna Braasch, Ohio State
    • +
  • Otto Brookes, Bristol University
    • +
  • David Carlyn, Ohio State
    • +
  • Caleb Charpentier, Virginia Tech
    • +
  • Arpita Chowdhury, Ohio State
    • +
  • Tessa Cotron, Ohio State (former)
    • +
  • Elizabeth Daniel, Virginia Tech (former)
    • +
  • Sydney Decker, Ohio State
    • +
  • Amartya Dutta, Virginia Tech
    • +
  • Mohannad Elhamod*, Virginia Tech (former)
    • +
  • Brittany Fischer, Ohio State
    • +
  • Jaimi Gray, Florida Museum of Natural History
    • +
  • Bailey Howell, Virginia Tech
    • +
  • Jay Himanshu Jivandas, Ohio State
    • +
  • Soumyashree Kar, RENCI, University of North Carolina, Chapel Hill
    • +
  • Qwahn Kent, Princeton (former)
    • +
  • Vlada Keskin, Sinclair Community College
    • +
  • Maksim Kholiavchenko, Rensslaer Polytechnic Institute
    • +
  • Mridul Khurana, Virginia Tech
    • +
  • Jihyung Kil, Ohio State
    • +
  • Jenna Kline, Ohio State
    • +
  • Krzysztof Kozak, Sanger Institute (former)
    • +
  • Rachael Laidlow, Bristol University
    • +
  • Christopher Lawrence, Princeton
    • +
  • M. Maruf, Virginia Tech
    • +
  • Kazi Sajeed Mehrab, Virginia Tech
    • +
  • Ekaterina Nepovinnykh, RPI
    • +
  • Dipanjyoti Paul*, Ohio State (former)
    • +
  • Rumali Perera, Ohio State
    • +
  • Jose Luis Poveda Cuellar, Industrial University of Santander
    • +
  • Kaiya Provost*, Ohio State (former)
    • +
  • Reshma Ramesh Babu*, Ohio State (former)
    • +
  • Michelle Ramirez, Ohio State
    • +
  • S M Rayeed, Rensselaer Polytechnic Institute
    • +
  • Andrew Senin, Drexel University
    • +
  • Asheesh Sharma, Bristol University
    • +
  • Alec Sheets, Ohio State (former)
    • +
  • Luke Song, Ohio State
    • +
  • Sam Stevens, Ohio State
    • +
  • Oshane Thomas, Seattle Children's Hospital
    • +
  • Nina can Tiel, EPFL
    • +
  • Princeton Vaughn, Princeton (former)
    • +
  • Jessica Wallace, Ohio State
    • +
  • Clay Washington, Ohio State
    • +
  • Aidan Westphal, Rensselaer Polytechnic Institute
    • +
  • Michelle White, Ohio State (former)
    • +
  • Scott Wolf, Princeton (former)
    • +
  • Lisa Wu, Ohio State
    • +
  • Jake Yablok, Ohio State
    • +
  • Hojin Yoo, Ohio State
    • +
  • Chi Zhang*, Seattle Children's Research Institute (former)
    • +
  • Alison Zhong, Ohio State
    • +
+

*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. +
  2. + Complete our traveler intake form to establish a payee profile in our accounting system. +
    3. +
  3. + 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.
      • +
    +
    4. +
  4. + 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. +
    5. +
  5. + Please save your itemized receipts for all expenses. +
    6. +
+ +

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 @@
  • NextGens
  • Collaborators
  • Contact Us
    • -
  • Visitors to Imageomics Institute
  • Subscribe to our Mailing List
    • +
  • Visitors to Imageomics Institute
  • Research
  • News
  • Events
  • - Tools & Resources + Tools & Resources
  • - Imageomics Conference + Imageomics Conference