Site polish: brand mermaid palette and navbar search icon color
- commit
- df69a5037f077fb0592b41b7bb91d3e84b77c6db
- parent
- 62a6b5d70449bad424a2091ed970dadb6811dea4
- parent
- cdce03cabe12e2041a7f27b8f615d491f53952e0
- author
- FelineStateMachine <dami.etoile@gmail.com>
| M | website/ | 43 | +++++++++++++++++++++++++++++- |
| M | website/ | 3 | ++ |
@@ -122,7 +122,48 @@ const config: Config = {
122122 themeConfig: {123123 image: "img/lofi-social-card.png",124124 mermaid: {125- theme: { light: "forest", dark: "forest" },125+ // one custom brand palette for both color modes: filled shapes carry126+ // their own text color (mint/lime with forest ink), and floating text127+ // and lines use a mid sage that stays readable on light and dark pages128+ theme: { light: "base", dark: "base" },129+ options: {130+ themeVariables: {131+ fontFamily: '"Karla", system-ui, -apple-system, sans-serif',132+ primaryColor: "#99e5bd",133+ primaryTextColor: "#18231f",134+ primaryBorderColor: "#39725c",135+ secondaryColor: "#d5f26a",136+ secondaryTextColor: "#18231f",137+ secondaryBorderColor: "#39725c",138+ tertiaryColor: "#c9eeda",139+ tertiaryTextColor: "#18231f",140+ tertiaryBorderColor: "#39725c",141+ lineColor: "#6f9d88",142+ // floating labels render on the mint edge-label chip, so they carry143+ // forest ink; standalone titles use the mid sage via titleColor144+ textColor: "#18231f",145+ clusterBkg: "rgba(153, 229, 189, 0.16)",146+ clusterBorder: "#39725c",147+ titleColor: "#6f9d88",148+ clusterTextColor: "#6f9d88",149+ edgeLabelBackground: "#99e5bd",150+ actorBkg: "#99e5bd",151+ actorTextColor: "#18231f",152+ actorBorder: "#39725c",153+ actorLineColor: "#6f9d88",154+ signalColor: "#6f9d88",155+ signalTextColor: "#6f9d88",156+ labelBoxBkgColor: "#d5f26a",157+ labelBoxBorderColor: "#39725c",158+ labelTextColor: "#18231f",159+ loopTextColor: "#6f9d88",160+ activationBkgColor: "#d5f26a",161+ activationBorderColor: "#39725c",162+ noteBkgColor: "#d5f26a",163+ noteTextColor: "#18231f",164+ noteBorderColor: "#39725c",165+ },166+ },126167 },127168 colorMode: {128169 respectPrefersColorScheme: true,@@ -40,6 +40,9 @@
4040 .navbar {4141 --ifm-navbar-search-input-background-color: #22332c;4242 --ifm-navbar-search-input-color: #f3faf6;43+ --ifm-navbar-search-input-placeholder-color: #8fae9f;44+ /* Infima ships the magnifier as a dark-grey data URI; recolor it to sage */45+ --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%238fae9f" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');4346 }4447 .navbar__logo {4548 /* the wordmark is wide (1120x360); give it room and keep it crisp */