From 0ad6c3ef65cc0d1a400b4816be2b7f6565a534d3 Mon Sep 17 00:00:00 2001 From: Mohammed Khan Date: Mon, 7 Jul 2025 15:57:46 +0530 Subject: [PATCH] feat: add breadcrumb styles and improve markdown readability #432 - Add responsive breadcrumb navigation with theme-aware styling - Set line-height for markdown content to enhance readability - Implement horizontal scrolling for breadcrumbs on mobile devices --- src/css/custom.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 933d51d0..7365089e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -39,6 +39,8 @@ --ifm-navbar-height: 5rem; --ifm-font-family-base: "Poppins", "Work Sans", sans-serif; --ifm-background-color-primary: #f6f6f1; + --ifm-background-color-secondary: #e8e8e8; + --ifm-breadcrumb-item-background-active: #ffe9e2; } [data-theme="dark"] { @@ -51,6 +53,8 @@ --ifm-color-primary-lightest: #171717; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --ifm-background-color-primary: #171717; + --ifm-background-color-secondary: #232323; + --ifm-breadcrumb-item-background-active: #3f322e; } #__docusaurus { @@ -102,6 +106,8 @@ a[docid="docs"] > svg { overflow: hidden; max-width: 100%; background: #000; + border-radius: 1rem; + border: 4px solid var(--ifm-background-color-secondary); } .video-container iframe { @@ -298,3 +304,34 @@ a[docid="docs"] > svg { .pagination-nav { display: none; } +/* ===== MARKDOWN STYLES ===== */ +.theme-doc-markdown.markdown { + line-height: 1.8rem; +} +/* ===== BREADCRUMB STYLES ===== */ + +.breadcrumbs { + display: flex; + gap: 0.5rem; + overflow-x: auto; + white-space: nowrap; +} +.breadcrumbs::-webkit-scrollbar { + display: none; +} +.breadcrumbs__item { + display: flex; + align-items: center; + white-space: nowrap; + gap: 1rem; +} +.breadcrumbs__link { + transition: color 0.2s ease; + background-color: var(--ifm-background-color-secondary); +} + +.breadcrumbs__item--active .breadcrumbs__link { + font-weight: 600; + cursor: default; + background-color: var(--ifm-breadcrumb-item-background-active); +} pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy