Imageomics · jasonam84 · Apr 17, 2026
diff --git a/css/header-footer.css b/css/header-footer.css
diff --git a/css/search.css 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
@@ -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
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About | Imageomics Institute</title>
+    <link rel="stylesheet" href="../css/style.css" />
+    <script src="../js/script.js" defer></script>
+    <script src="../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/code-of-conduct.html b/html/about/code-of-conduct.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code of Conduct | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/collaborators.html b/html/about/collaborators.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Collaborators | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/community-values.html b/html/about/community-values.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Community Values | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/faculty-staff.html b/html/about/faculty-staff.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Institute Faculty &amp; Staff | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/imageomics-in-the-news.html b/html/about/imageomics-in-the-news.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Imageomics In the News | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/mailing-list.html b/html/about/mailing-list.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Subscribe to our Mailing List | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>
diff --git a/html/about/nextgens.html b/html/about/nextgens.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NextGens | Imageomics Institute</title>
+    <link rel="stylesheet" href="../../css/style.css" />
+    <script src="../../js/script.js" defer></script>
+    <script src="../../js/load-components.js" defer></script>
+</head>
+<body>
+    <div id="header-placeholder"></div>
+    <main></main>
+    <div id="footer-placeholder"></div>
+</body>
+</html>