diff --git a/css/header-footer.css b/css/header-footer.css new file mode 100644 index 0000000..1d478d2 --- /dev/null +++ b/css/header-footer.css @@ -0,0 +1,546 @@ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Source+Sans+Pro:wght@400;600;700&display=swap'); + +.header-banner .header-title, +.footer-section h3 { + font-family: 'IBM Plex Sans', sans-serif; +} + +.nav-links li a, +.dropdown-menu li a, +.footer-section, +.footer-section p, +.footer-bottom { + font-family: 'Source Sans Pro', sans-serif; +} + +.header { + position: sticky; + top: 0; + z-index: 1000; + background-color: var(--site-surface); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + padding: 10px 40px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + gap: 2px; +} + +.logo { + flex-shrink: 0; + justify-self: start; +} + +.logo img { + height: 60px; +} + +.nav { + justify-self: center; + white-space: nowrap; +} + +.nav-links { + list-style: none; + display: flex; + gap: 25px; + margin: 0; + padding: 0; + justify-content: center; + align-items: center; +} + +.nav-links li a { + color: var(--site-text); + font-weight: 550; + padding: 10px 0; + display: block; + transition: color 0.2s ease, border-color 0.2s ease; + border-bottom: 2px solid transparent; +} + +.nav-links li a:hover { + color: var(--site-link); + border-color: var(--site-link); +} + +.nav-links li a:focus-visible { + outline: 2px solid var(--site-link); + outline-offset: 2px; + border-color: var(--site-link); +} + +.dropdown { + position: relative; +} + +.dropdown > a:after { + content: ' \25BE'; + font-size: 10px; +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: var(--site-surface); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + list-style: none; + padding: 10px 0; + margin: 0; + min-width: 200px; + border-radius: 5px; +} + +.dropdown-menu li a { + padding: 10px 20px; + white-space: nowrap; + font-weight: 400; + color: inherit; +} + +.dropdown-parent span { + display: block; + font-weight: 700; + color: var(--site-text); + padding: 14px 20px 6px; + font-family: 'Source Sans Pro', sans-serif; +} + +.dropdown-subitem a { + padding-left: 34px; + padding-top: 7px; + padding-bottom: 7px; + font-size: 0.96em; +} + +.dropdown-parent + .dropdown-subitem a { + padding-top: 4px; +} + +.dropdown-menu li a:hover { + background-color: var(--site-link-soft); + color: var(--site-link); +} + +.dropdown:hover .dropdown-menu { + display: block; +} + +.header-actions { + display: flex; + align-items: center; + gap: 15px; + flex-shrink: 0; + justify-self: end; +} + +.header-banner { + position: relative; + width: 100%; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.header-banner .background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} + +.header-title-box { + background-color: rgba(255, 255, 255, 0.7); + padding: 20px 60px; + border-radius: 10px; + width: calc(100% - 80px); + max-width: 800px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + text-align: center; + z-index: 1; + backdrop-filter: blur(5px); +} + +.header-banner .header-title { + font-size: 3rem; + color: #282828; + font-weight: 700; + margin: 0; + text-align: center; +} + +.header-banner .header-title.no-wrap { + white-space: nowrap; +} + +.footer { + background-color: var(--site-primary); + color: white; + padding: 40px 80px 20px; + margin-top: 0; + font-size: 0.9em; + line-height: 1.6; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + gap: 30px; + margin-bottom: 30px; + max-width: 1200px; + margin: 0 auto 30px; +} + +.footer-section { + flex: 1; + min-width: 260px; +} + +.footer-section.about { + flex: 1.5; +} + +.footer-section.links { + flex: 0.9; +} + +.footer-section.institutes { + flex: 0.9; +} + +.footer-section h3 { + color: #ffffff; + margin-bottom: 15px; + font-size: 1.2em; +} + +.footer-section p, +.footer-section ul { + margin: 0; + padding: 0; + list-style: none; +} + +.footer-section ul li { + margin-bottom: 8px; +} + +.footer-section ul li a { + color: #ffffff; + line-height: 1.8; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: white; + text-decoration: underline; +} + +.footer-hosted { + margin-top: 10px; +} + +.footer-hosted a { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 0.9em; + line-height: 1.25; + color: rgba(255, 255, 255, 0.92); +} + +.footer-github-icon { + width: 24px; + height: 24px; + filter: brightness(0) invert(1); +} + +.footer-section p { + color: rgba(255, 255, 255, 0.8); +} + +.footer-disclaimer { + color: #ffffff; +} + +.nsf-logo-container { + display: flex; + align-items: center; + margin-top: 20px; + gap: 10px; +} + +.nsf-logo-container img { + height: 90px; +} + +.nsf-logo-container p { + font-size: 0.9em; + font-weight: 500; + color: #ffffff; +} + +.footer-bottom { + text-align: center; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.2); + color: #ffffff; +} + +.footer-credit { + margin-top: 8px; + font-size: 0.95em; + color: #ffffff; +} + +.footer-bottom .footer-hosted { + display: flex; + justify-content: center; + width: 100%; +} + +.footer-bottom .footer-hosted a { + font-size: 0.92em; +} + +.footer a, +.footer a:visited { + color: #ffffff; + text-decoration: none; +} + +.footer a:hover, +.footer a:focus { + color: #e6f0ff; + text-decoration: underline; +} + +.hamburger { + display: none; + flex-direction: column; + background: transparent; + border: none; + cursor: pointer; + padding: 5px; + z-index: 1001; + gap: 5px; +} + +.hamburger .bar { + width: 25px; + height: 3px; + background-color: var(--site-link); + transition: 0.3s ease-in-out; + border-radius: 2px; +} + +.hamburger.active .bar:nth-child(1) { + transform: rotate(-45deg) translate(-8px, 8px); +} + +.hamburger.active .bar:nth-child(2) { + opacity: 0; +} + +.hamburger.active .bar:nth-child(3) { + transform: rotate(45deg) translate(-8px, -8px); +} + +@media (max-width: 768px) { + .header { + padding: 10px 20px; + grid-template-columns: auto 1fr auto; + gap: 10px; + } + + .logo { + flex-shrink: 0; + } + + .logo img { + height: 50px; + } + + .nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--site-surface); + border-bottom: 1px solid var(--site-border); + padding: 20px; + width: 100%; + z-index: 999; + justify-self: stretch; + } + + .nav.active { + display: block; + } + + .header-actions { + gap: 5px; + display: flex !important; + z-index: 1001; + justify-self: end; + } + + .hamburger { + display: flex !important; + } + + .nav-links { + flex-direction: column; + gap: 15px; + padding: 0; + } + + .nav-links li a { + padding: 10px 0; + color: var(--site-text); + border-bottom: 2px solid transparent; + } + + .dropdown-menu { + display: none; + position: static; + box-shadow: none; + margin-top: 10px; + padding-left: 20px; + background: var(--site-link-soft); + } + + .dropdown.active .dropdown-menu { + display: block; + } + + .footer { + padding: 30px 20px; + } + + .footer-content { + flex-direction: column; + align-items: center; + text-align: center; + padding-left: 0; + } + + .footer-section { + margin-bottom: 20px; + max-width: 100%; + min-width: unset; + margin-left: 0 !important; + } + + .footer-hosted { + display: flex; + justify-content: center; + width: 100%; + } + + .nsf-logo-container { + justify-content: center; + width: 100%; + margin-left: auto; + margin-right: auto; + } + + .footer-github-icon { + width: 20px; + height: 20px; + } + + .header-banner { + height: 150px; + } + + .header-title-box { + padding: 15px 40px; + width: calc(100% - 60px); + } + + .header-banner .header-title { + font-size: 2rem; + } +} + +@media (max-width: 768px) { + .hamburger { + display: flex !important; + } +} + +.header { + display: flex; + align-items: center; + gap: 16px; + width: 100%; +} + +.nav { + flex: 1 1 auto; + min-width: 0; +} + +.nav-links { + justify-content: center; +} + +.header-actions .hamburger { + flex-shrink: 0; +} + +@media (max-width: 768px) { + .nav { + display: none; + } +} + +@media (max-width: 1024px) and (orientation: portrait) { + .nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #fff; + border-bottom: 1px solid #ddd; + padding: 20px; + width: 100%; + z-index: 999; + justify-self: stretch; + } + + .nav.active { + display: block; + } + + .hamburger { + display: flex !important; + } + + .nav-links { + flex-direction: column; + gap: 15px; + padding: 0; + } + + .dropdown-menu { + display: none; + position: static; + box-shadow: none; + margin-top: 10px; + padding-left: 20px; + background: #f9f9f9; + } +} diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..eb9defc --- /dev/null +++ b/css/search.css @@ -0,0 +1,124 @@ +.search-container { + display: flex; + align-items: center; + flex: 0 1 220px; + max-width: 240px; + min-width: 160px; + background: color-mix(in srgb, var(--site-primary) 8%, white); + border-radius: 20px; + border: 1px solid var(--site-border); + position: relative; + padding: 0 10px; + margin-left: auto; + margin-right: 8px; + overflow: visible; +} + +.search-icon-btn { + background: none; + border: none; + cursor: pointer; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + z-index: 3; +} + +.search-icon-btn img { + height: 20px; + width: 20px; +} + +.search-bar { + flex: 1 1 auto; + min-width: 0; + width: 100%; + border: none; + background: transparent; + padding: 10px 8px; + font-size: 14px; + outline: none; + position: relative; + z-index: 2; +} + +.search-bar::placeholder { + color: var(--site-text-muted); +} + +.search-results { + display: none; + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + background: var(--site-surface); + border: 1px solid var(--site-border); + border-radius: 0 0 4px 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + max-height: 320px; + overflow-y: auto; + z-index: 1000; + min-width: 240px; +} + +.search-results.is-visible { + display: block; +} + +.search-results-list { + padding: 10px 0; +} + +.search-result-item { + display: block; + padding: 12px 15px; + border-bottom: 1px solid var(--site-border); + color: var(--site-text); + transition: background 0.2s ease; +} + +.search-result-item:last-child { + border-bottom: none; +} + +.search-result-item:hover, +.search-result-item:focus-visible { + background: var(--site-link-soft); +} + +.search-result-title { + font-weight: 650; + color: var(--site-link); + margin-bottom: 4px; + font-size: 14px; +} + +.search-result-snippet { + font-size: 12px; + color: var(--site-text-muted); + line-height: 1.4; +} + +.search-no-results { + padding: 16px; + text-align: center; + color: var(--site-text-muted); + font-size: 14px; +} + +@media (max-width: 768px) { + .search-container { + order: 2; + max-width: none; + width: 100%; + margin: 10px 0 0; + } + + .search-results { + min-width: 0; + } +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..0202089 --- /dev/null +++ b/css/style.css @@ -0,0 +1,127 @@ +@import url('header-footer.css'); +@import url('search.css'); + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + --color-lm-primary: #5d8095; + --color-lm-url: #0097b2; + --color-lm-url-10: #0097b21a; + --color-lm-accent: #9bcb5e; + --color-lm-accent-10: #9bcb5e1a; + --color-dm-primary: #5d8095; + --color-dm-url: #0097b2; + --color-dm-accent: #92991c; + --color-dm-accent-10: #92991c1a; + --site-primary: var(--color-lm-primary); + --site-link: var(--color-lm-url); + --site-link-soft: var(--color-lm-url-10); + --site-accent: var(--color-lm-accent); + --site-accent-soft: var(--color-lm-accent-10); + --site-bg: #f7fbfd; + --site-surface: #ffffff; + --site-text: #10263a; + --site-text-muted: #5d6f7c; + --site-border: rgba(93, 128, 149, 0.24); + margin: 0; + background: var(--site-bg); + color: var(--site-text); + font-family: 'Source Sans 3', sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +.page-shell { + min-height: calc(100vh - 220px); +} + +.stub-hero, +.stub-page { + width: min(1100px, calc(100% - 2rem)); + margin: 0 auto; +} + +.stub-hero { + padding: 5rem 0 3rem; +} + +.stub-kicker { + display: inline-block; + padding: 0.35rem 0.7rem; + border-radius: 999px; + background: var(--site-link-soft); + color: var(--site-link); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + font-size: 0.8rem; +} + +.stub-hero h1, +.stub-page h1 { + font-family: 'IBM Plex Sans', sans-serif; + line-height: 1.05; +} + +.stub-hero h1 { + margin: 1rem 0; + font-size: clamp(2.6rem, 7vw, 5rem); + max-width: 10ch; +} + +.stub-hero p, +.stub-page p, +.stub-card p { + font-size: 1.08rem; + line-height: 1.65; +} + +.stub-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + margin: 2rem 0 0; +} + +.stub-card { + padding: 1.3rem; + border-radius: 1.15rem; + background: var(--site-surface); + border: 1px solid var(--site-border); + box-shadow: 0 16px 40px rgba(12, 40, 69, 0.06); +} + +.stub-card h2 { + margin-top: 0; + margin-bottom: 0.5rem; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 1.2rem; +} + +.stub-card a { + color: var(--site-link); + font-weight: 700; +} + +.stub-page { + padding: 4rem 0 5rem; +} + +.stub-page p { + max-width: 42rem; +} + +@media (max-width: 900px) { + .stub-grid { + grid-template-columns: 1fr; + } +} diff --git a/html/about.html b/html/about.html new file mode 100644 index 0000000..1330ff1 --- /dev/null +++ b/html/about.html @@ -0,0 +1,16 @@ + + + + + + About | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/code-of-conduct.html b/html/about/code-of-conduct.html new file mode 100644 index 0000000..e88fa75 --- /dev/null +++ b/html/about/code-of-conduct.html @@ -0,0 +1,16 @@ + + + + + + Code of Conduct | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/collaborators.html b/html/about/collaborators.html new file mode 100644 index 0000000..79b563c --- /dev/null +++ b/html/about/collaborators.html @@ -0,0 +1,16 @@ + + + + + + Collaborators | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/community-values.html b/html/about/community-values.html new file mode 100644 index 0000000..5629bcf --- /dev/null +++ b/html/about/community-values.html @@ -0,0 +1,16 @@ + + + + + + Community Values | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/faculty-staff.html b/html/about/faculty-staff.html new file mode 100644 index 0000000..109bd8a --- /dev/null +++ b/html/about/faculty-staff.html @@ -0,0 +1,16 @@ + + + + + + Institute Faculty & Staff | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/imageomics-in-the-news.html b/html/about/imageomics-in-the-news.html new file mode 100644 index 0000000..646d70a --- /dev/null +++ b/html/about/imageomics-in-the-news.html @@ -0,0 +1,16 @@ + + + + + + Imageomics In the News | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/mailing-list.html b/html/about/mailing-list.html new file mode 100644 index 0000000..ed9c2a5 --- /dev/null +++ b/html/about/mailing-list.html @@ -0,0 +1,16 @@ + + + + + + Subscribe to our Mailing List | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/nextgens.html b/html/about/nextgens.html new file mode 100644 index 0000000..39a7425 --- /dev/null +++ b/html/about/nextgens.html @@ -0,0 +1,16 @@ + + + + + + NextGens | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/vision.html b/html/about/vision.html new file mode 100644 index 0000000..ada3827 --- /dev/null +++ b/html/about/vision.html @@ -0,0 +1,16 @@ + + + + + + The Vision of the Imageomics Institute | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/about/visitors.html b/html/about/visitors.html new file mode 100644 index 0000000..2e6409a --- /dev/null +++ b/html/about/visitors.html @@ -0,0 +1,16 @@ + + + + + + Visitors to Imageomics Institute | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/components/footer.html b/html/components/footer.html new file mode 100644 index 0000000..ae1df6d --- /dev/null +++ b/html/components/footer.html @@ -0,0 +1,38 @@ + diff --git a/html/components/header.html b/html/components/header.html new file mode 100644 index 0000000..922ce5d --- /dev/null +++ b/html/components/header.html @@ -0,0 +1,83 @@ +
+ + + + +
+ + +
+
+ +
+ +
+
diff --git a/html/conference.html b/html/conference.html new file mode 100644 index 0000000..c1a2f02 --- /dev/null +++ b/html/conference.html @@ -0,0 +1,16 @@ + + + + + + Imageomics Conference | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/accommodations.html b/html/conference/accommodations.html new file mode 100644 index 0000000..5e4fced --- /dev/null +++ b/html/conference/accommodations.html @@ -0,0 +1,16 @@ + + + + + + Conference Accommodations | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/agenda.html b/html/conference/agenda.html new file mode 100644 index 0000000..46bac39 --- /dev/null +++ b/html/conference/agenda.html @@ -0,0 +1,16 @@ + + + + + + Conference Agenda | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/nextgen-day-agenda.html b/html/conference/nextgen-day-agenda.html new file mode 100644 index 0000000..3fcd641 --- /dev/null +++ b/html/conference/nextgen-day-agenda.html @@ -0,0 +1,16 @@ + + + + + + NextGen Day Agenda | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/overview.html b/html/conference/overview.html new file mode 100644 index 0000000..6d808a3 --- /dev/null +++ b/html/conference/overview.html @@ -0,0 +1,16 @@ + + + + + + Conference Overview | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/research-lightning-talk-abstracts.html b/html/conference/research-lightning-talk-abstracts.html new file mode 100644 index 0000000..0a354b4 --- /dev/null +++ b/html/conference/research-lightning-talk-abstracts.html @@ -0,0 +1,16 @@ + + + + + + Research Lightning Talk Abstracts | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/resources.html b/html/conference/resources.html new file mode 100644 index 0000000..2eb0bfa --- /dev/null +++ b/html/conference/resources.html @@ -0,0 +1,16 @@ + + + + + + Conference Resources | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/the-wilds-field-trip-schedule.html b/html/conference/the-wilds-field-trip-schedule.html new file mode 100644 index 0000000..d2f11b7 --- /dev/null +++ b/html/conference/the-wilds-field-trip-schedule.html @@ -0,0 +1,16 @@ + + + + + + The Wilds Field Trip Schedule | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/conference/travel-information.html b/html/conference/travel-information.html new file mode 100644 index 0000000..5172776 --- /dev/null +++ b/html/conference/travel-information.html @@ -0,0 +1,16 @@ + + + + + + Conference Travel Information | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/events.html b/html/events.html new file mode 100644 index 0000000..29db245 --- /dev/null +++ b/html/events.html @@ -0,0 +1,16 @@ + + + + + + Events | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/news.html b/html/news.html new file mode 100644 index 0000000..2de9e30 --- /dev/null +++ b/html/news.html @@ -0,0 +1,16 @@ + + + + + + News | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/research.html b/html/research.html new file mode 100644 index 0000000..6975ff4 --- /dev/null +++ b/html/research.html @@ -0,0 +1,16 @@ + + + + + + Research | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/research/projects.html b/html/research/projects.html new file mode 100644 index 0000000..c680e25 --- /dev/null +++ b/html/research/projects.html @@ -0,0 +1,16 @@ + + + + + + Research Projects | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/research/publication-acknowledgements.html b/html/research/publication-acknowledgements.html new file mode 100644 index 0000000..c8060ae --- /dev/null +++ b/html/research/publication-acknowledgements.html @@ -0,0 +1,16 @@ + + + + + + Publication Acknowledgements | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/research/publications.html b/html/research/publications.html new file mode 100644 index 0000000..3a53995 --- /dev/null +++ b/html/research/publications.html @@ -0,0 +1,16 @@ + + + + + + Imageomics Publications | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/research/talks-presentations.html b/html/research/talks-presentations.html new file mode 100644 index 0000000..da05f1a --- /dev/null +++ b/html/research/talks-presentations.html @@ -0,0 +1,16 @@ + + + + + + Talks and Presentations | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources.html b/html/tools-resources.html new file mode 100644 index 0000000..547ecca --- /dev/null +++ b/html/tools-resources.html @@ -0,0 +1,16 @@ + + + + + + Tools & Resources | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/authorship-guidelines.html b/html/tools-resources/authorship-guidelines.html new file mode 100644 index 0000000..46bef13 --- /dev/null +++ b/html/tools-resources/authorship-guidelines.html @@ -0,0 +1,16 @@ + + + + + + Authorship Guidelines | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/data-code-of-conduct-policy.html b/html/tools-resources/data-code-of-conduct-policy.html new file mode 100644 index 0000000..8f802ed --- /dev/null +++ b/html/tools-resources/data-code-of-conduct-policy.html @@ -0,0 +1,16 @@ + + + + + + Data Code of Conduct Policy | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/digital-products-release-licensing-policy.html b/html/tools-resources/digital-products-release-licensing-policy.html new file mode 100644 index 0000000..60bd7cb --- /dev/null +++ b/html/tools-resources/digital-products-release-licensing-policy.html @@ -0,0 +1,16 @@ + + + + + + Digital Products Release and Licensing Policy | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/educational-tools-resources.html b/html/tools-resources/educational-tools-resources.html new file mode 100644 index 0000000..3c12ecd --- /dev/null +++ b/html/tools-resources/educational-tools-resources.html @@ -0,0 +1,16 @@ + + + + + + Educational Tools & Resources | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/fieldwork-safety-plan.html b/html/tools-resources/fieldwork-safety-plan.html new file mode 100644 index 0000000..9e81236 --- /dev/null +++ b/html/tools-resources/fieldwork-safety-plan.html @@ -0,0 +1,16 @@ + + + + + + Fieldwork Safety Plan | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/policies-guidelines.html b/html/tools-resources/policies-guidelines.html new file mode 100644 index 0000000..523b43d --- /dev/null +++ b/html/tools-resources/policies-guidelines.html @@ -0,0 +1,16 @@ + + + + + + Imageomics Policies & Guidelines | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/software-tools-resources.html b/html/tools-resources/software-tools-resources.html new file mode 100644 index 0000000..4f77de4 --- /dev/null +++ b/html/tools-resources/software-tools-resources.html @@ -0,0 +1,16 @@ + + + + + + Software Tools & Resources | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/team-science-tools-resources.html b/html/tools-resources/team-science-tools-resources.html new file mode 100644 index 0000000..dfd42e8 --- /dev/null +++ b/html/tools-resources/team-science-tools-resources.html @@ -0,0 +1,16 @@ + + + + + + Team Science Tools & Resources | Imageomics Institute + + + + + +
+
+ + + diff --git a/html/tools-resources/tool-tutorials.html b/html/tools-resources/tool-tutorials.html new file mode 100644 index 0000000..d0630c1 --- /dev/null +++ b/html/tools-resources/tool-tutorials.html @@ -0,0 +1,16 @@ + + + + + + Tool Tutorials | Imageomics Institute + + + + + +
+
+ + + diff --git a/images/Imageomics-logo.png b/images/Imageomics-logo.png new file mode 100644 index 0000000..3c263d4 Binary files /dev/null and b/images/Imageomics-logo.png differ diff --git a/images/search.png b/images/search.png new file mode 100644 index 0000000..5dc52f9 Binary files /dev/null and b/images/search.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..baad766 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + Imageomics Institute + + + + + +
+
+ + + diff --git a/js/load-components.js b/js/load-components.js new file mode 100644 index 0000000..ae3022c --- /dev/null +++ b/js/load-components.js @@ -0,0 +1,185 @@ +(function() { + 'use strict'; + + const COMPONENT_TEMPLATES = { + header: ` +
+ + + + +
+ + +
+
+ +
+ +
+
`, + footer: ` +` + }; + + function getPathPrefix() { + const path = window.location.pathname; + + if (path.endsWith('/') || (path.endsWith('/index.html') && !path.includes('/html/'))) { + return ''; + } + + const htmlIndex = path.indexOf('/html/'); + if (htmlIndex !== -1) { + const afterHtml = path.substring(htmlIndex + 6); + const depth = (afterHtml.match(/\//g) || []).length; + return '../'.repeat(depth + 1); + } + + return '../'; + } + + function adjustPaths(html, prefix) { + if (!prefix) return html; + + html = html.replace(/src="(images|css|js|html)\//g, `src="${prefix}$1/`); + html = html.replace(/href="(images|css|js|html)\//g, `href="${prefix}$1/`); + html = html.replace(/href="index\.html"/g, `href="${prefix}index.html"`); + html = html.replace(/href="\.\.\/index\.html"/g, `href="${prefix}index.html"`); + + return html; + } + + function renderComponent(targetId, html) { + const target = document.getElementById(targetId); + if (!target) return; + + const prefix = getPathPrefix(); + target.innerHTML = adjustPaths(html, prefix); + + if (targetId === 'header-placeholder') { + if (typeof window.initHamburger === 'function') { + window.initHamburger(); + } + if (typeof window.initSearchUI === 'function') { + window.initSearchUI(); + } + } + } + + function initComponents() { + renderComponent('header-placeholder', COMPONENT_TEMPLATES.header); + renderComponent('footer-placeholder', COMPONENT_TEMPLATES.footer); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initComponents); + } else { + initComponents(); + } +})(); diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..37c8fb7 --- /dev/null +++ b/js/script.js @@ -0,0 +1,165 @@ +document.addEventListener('DOMContentLoaded', () => { + const pagesToIndex = [ + { title: 'About', url: 'html/about.html' }, + { title: 'The Vision of the Imageomics Institute', url: 'html/about/vision.html' }, + { title: 'Community Values', url: 'html/about/community-values.html' }, + { title: 'Code of Conduct', url: 'html/about/code-of-conduct.html' }, + { title: 'Imageomics In the News', url: 'html/about/imageomics-in-the-news.html' }, + { title: 'Institute Faculty & Staff', url: 'html/about/faculty-staff.html' }, + { title: 'NextGens', url: 'html/about/nextgens.html' }, + { title: 'Collaborators', url: 'html/about/collaborators.html' }, + { title: 'Subscribe to our Mailing List', url: 'html/about/mailing-list.html' }, + { title: 'Visitors to Imageomics Institute', url: 'html/about/visitors.html' }, + { title: 'Research', url: 'html/research.html' }, + { title: 'Research Projects', url: 'html/research/projects.html' }, + { title: 'Imageomics Publications', url: 'html/research/publications.html' }, + { title: 'Publication Acknowledgements', url: 'html/research/publication-acknowledgements.html' }, + { title: 'Talks and Presentations', url: 'html/research/talks-presentations.html' }, + { title: 'News', url: 'html/news.html' }, + { title: 'Events', url: 'html/events.html' }, + { title: 'Tools & Resources', url: 'html/tools-resources.html' }, + { title: 'Imageomics Policies & Guidelines', url: 'html/tools-resources/policies-guidelines.html' }, + { title: 'Authorship Guidelines', url: 'html/tools-resources/authorship-guidelines.html' }, + { title: 'Data Code of Conduct Policy', url: 'html/tools-resources/data-code-of-conduct-policy.html' }, + { title: 'Digital Products Release and Licensing Policy', url: 'html/tools-resources/digital-products-release-licensing-policy.html' }, + { title: 'Fieldwork Safety Plan', url: 'html/tools-resources/fieldwork-safety-plan.html' }, + { title: 'Educational Tools & Resources', url: 'html/tools-resources/educational-tools-resources.html' }, + { title: 'Software Tools & Resources', url: 'html/tools-resources/software-tools-resources.html' }, + { title: 'Tool Tutorials', url: 'html/tools-resources/tool-tutorials.html' }, + { title: 'Team Science Tools & Resources', url: 'html/tools-resources/team-science-tools-resources.html' }, + { title: 'Imageomics Conference', url: 'html/conference.html' }, + { title: 'Conference Overview', url: 'html/conference/overview.html' }, + { title: 'Conference Resources', url: 'html/conference/resources.html' }, + { title: 'Conference Accommodations', url: 'html/conference/accommodations.html' }, + { title: 'Conference Travel Information', url: 'html/conference/travel-information.html' }, + { title: 'Conference Agenda', url: 'html/conference/agenda.html' }, + { title: 'NextGen Day Agenda', url: 'html/conference/nextgen-day-agenda.html' }, + { title: 'The Wilds Field Trip Schedule', url: 'html/conference/the-wilds-field-trip-schedule.html' }, + { title: 'Research Lightning Talk Abstracts', url: 'html/conference/research-lightning-talk-abstracts.html' } + ]; + + function initSearchUI() { + const searchContainer = document.getElementById('searchContainer'); + const searchIconBtn = document.getElementById('searchIconBtn'); + const searchBar = document.getElementById('searchBar'); + const searchResults = document.getElementById('searchResults'); + + if (!searchContainer || !searchIconBtn || !searchBar || !searchResults || searchBar.dataset.bound === 'true') { + return; + } + + searchBar.dataset.bound = 'true'; + + const closeResults = () => { + searchResults.classList.remove('is-visible'); + searchResults.innerHTML = ''; + }; + + const renderResults = (matches) => { + if (!matches.length) { + searchResults.innerHTML = '
No matches found.
'; + searchResults.classList.add('is-visible'); + return; + } + + const resultsMarkup = matches.slice(0, 8).map((page) => ` + +
${page.title}
+
${page.url}
+ + `).join(''); + + searchResults.innerHTML = `
${resultsMarkup}
`; + searchResults.classList.add('is-visible'); + }; + + const runSearch = () => { + const query = searchBar.value.trim().toLowerCase(); + if (!query) { + closeResults(); + return; + } + + const matches = pagesToIndex.filter((page) => ( + page.title.toLowerCase().includes(query) || page.url.toLowerCase().includes(query) + )); + + renderResults(matches); + }; + + searchIconBtn.addEventListener('click', () => { + searchBar.focus(); + runSearch(); + }); + + searchBar.addEventListener('input', runSearch); + + document.addEventListener('click', (event) => { + if (!searchContainer.contains(event.target)) { + closeResults(); + } + }); + + searchBar.addEventListener('keydown', (event) => { + if (event.key === 'Escape') { + closeResults(); + searchBar.blur(); + } + }); + } + + window.initHamburger = function initHamburger() { + const hamburger = document.getElementById('hamburger'); + const navMenu = document.querySelector('.nav'); + + if (!hamburger || !navMenu || hamburger.dataset.bound === 'true') { + return; + } + + hamburger.dataset.bound = 'true'; + + hamburger.addEventListener('click', function() { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + document.body.classList.toggle('menu-open'); + }); + + document.addEventListener('click', function(e) { + if (navMenu.classList.contains('active') && + !navMenu.contains(e.target) && + !hamburger.contains(e.target)) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + document.body.classList.remove('menu-open'); + } + }); + + const links = navMenu.querySelectorAll('a'); + links.forEach((link) => { + link.addEventListener('click', function() { + if (!link.closest('.dropdown') || window.innerWidth > 768) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + document.body.classList.remove('menu-open'); + } + }); + }); + + const dropdowns = navMenu.querySelectorAll('.dropdown'); + dropdowns.forEach((dropdown) => { + const link = dropdown.querySelector(':scope > a'); + if (!link) return; + + link.addEventListener('click', function(e) { + if (window.innerWidth <= 768) { + e.preventDefault(); + dropdown.classList.toggle('active'); + } + }); + }); + }; + + window.initHamburger(); + window.initSearchUI = initSearchUI; + window.initSearchUI(); +});