You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by la...@apache.org on 2026/07/22 20:03:18 UTC
(airavata-custos) 01/01: Updated the portal landing page, sidebar, and favicon with the Custos logo
This is an automated email from the ASF dual-hosted git repository.
lahirujayathilake pushed a commit to branch web-changes
in repository https://gitbox.apache.org/repos/asf/airavata-custos.git
commit c27ce1b7603932c3cffe957ed9bef39b66e049f6
Author: lahiruj <la...@gmail.com>
AuthorDate: Wed Jul 22 16:03:06 2026 -0400
Updated the portal landing page, sidebar, and favicon with the Custos logo
---
web/public/brand/logo/custos-logo.svg | 30 +++++
web/public/brand/logo/custos-mark.svg | 4 +
web/public/landing/index.html | 244 ++++++++++++++++++----------------
web/src/app/layout.tsx | 1 +
web/src/shared/layout/Sidebar.tsx | 9 +-
5 files changed, 167 insertions(+), 121 deletions(-)
diff --git a/web/public/brand/logo/custos-logo.svg b/web/public/brand/logo/custos-logo.svg
new file mode 100644
index 000000000..87e857740
--- /dev/null
+++ b/web/public/brand/logo/custos-logo.svg
@@ -0,0 +1,30 @@
+<svg width="770" height="258" viewBox="0 0 770 258" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M94.9427 158.316C95.5842 158.534 96.3132 159.808 96.719 160.395C98.659 163.2 100.848 165.879 103.287 168.262C113.736 178.529 127.836 184.225 142.484 184.097C156.604 183.883 170.792 178.367 180.695 168.184C180.495 171.668 180.592 176.129 180.59 179.691L180.583 199.337C180.58 216.64 180.419 234.263 180.659 251.546C178.463 252.446 174.459 253.425 172.113 253.976C160.066 256.903 147.654 258.034 135.278 257.333C134.592 257.218 133.377 257.221 132.603 257.168C130.827 257.042 129.053 2 [...]
+<mask id="path-2-outside-1_92_622" maskUnits="userSpaceOnUse" x="229.694" y="48.7671" width="540" height="160" fill="black">
+<rect fill="white" x="229.694" y="48.7671" width="540" height="160"/>
+<path d="M272.302 206.218C259.086 206.218 248.848 202.825 241.586 196.039C234.325 189.253 230.694 179.295 230.694 166.165V91.3693C230.694 78.2395 234.325 68.2816 241.586 61.4954C248.848 54.7092 259.086 51.3161 272.302 51.3161H301.493V65.9212H272.302C265.622 65.9212 260.176 67.9127 255.964 71.8959C251.898 75.7316 249.864 80.895 249.864 87.3861V170.148C249.864 176.639 251.898 181.876 255.964 185.86C260.176 189.695 265.622 191.613 272.302 191.613H301.493V206.218H272.302Z"/>
+<path d="M355.887 207.767C330.182 207.767 317.329 194.49 317.329 167.935V51.3161H336.499V171.697C336.499 178.778 338.169 184.163 341.51 187.851C344.995 191.392 349.788 193.162 355.887 193.162C361.987 193.162 366.779 191.392 370.265 187.851C373.75 184.163 375.493 178.778 375.493 171.697V51.3161H394.663V167.935C394.663 194.49 381.738 207.767 355.887 207.767Z"/>
+<path d="M419.585 191.613H443.33C451.608 191.613 457.563 189.105 461.193 184.089C464.969 179.073 466.857 172.877 466.857 165.501C466.857 159.747 465.768 154.805 463.59 150.675C461.556 146.396 459.015 142.856 455.965 140.053C452.915 137.25 448.776 134.004 443.548 130.316C438.029 126.48 433.527 123.014 430.042 119.916C426.702 116.67 423.87 112.613 421.546 107.745C419.222 102.876 418.061 97.0491 418.061 90.2629C418.061 78.4608 421.546 69.0192 428.517 61.938C435.488 54.8567 445.146 51.3161 4 [...]
+<path d="M528.425 206.218V65.9212H497.927V51.3161H578.093V65.9212H547.595V206.218H528.425Z"/>
+<path d="M635.647 207.767C622.141 207.767 611.83 204.3 604.714 197.367C597.598 190.285 594.04 180.475 594.04 167.935V89.599C594.04 77.0593 597.598 67.3226 604.714 60.3889C611.83 53.3077 622.141 49.7671 635.647 49.7671C649.299 49.7671 659.683 53.3077 666.799 60.3889C673.915 67.3226 677.473 77.0593 677.473 89.599V167.935C677.473 180.475 673.915 190.285 666.799 197.367C659.683 204.3 649.299 207.767 635.647 207.767ZM635.647 193.162C642.037 193.162 647.411 191.318 651.768 187.63C656.124 183.7 [...]
+<path d="M702.253 191.613H725.997C734.275 191.613 740.23 189.105 743.86 184.089C747.636 179.073 749.524 172.877 749.524 165.501C749.524 159.747 748.435 154.805 746.257 150.675C744.223 146.396 741.682 142.856 738.632 140.053C735.582 137.25 731.443 134.004 726.215 130.316C720.696 126.48 716.194 123.014 712.709 119.916C709.369 116.67 706.537 112.613 704.213 107.745C701.889 102.876 700.728 97.0491 700.728 90.2629C700.728 78.4608 704.213 69.0192 711.184 61.938C718.155 54.8567 727.813 51.3161 [...]
+</mask>
+<path d="M272.302 206.218C259.086 206.218 248.848 202.825 241.586 196.039C234.325 189.253 230.694 179.295 230.694 166.165V91.3693C230.694 78.2395 234.325 68.2816 241.586 61.4954C248.848 54.7092 259.086 51.3161 272.302 51.3161H301.493V65.9212H272.302C265.622 65.9212 260.176 67.9127 255.964 71.8959C251.898 75.7316 249.864 80.895 249.864 87.3861V170.148C249.864 176.639 251.898 181.876 255.964 185.86C260.176 189.695 265.622 191.613 272.302 191.613H301.493V206.218H272.302Z" fill="#FE8C00"/>
+<path d="M355.887 207.767C330.182 207.767 317.329 194.49 317.329 167.935V51.3161H336.499V171.697C336.499 178.778 338.169 184.163 341.51 187.851C344.995 191.392 349.788 193.162 355.887 193.162C361.987 193.162 366.779 191.392 370.265 187.851C373.75 184.163 375.493 178.778 375.493 171.697V51.3161H394.663V167.935C394.663 194.49 381.738 207.767 355.887 207.767Z" fill="#FE8C00"/>
+<path d="M419.585 191.613H443.33C451.608 191.613 457.563 189.105 461.193 184.089C464.969 179.073 466.857 172.877 466.857 165.501C466.857 159.747 465.768 154.805 463.59 150.675C461.556 146.396 459.015 142.856 455.965 140.053C452.915 137.25 448.776 134.004 443.548 130.316C438.029 126.48 433.527 123.014 430.042 119.916C426.702 116.67 423.87 112.613 421.546 107.745C419.222 102.876 418.061 97.0491 418.061 90.2629C418.061 78.4608 421.546 69.0192 428.517 61.938C435.488 54.8567 445.146 51.3161 4 [...]
+<path d="M528.425 206.218V65.9212H497.927V51.3161H578.093V65.9212H547.595V206.218H528.425Z" fill="#FE8C00"/>
+<path d="M635.647 207.767C622.141 207.767 611.83 204.3 604.714 197.367C597.598 190.285 594.04 180.475 594.04 167.935V89.599C594.04 77.0593 597.598 67.3226 604.714 60.3889C611.83 53.3077 622.141 49.7671 635.647 49.7671C649.299 49.7671 659.683 53.3077 666.799 60.3889C673.915 67.3226 677.473 77.0593 677.473 89.599V167.935C677.473 180.475 673.915 190.285 666.799 197.367C659.683 204.3 649.299 207.767 635.647 207.767ZM635.647 193.162C642.037 193.162 647.411 191.318 651.768 187.63C656.124 183.7 [...]
+<path d="M702.253 191.613H725.997C734.275 191.613 740.23 189.105 743.86 184.089C747.636 179.073 749.524 172.877 749.524 165.501C749.524 159.747 748.435 154.805 746.257 150.675C744.223 146.396 741.682 142.856 738.632 140.053C735.582 137.25 731.443 134.004 726.215 130.316C720.696 126.48 716.194 123.014 712.709 119.916C709.369 116.67 706.537 112.613 704.213 107.745C701.889 102.876 700.728 97.0491 700.728 90.2629C700.728 78.4608 704.213 69.0192 711.184 61.938C718.155 54.8567 727.813 51.3161 [...]
+<path d="M272.302 206.218C259.086 206.218 248.848 202.825 241.586 196.039C234.325 189.253 230.694 179.295 230.694 166.165V91.3693C230.694 78.2395 234.325 68.2816 241.586 61.4954C248.848 54.7092 259.086 51.3161 272.302 51.3161H301.493V65.9212H272.302C265.622 65.9212 260.176 67.9127 255.964 71.8959C251.898 75.7316 249.864 80.895 249.864 87.3861V170.148C249.864 176.639 251.898 181.876 255.964 185.86C260.176 189.695 265.622 191.613 272.302 191.613H301.493V206.218H272.302Z" stroke="#FE8C00" s [...]
+<path d="M355.887 207.767C330.182 207.767 317.329 194.49 317.329 167.935V51.3161H336.499V171.697C336.499 178.778 338.169 184.163 341.51 187.851C344.995 191.392 349.788 193.162 355.887 193.162C361.987 193.162 366.779 191.392 370.265 187.851C373.75 184.163 375.493 178.778 375.493 171.697V51.3161H394.663V167.935C394.663 194.49 381.738 207.767 355.887 207.767Z" stroke="#FE8C00" stroke-width="2" mask="url(#path-2-outside-1_92_622)"/>
+<path d="M419.585 191.613H443.33C451.608 191.613 457.563 189.105 461.193 184.089C464.969 179.073 466.857 172.877 466.857 165.501C466.857 159.747 465.768 154.805 463.59 150.675C461.556 146.396 459.015 142.856 455.965 140.053C452.915 137.25 448.776 134.004 443.548 130.316C438.029 126.48 433.527 123.014 430.042 119.916C426.702 116.67 423.87 112.613 421.546 107.745C419.222 102.876 418.061 97.0491 418.061 90.2629C418.061 78.4608 421.546 69.0192 428.517 61.938C435.488 54.8567 445.146 51.3161 4 [...]
+<path d="M528.425 206.218V65.9212H497.927V51.3161H578.093V65.9212H547.595V206.218H528.425Z" stroke="#FE8C00" stroke-width="2" mask="url(#path-2-outside-1_92_622)"/>
+<path d="M635.647 207.767C622.141 207.767 611.83 204.3 604.714 197.367C597.598 190.285 594.04 180.475 594.04 167.935V89.599C594.04 77.0593 597.598 67.3226 604.714 60.3889C611.83 53.3077 622.141 49.7671 635.647 49.7671C649.299 49.7671 659.683 53.3077 666.799 60.3889C673.915 67.3226 677.473 77.0593 677.473 89.599V167.935C677.473 180.475 673.915 190.285 666.799 197.367C659.683 204.3 649.299 207.767 635.647 207.767ZM635.647 193.162C642.037 193.162 647.411 191.318 651.768 187.63C656.124 183.7 [...]
+<path d="M702.253 191.613H725.997C734.275 191.613 740.23 189.105 743.86 184.089C747.636 179.073 749.524 172.877 749.524 165.501C749.524 159.747 748.435 154.805 746.257 150.675C744.223 146.396 741.682 142.856 738.632 140.053C735.582 137.25 731.443 134.004 726.215 130.316C720.696 126.48 716.194 123.014 712.709 119.916C709.369 116.67 706.537 112.613 704.213 107.745C701.889 102.876 700.728 97.0491 700.728 90.2629C700.728 78.4608 704.213 69.0192 711.184 61.938C718.155 54.8567 727.813 51.3161 [...]
+<defs>
+<linearGradient id="paint0_linear_92_622" x1="90.3473" y1="0" x2="90.3473" y2="257.534" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F83700"/>
+<stop offset="1" stop-color="#FE8C00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/brand/logo/custos-mark.svg b/web/public/brand/logo/custos-mark.svg
new file mode 100644
index 000000000..1dd3a8cdf
--- /dev/null
+++ b/web/public/brand/logo/custos-mark.svg
@@ -0,0 +1,4 @@
+<svg viewBox="-38 0 258 258" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M94.9427 158.316C95.5842 158.534 96.3132 159.808 96.719 160.395C98.659 163.2 100.848 165.879 103.287 168.262C113.736 178.529 127.836 184.225 142.484 184.097C156.604 183.883 170.792 178.367 180.695 168.184C180.495 171.668 180.592 176.129 180.59 179.691L180.583 199.337C180.58 216.64 180.419 234.263 180.659 251.546C178.463 252.446 174.459 253.425 172.113 253.976C160.066 256.903 147.654 258.034 135.278 257.3 [...]
+<stop stop-color="#F83700"/>
+<stop offset="1" stop-color="#FE8C00"/>
+</linearGradient></defs></svg>
diff --git a/web/public/landing/index.html b/web/public/landing/index.html
index c524ed940..725d0efce 100644
--- a/web/public/landing/index.html
+++ b/web/public/landing/index.html
@@ -19,77 +19,87 @@
<!--
Default landing page for a Custos deployment. To use your own, replace
this file with your index.html before building the portal; see INSTALL.md.
+ The logo is the shared brand asset at /brand/logo/; the rest is
+ self-contained.
-->
<title>Custos Portal</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
<style>
:root {
- /* Brand tokens: colors are changed here, not in the rules below. */
- --accent: #0F7A6C; /* primary brand color */
- --accent-ink: #0B5A50; /* darker accent for text on light ground */
- --accent-tint: rgba(15, 122, 108, 0.10);
-
- --paper: #F6F8F9; /* page ground */
- --panel: #FFFFFF; /* card ground */
- --line: #D8DfE2; /* borders */
- --ink: #17222B; /* headings, body */
- --muted: #54626E; /* secondary text (AA on paper) */
- --status: #B97F10; /* status dot */
+ /* Brand. The mark's own gradient runs #F83700 to #FE8C00; the tokens
+ below are the readable relatives of it, not the raw brand values. */
+ --brand-hot: #F83700;
+ --brand-warm: #FE8C00;
+
+ --accent: #C2410C; /* solid fills that carry white text */
+ --accent-ink: #B4460B; /* accent as text on paper */
+ --accent-tint: rgba(248, 55, 0, 0.07);
+ --accent-line: rgba(194, 65, 12, 0.28);
+
+ --paper: #FDF8F4;
+ --panel: #FFFFFF;
+ --line: #EADFD5;
+ --ink: #1F1611;
+ --muted: #6B5A4E;
+ --status: #9A6410;
--btn-text: #FFFFFF;
+ --glow: rgba(248, 55, 0, 0.10);
}
@media (prefers-color-scheme: dark) {
:root {
- --accent: #35B2A0;
- --accent-ink: #6FCFC1;
- --accent-tint: rgba(53, 178, 160, 0.14);
- --paper: #0E141A;
- --panel: #141C24;
- --line: #263340;
- --ink: #E7EDF1;
- --muted: #9AA9B5;
- --status: #D9A13B;
- --btn-text: #08211D;
+ --accent: #FE8C00;
+ --accent-ink: #FFA94D;
+ --accent-tint: rgba(254, 140, 0, 0.09);
+ --accent-line: rgba(254, 140, 0, 0.30);
+ --paper: #14100D;
+ --panel: #1D1815;
+ --line: #332A24;
+ --ink: #F5EDE6;
+ --muted: #A8968A;
+ --status: #E0A64A;
+ --btn-text: #1F1005;
+ --glow: rgba(248, 55, 0, 0.16);
}
}
:root[data-theme="light"] {
- --accent: #0F7A6C;
- --accent-ink: #0B5A50;
- --accent-tint: rgba(15, 122, 108, 0.10);
- --paper: #F6F8F9;
+ --accent: #C2410C;
+ --accent-ink: #B4460B;
+ --accent-tint: rgba(248, 55, 0, 0.07);
+ --accent-line: rgba(194, 65, 12, 0.28);
+ --paper: #FDF8F4;
--panel: #FFFFFF;
- --line: #D8DFE2;
- --ink: #17222B;
- --muted: #54626E;
- --status: #B97F10;
+ --line: #EADFD5;
+ --ink: #1F1611;
+ --muted: #6B5A4E;
+ --status: #9A6410;
--btn-text: #FFFFFF;
+ --glow: rgba(248, 55, 0, 0.10);
}
:root[data-theme="dark"] {
- --accent: #35B2A0;
- --accent-ink: #6FCFC1;
- --accent-tint: rgba(53, 178, 160, 0.14);
- --paper: #0E141A;
- --panel: #141C24;
- --line: #263340;
- --ink: #E7EDF1;
- --muted: #9AA9B5;
- --status: #D9A13B;
- --btn-text: #08211D;
+ --accent: #FE8C00;
+ --accent-ink: #FFA94D;
+ --accent-tint: rgba(254, 140, 0, 0.09);
+ --accent-line: rgba(254, 140, 0, 0.30);
+ --paper: #14100D;
+ --panel: #1D1815;
+ --line: #332A24;
+ --ink: #F5EDE6;
+ --muted: #A8968A;
+ --status: #E0A64A;
+ --btn-text: #1F1005;
+ --glow: rgba(248, 55, 0, 0.16);
}
- * {
- box-sizing: border-box;
- }
+ * { box-sizing: border-box; }
- html {
- scroll-behavior: smooth;
- }
+ html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
- html {
- scroll-behavior: auto;
- }
+ html { scroll-behavior: auto; }
}
body {
@@ -97,15 +107,14 @@
background: var(--paper);
color: var(--ink);
font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
+ -webkit-font-smoothing: antialiased;
}
.mono {
font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
- a {
- color: var(--accent-ink);
- }
+ a { color: var(--accent-ink); }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--accent);
@@ -130,52 +139,53 @@
text-decoration: none;
}
- .skip:focus {
- left: 12px;
- top: 12px;
+ .skip:focus { left: 12px; top: 12px; }
+
+ /* The mark carries the brand gradient. Its counter is negative space, so
+ it reads on either ground without a second copy of the file. */
+ .mark {
+ width: 27px;
+ height: 27px;
+ display: block;
+ flex: none;
+ }
+
+ .brand-logo {
+ height: 24px;
+ width: auto;
+ display: block;
+ flex: none;
}
/* header */
header {
border-bottom: 1px solid var(--line);
+ position: sticky;
+ top: 0;
+ background: color-mix(in srgb, var(--paper) 88%, transparent);
+ backdrop-filter: blur(8px);
+ z-index: 5;
}
.bar {
display: flex;
align-items: center;
gap: 20px;
- padding: 18px 0;
+ padding: 16px 24px;
flex-wrap: wrap;
}
.logo {
display: flex;
align-items: center;
- gap: 10px;
- font-weight: 800;
- letter-spacing: -0.01em;
+ gap: 11px;
+ font-weight: 700;
+ letter-spacing: -0.015em;
color: var(--ink);
text-decoration: none;
font-size: 17px;
}
- .logo .mark {
- width: 26px;
- height: 26px;
- border-radius: 6px;
- background: var(--accent);
- display: inline-block;
- position: relative;
- }
-
- .logo .mark::after {
- content: "";
- position: absolute;
- inset: 7px;
- border-radius: 2px;
- background: var(--paper);
- }
-
nav.main {
display: flex;
gap: 22px;
@@ -189,13 +199,9 @@
font-size: 14.5px;
}
- nav.main a:hover {
- color: var(--ink);
- }
+ nav.main a:hover { color: var(--ink); }
- .bar .signin {
- margin-left: 8px;
- }
+ .bar .signin { margin-left: 8px; }
/* buttons */
.btn {
@@ -212,26 +218,29 @@
color: var(--btn-text);
}
- .btn-primary:hover {
- filter: brightness(1.07);
- }
+ .btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
border: 1px solid var(--line);
color: var(--ink);
}
- .btn-ghost:hover {
- border-color: var(--accent);
- }
+ .btn-ghost:hover { border-color: var(--accent-line); }
/* hero */
.hero {
- padding: 72px 0 42px;
+ padding: 84px 24px 46px;
+ position: relative;
}
- .hero .eyebrow {
- color: var(--accent-ink);
+ /* Warm light off the top-left, echoing the mark's gradient. Decorative. */
+ .hero::before {
+ content: "";
+ position: absolute;
+ inset: -10% 30% 40% -20%;
+ background: radial-gradient(closest-side, var(--glow), transparent 70%);
+ pointer-events: none;
+ z-index: -1;
}
.eyebrow {
@@ -239,18 +248,27 @@
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
+ color: var(--accent-ink);
}
h1 {
font-size: clamp(34px, 5.2vw, 56px);
line-height: 1.06;
- letter-spacing: -0.025em;
+ letter-spacing: -0.028em;
font-weight: 800;
margin: 14px 0 18px;
max-width: 17ch;
text-wrap: balance;
}
+ /* The one place the brand gradient touches type. */
+ h1 .grad {
+ background: linear-gradient(100deg, var(--brand-hot), var(--brand-warm));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ }
+
.hero p.lede {
font-size: 19px;
color: var(--muted);
@@ -279,14 +297,20 @@
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
- margin: 44px 0 0;
+ margin: 48px 0 0;
}
.stat {
background: var(--panel);
padding: 18px 20px;
+ border-top: 2px solid transparent;
}
+ .stat:first-child { border-top-color: var(--brand-hot); }
+ .stat:nth-child(2) { border-top-color: #FA5A00; }
+ .stat:nth-child(3) { border-top-color: #FC7300; }
+ .stat:last-child { border-top-color: var(--brand-warm); }
+
.stat b {
display: block;
font-size: 24px;
@@ -307,15 +331,13 @@
/* sections */
section {
padding: 64px 0 8px;
- }
-
- section > .wrap > .eyebrow {
- color: var(--accent-ink);
+ /* clears the sticky header when an anchor is followed */
+ scroll-margin-top: 72px;
}
h2 {
font-size: clamp(24px, 3.2vw, 32px);
- letter-spacing: -0.02em;
+ letter-spacing: -0.022em;
margin: 10px 0 8px;
text-wrap: balance;
}
@@ -357,11 +379,11 @@
grid-template-columns: auto 1fr;
gap: 5px 14px;
font-size: 13.5px;
+ border-top: 1px solid var(--line);
+ padding-top: 14px;
}
- .card dt {
- color: var(--muted);
- }
+ .card dt { color: var(--muted); }
.card dd {
margin: 0;
@@ -437,15 +459,13 @@
/* closing cta */
.closer {
margin: 72px 0;
- border: 1px solid var(--line);
+ border: 1px solid var(--accent-line);
background: var(--accent-tint);
border-radius: 14px;
padding: 40px 32px;
}
- .closer h2 {
- margin-top: 0;
- }
+ .closer h2 { margin-top: 0; }
.closer p {
color: var(--muted);
@@ -471,29 +491,21 @@
text-decoration: none;
}
- .foot-links a:hover {
- color: var(--ink);
- }
+ .foot-links a:hover { color: var(--ink); }
.attribution {
color: var(--muted);
max-width: 72ch;
}
- .attribution p {
- margin: 4px 0;
- }
-
- .attribution a {
- color: var(--accent-ink);
- }
+ .attribution p { margin: 4px 0; }
</style>
<a class="skip" href="#content">Skip to content</a>
<header>
<div class="wrap bar">
- <a class="logo" href="#"><span class="mark" aria-hidden="true"></span>Custos Portal</a>
+ <a class="logo" href="#" aria-label="Custos Portal"><img class="brand-logo" src="/brand/logo/custos-logo.svg" alt="Custos"></a>
<nav class="main" aria-label="Primary">
<a href="#compute">Compute</a>
<a href="#platform">Platform</a>
@@ -507,7 +519,7 @@
<main id="content">
<div class="wrap hero">
<p class="eyebrow mono">Research computing platform</p>
- <h1>Compute for open science, in one portal.</h1>
+ <h1>Compute for <span class="grad">open science</span>, in one portal.</h1>
<p class="lede">
GPU and CPU resources for research and teaching, with projects, allocations,
and usage managed in a single place. Sign in and work from your first
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index e63678254..741a94a00 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -36,6 +36,7 @@ const manrope = Manrope({
export const metadata: Metadata = {
title: "Custos Portal",
description: "Apache Custos operator and researcher portal",
+ icons: { icon: "/brand/logo/custos-mark.svg" },
};
export default function RootLayout({
diff --git a/web/src/shared/layout/Sidebar.tsx b/web/src/shared/layout/Sidebar.tsx
index 9a4ce3d4a..ecfdc0291 100644
--- a/web/src/shared/layout/Sidebar.tsx
+++ b/web/src/shared/layout/Sidebar.tsx
@@ -42,11 +42,10 @@ export function Sidebar() {
return (
<aside className="flex w-[240px] shrink-0 flex-col border-r border-border bg-sidebar text-sidebar-foreground">
<div className="px-6 pt-8 pb-6">
- <Link
- href="/"
- className="font-display text-2xl font-extrabold uppercase tracking-tight text-brand"
- >
- Custos
+ <Link href="/" aria-label="Custos" className="inline-flex items-center">
+ {/* Shared brand asset, also used by the default landing page. */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ <img src="/brand/logo/custos-logo.svg" alt="Custos" className="h-6 w-auto" />
</Link>
</div>