diff --git a/assets/css/codeberg-docs.css b/assets/css/codeberg-docs.css index 63826a5..ff0caab 100644 --- a/assets/css/codeberg-docs.css +++ b/assets/css/codeberg-docs.css @@ -18,6 +18,8 @@ --admonition-icon--question: url('data:image/svg+xml;charset=utf-8,'); --admonition-icon-dimension: 20px; + + --pagefind-ui-text: var(--bs-link-color) !important; } .content :not(img, pre) { @@ -31,8 +33,11 @@ .content blockquote { margin: 0; } + .content-title { - margin-top: 20px !important; + margin-top: 20px; + margin-bottom: 20px; + scroll-margin-block-start: 65px; } .content pre { @@ -54,11 +59,6 @@ padding-left: 2em; } -.codeberg-design .card, -.codeberg-design hr { - margin-left: 0; -} - a.header-anchor, a.header-anchor:visited { color: var(--lm-base-text-color) !important; @@ -87,14 +87,6 @@ pre:not([class*='language-']) { border-radius: 0.3em; } -/* Override sidebar link style */ -.codeberg-design .sidebar-title a { - color: var(--sidebar-title-text-color); -} -.codeberg-design .sidebar-title .dark-mode a { - color: var(--dm-sidebar-title-text-color); -} - /* Apply halfmoon style to inline code */ code:not(pre > code) { font-size: var(--code-font-size); @@ -114,21 +106,6 @@ code:not(pre > code) { /* Custom Admonition boxes */ -.admonition { - background-color: var(--admonition-background-color--info); - border: 0.2rem solid var(--admonition-border-color--info); - border-radius: 0.3rem; - - border-left-width: 0.5rem; - - padding: 1em 1.5em; -} - -.admonition-title { - font-weight: bold; - font-size: 1.2em; -} - .admonition-icon::before { content: ''; background-color: var(--admonition-border-color--info); @@ -151,23 +128,12 @@ code:not(pre > code) { width: 1.5em; } -.admonition.note { - background-color: var(--admonition-background-color--note); - border-color: var(--admonition-border-color--note); -} - .admonition-icon.note::before { background-color: var(--admonition-border-color--note); mask-image: var(--admonition-icon--note); -webkit-mask-image: var(--admonition-icon--note); } - -.admonition.warning { - background-color: var(--admonition-background-color--warning); - border-color: var(--admonition-border-color--warning); -} - .admonition-icon.warning::before { background-color: var(--admonition-border-color--warning); @@ -175,11 +141,6 @@ code:not(pre > code) { -webkit-mask-image: var(--admonition-icon--warning); } -.admonition.tip { - background-color: var(--admonition-background-color--tip); - border-color: var(--admonition-border-color--tip); -} - .admonition-icon.tip::before { background-color: var(--admonition-border-color--tip); @@ -187,11 +148,6 @@ code:not(pre > code) { -webkit-mask-image: var(--admonition-icon--tip); } -.admonition.question { - background-color: var(--admonition-background-color--question); - border-color: var(--admonition-border-color--question); -} - .admonition-icon.question::before { background-color: var(--admonition-border-color--question); @@ -199,10 +155,6 @@ code:not(pre > code) { -webkit-mask-image: var(--admonition-icon--question); } -.admonition-content > *:last-child { - margin-bottom: 0; -} - #search-results { overflow: hidden; word-wrap: anywhere; @@ -232,40 +184,11 @@ code:not(pre > code) { } #toc ol { - padding: 5px; - margin: 0; + padding-left: 1em; } #toc li { list-style-type: none; - margin-bottom: 0; -} - -#toc a { - display: block; - height: auto; -} - -#toc-side { - margin-top: 50px; -} - -#toc-side span { - font-weight: 500; - font-size: 1.5rem; - margin-bottom: 1rem; -} - -#toc-side ol:first-child { - border-left: 1px solid rgba(0, 0, 0, 0.15); -} - -.dark-mode #toc-side ol:first-child { - border-left: 1px solid rgba(255, 255, 255, 0.15); -} - -#toc-side a { - padding-left: 10px; } a.show-on-focus { @@ -285,3 +208,37 @@ a.show-on-focus:focus { left: 0; top: 0; } + +.docs-navbar { + background-color: hsla(var(--bs-body-bg-hsl), 0.75); + backdrop-filter: blur(8px); +} + +.sidebar .offcanvas-header, +.docs-navbar { + min-height: 55px; + border-bottom: var(--bs-border-width) solid var(--bs-content-border-color); +} + +.filter-docs { + background-color: var(--bs-sidebar-bg); +} + +.docs-footer { + background-color: var(--bs-secondary-bg); + border-top: var(--bs-border-width) solid var(--bs-content-border-color); +} + +.simple-link { + color: hsla(var(--bs-emphasis-color-hsl), 0.75); + text-decoration: none; +} + +.simple-link:hover { + color: hsla(var(--bs-emphasis-color-hsl), 0.9); +} + +[data-bs-theme='light'] .sidebar-brand img, +[data-bs-theme='light'] .navbar-brand img { + content: url(https://design.codeberg.org/logo-kit/icon.svg); +} diff --git a/assets/js/index.js b/assets/js/index.js new file mode 100644 index 0000000..a718f8a --- /dev/null +++ b/assets/js/index.js @@ -0,0 +1,25 @@ +if (localStorage.getItem('theme') === 'light') { + document.documentElement.setAttribute('data-bs-theme', 'light'); +} + +function toggleDarkMode() { + const rootPreference = document.documentElement.getAttribute('data-bs-theme'); + if (rootPreference === 'light') { + document.documentElement.setAttribute('data-bs-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } else { + document.documentElement.setAttribute('data-bs-theme', 'light'); + localStorage.setItem('theme', 'light'); + } +} + +function toggleSidebar() { + const sidebarEl = document.querySelector('.sidebar'); + if (sidebarEl.classList.contains('show')) { + sidebarEl.classList.remove('show'); + sidebarEl.classList.add('hiding'); + } else { + sidebarEl.classList.remove('hiding'); + sidebarEl.classList.add('show'); + } +} diff --git a/content/_includes/contribution_invitation.njk b/content/_includes/contribution_invitation.njk index bae670c..95557e3 100644 --- a/content/_includes/contribution_invitation.njk +++ b/content/_includes/contribution_invitation.njk @@ -1,16 +1,21 @@
-

Hey there! 👋 Thank you for reading this article!

-

- Is there something missing, or do you have an idea on how to improve the documentation? - Do you want to write your own article? -

-

- You're invited to contribute to the Codeberg Documentation at its source code repository, - for example, by adding a pull request - or joining in on the discussion in the issue tracker. -

-

- For an introduction on contributing to Codeberg Documentation, please have a look - at the Contributor FAQ. -

+
+
Contributing
+
+

Hey there! 👋 Thank you for reading this article!

+

+ Is there something missing, or do you have an idea on how to improve the documentation? + Do you want to write your own article? +

+

+ You're invited to contribute to the Codeberg Documentation at its source code repository + for example, by adding a pull request + or joining in on the discussion in the issue tracker. +

+

+ For an introduction on contributing to Codeberg Documentation, please have a look + at the Contributor FAQ. +

+
+
diff --git a/content/_includes/default_layout.njk b/content/_includes/default_layout.njk index a7d4907..5711a8b 100644 --- a/content/_includes/default_layout.njk +++ b/content/_includes/default_layout.njk @@ -1,5 +1,5 @@ - + {% if eleventyNavigation.title %}{{ eleventyNavigation.title }} | {% endif %}Codeberg Documentation @@ -17,14 +17,10 @@ - - - - - + @@ -73,138 +69,160 @@ // @license-end {% endif %} + - - {% include 'license.njk' %} -
-
- -
-
-
-
- {% if eleventyNavigation.title %} -

{{ eleventyNavigation.title }}

- {% endif %} {% if eleventyNavigation.draft %} - Please note that this article is still a draft and might not have any contents yet. - {% endif %} {% include 'toc-collapse.njk' %} - {{ content | safe }} -
- {% if page.url != '/' %} {% include 'contribution_invitation.njk' %} {% endif %} -
-

© Codeberg Docs Contributors. See LICENSE

-
-
- {% include 'toc-side.njk' %} +
+
+
+ {% if eleventyNavigation.title %} +

{{ eleventyNavigation.title }}

+ {% endif %} {% if eleventyNavigation.draft %} + Please note that this article is still a draft and might not have any contents yet. + {% endif %} + +
+ {% include 'toc-collapse.njk' %} + {{ content | safe }}
-
+ {% include 'contribution_invitation.njk' %} + + {% include 'toc-side.njk' %}
+ +
+
+

+ © Codeberg Docs Contributors. See + LICENSE +

+
+
diff --git a/content/_includes/license.njk b/content/_includes/license.njk deleted file mode 100644 index 41f0b9f..0000000 --- a/content/_includes/license.njk +++ /dev/null @@ -1,36 +0,0 @@ - diff --git a/content/_includes/toc-collapse.njk b/content/_includes/toc-collapse.njk index 3e9c390..ea9a547 100644 --- a/content/_includes/toc-collapse.njk +++ b/content/_includes/toc-collapse.njk @@ -1,10 +1,11 @@ {% if content | toc %}