From b2f85ba18bd7d42a91bcff5e2edf53f324667bc4 Mon Sep 17 00:00:00 2001 From: eshanized Date: Sat, 4 Jan 2025 17:00:14 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20default=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/custom.css | 58 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 17 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 29093d57..e0344184 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,30 +1,54 @@ /** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. + * Global CSS for the Classic Template + * The Infima framework is included by default and optimized for content-centric websites. + * Customize Infima variables and add global styles here. */ -/* You can override the default Infima variables here. */ +/* Base Variables */ :root { + /* Primary Color Palette */ --ifm-color-primary: #6495ed; - --ifm-color-primary-dark: #6495ed; - --ifm-color-primary-darker: #6495ed; - --ifm-color-primary-darkest: #6495ed; - --ifm-color-primary-light: #6495ed; - --ifm-color-primary-lighter: #6495ed; - --ifm-color-primary-lightest: #6495ed; + --ifm-color-primary-dark: #5a86d8; + --ifm-color-primary-darker: #4e78c3; + --ifm-color-primary-darkest: #426aaf; + --ifm-color-primary-light: #7aa6f5; + --ifm-color-primary-lighter: #90b9fd; + --ifm-color-primary-lightest: #a6cbff; + + /* Font and Code Styles */ --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } -/* For readability concerns, you should choose a lighter palette in dark mode. */ +/* Dark Mode Variables */ [data-theme='dark'] { + /* Adjusted Primary Color Palette for Dark Mode */ --ifm-color-primary: #6495ed; - --ifm-color-primary-dark: #6495ed; - --ifm-color-primary-darker: #6495ed; - --ifm-color-primary-darkest: #6495ed; - --ifm-color-primary-light: #6495ed; - --ifm-color-primary-lighter: #6495ed; - --ifm-color-primary-lightest: #6495ed; + --ifm-color-primary-dark: #5a86d8; + --ifm-color-primary-darker: #4e78c3; + --ifm-color-primary-darkest: #426aaf; + --ifm-color-primary-light: #7aa6f5; + --ifm-color-primary-lighter: #90b9fd; + --ifm-color-primary-lightest: #a6cbff; + + /* Highlighted Code Line Background for Dark Mode */ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +/* Additional Customizations (Optional) */ +/* Example: Customize link styles */ +a { + text-decoration: none; + color: var(--ifm-color-primary); +} + +a:hover { + text-decoration: underline; + color: var(--ifm-color-primary-dark); +} + +/* Example: Add spacing adjustments */ +body { + line-height: 1.6; + font-size: 16px; +}