From bc5adf0865be5bbd1949e688b0f7b17a580685b8 Mon Sep 17 00:00:00 2001 From: Vitor <107767584+vitorfloriano@users.noreply.github.com> Date: Thu, 13 Nov 2025 12:30:31 -0300 Subject: [PATCH] (docs/ui): customize book theming The book now has custom colors. We also added a few fixes to some elements. --- docs/book/book.toml | 3 +- docs/book/src/logos/favicon.png | Bin 2811 -> 0 bytes docs/book/src/logos/kb-icon.svg | 1 + docs/book/src/logos/kb-logo-one-line.svg | 1 + docs/book/src/logos/logo-single-line.png | Bin 4275 -> 0 bytes docs/book/theme/css/custom.css | 44 ++++++++- docs/book/theme/css/variables.css | 111 +++++++++++++++++++++++ docs/book/theme/index.hbs | 11 +-- 8 files changed, 158 insertions(+), 13 deletions(-) delete mode 100644 docs/book/src/logos/favicon.png create mode 100644 docs/book/src/logos/kb-icon.svg create mode 100644 docs/book/src/logos/kb-logo-one-line.svg delete mode 100644 docs/book/src/logos/logo-single-line.png create mode 100644 docs/book/theme/css/variables.css diff --git a/docs/book/book.toml b/docs/book/book.toml index 494f7e82917..fb434d21880 100644 --- a/docs/book/book.toml +++ b/docs/book/book.toml @@ -6,7 +6,7 @@ title = "The Kubebuilder Book" [output.html] smart-punctuation = true -additional-css = ["theme/css/markers.css", "theme/css/custom.css", "theme/css/version-dropdown.css"] +additional-css = ["theme/css/variables.css", "theme/css/markers.css", "theme/css/custom.css", "theme/css/version-dropdown.css"] git-repository-url = "https://github.com/kubernetes-sigs/kubebuilder" edit-url-template = "https://github.com/kubernetes-sigs/kubebuilder/edit/master/docs/book/{path}" @@ -21,4 +21,3 @@ command = "./markerdocs.sh" [context.deploy-preview.environment] environment = { GO_VERSION = "1.23" } - diff --git a/docs/book/src/logos/favicon.png b/docs/book/src/logos/favicon.png deleted file mode 100644 index f3587603e3cd30ebae61ed0f449663b4225ce53a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2811 zcmV004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 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 N002ovPDHLkV1nOSO \ No newline at end of file diff --git a/docs/book/src/logos/kb-logo-one-line.svg b/docs/book/src/logos/kb-logo-one-line.svg new file mode 100644 index 00000000000..25cc8d0f898 --- /dev/null +++ b/docs/book/src/logos/kb-logo-one-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/book/src/logos/logo-single-line.png b/docs/book/src/logos/logo-single-line.png deleted file mode 100644 index 23968e7c6171d9c0cc07d5ea7986267752af42af..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4275 zcmV;k5KQlhP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 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 VFfd2yNPYkS002ovPDHLkV1jKm8$bX6 diff --git a/docs/book/theme/css/custom.css b/docs/book/theme/css/custom.css index de1d7183c30..e2fbc059a15 100644 --- a/docs/book/theme/css/custom.css +++ b/docs/book/theme/css/custom.css @@ -1,7 +1,43 @@ -.menu-title img { - vertical-align: bottom; +/* Adds a thin border to the sidebar (aesthetics) */ +#sidebar { + border-right: 1px solid var(--theme-popup-border); } -#sidebar-toggle-anchor:checked .page-wrapper { - margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); +/* Fixes first header sliding under the menu bar when selected */ +.content { + overflow-y: clip; +} + +/* Sets the size of the logo on the menu bar */ +.large-logo-img { + height: 50px; +} + +/* Centers the logo on the menu bar */ +.menu-title { + display: flex; + align-items: center; /* vertical centering */ + justify-content: center; /* horizontal centering */ +} + +/* Fixes contrast in codeblocks */ +.hljs { + background-color: var(--codeblock-bg); + border: 1px solid var(--theme-popup-border); + border-radius: 6px; +} + +/* Fixes duplicate borders in collapsed code blocks */ +summary > .hljs { + border: none; +} + +/* Fixes scrollbar background color */ +html { + scrollbar-color: var(--scrollbar) transparent; +} + +/* Fixes links formatting */ +.content a { + text-decoration: solid underline var(--links); } diff --git a/docs/book/theme/css/variables.css b/docs/book/theme/css/variables.css new file mode 100644 index 00000000000..e8b838b86a1 --- /dev/null +++ b/docs/book/theme/css/variables.css @@ -0,0 +1,111 @@ +/* Globals */ + +:root { + --sidebar-width: 300px; + --sidebar-resize-indicator-width: 8px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 15px; + --content-max-width: 50em; + --menu-bar-height: 50px; + --mono-font: + "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", + monospace, monospace; + --code-font-size: 0.875em + /* please adjust the ace font size accordingly in editor.js */; +} + +/* Themes */ + +/* dark theme */ +.navy { + --bg: hsl(220, 13%, 10%); + --fg: hsl(220, 14%, 70%); + + --sidebar-bg: #1a2233; + --sidebar-fg: #b8c2d1; + --sidebar-non-existant: #5b80c1; + --sidebar-active: #466bb3; + --sidebar-spacer: #2a3448; + + --scrollbar: var(--theme-popup-border); + + --icons: hsl(220, 14%, 71%); + --icons-hover: #93afdb; + + --links: #93afdb; + --inline-code-color: var(--fg); + + --theme-popup-bg: #1a2233; + --theme-popup-border: #2a3448; + --theme-hover: #141a27; + + --quote-bg: #141a27; + --quote-border: #2a3448; + + --warning-border: #ff6b6b; + + --table-border-color: #2a3448; + --table-header-bg: #1f293d; + --table-alternate-bg: #131b2a; + + --searchbar-border-color: #2a3448; + --searchbar-bg: #1a2233; + --searchbar-fg: #e5e9f0; + --searchbar-shadow-color: #466bb3; + --searchresults-header-fg: #93afdb; + --searchresults-border-color: #2a3448; + --searchresults-li-bg: #141a27; + --search-mark-bg: #5b80c1; + + --color-scheme: dark; + + --codeblock-bg: var(--sidebar-bg); + + --title-color: var(--sidebar-active); +} + +/* light theme (obviously) */ +.light { + --bg: #ffffff; + --fg: #111827; + + --sidebar-bg: #eef5ff; + --sidebar-fg: #334155; + --sidebar-non-existant: #7b8da8; + --sidebar-active: #466bb3; + --sidebar-spacer: #c9d3e0; + + --scrollbar: var(--theme-popup-border); + + --icons: #747474; + --icons-hover: #3f6ec6; + + --links: #2f5a9a; + --inline-code-color: var(--fg); + + --theme-popup-bg: #ffffff; + --theme-popup-border: #c9d3e0; + --theme-hover: #e3e9f2; + + --quote-bg: #e4eaf3; + --quote-border: #bfcadb; + + --warning-border: #e07b00; + + --table-border-color: #c9d3e0; + --table-header-bg: #e1e7f0; + --table-alternate-bg: #f0f3f8; + + --searchbar-border-color: #c9d3e0; + --searchbar-bg: #ffffff; + --searchbar-fg: #111827; + --searchbar-shadow-color: #3f6ec6; + --searchresults-header-fg: #3f6ec6; + --searchresults-border-color: #c9d3e0; + --searchresults-li-bg: #e4eaf3; + --search-mark-bg: #5a8be0; + + --color-scheme: light; + + --codeblock-bg: var(--sidebar-bg); +} diff --git a/docs/book/theme/index.hbs b/docs/book/theme/index.hbs index f98eacc1da1..ffced82e4d5 100644 --- a/docs/book/theme/index.hbs +++ b/docs/book/theme/index.hbs @@ -21,7 +21,7 @@ - + @@ -119,10 +119,7 @@ {{#if search_enabled}}