Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
MEM4GH committed May 6, 2024
2 parents c242da1 + 068c436 commit a64d2c4
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 17 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@bsahitya/react-components": "^0.0.9",
"@bsahitya/react-components": "^0.1.0",
"@covalent/tokens": "^8.10.1",
"@docusaurus/core": "3.2.0",
"@docusaurus/preset-classic": "3.2.0",
Expand Down
68 changes: 56 additions & 12 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
--ifm-color-secondary-contrast-background: var(--cv-theme-light-colors-surface-variant);
--ifm-color-secondary-contrast-foreground: var(--cv-theme-light-colors-on-surface-container);


--ifm-color-success-dark: var(--cv-theme-light-colors-positive);
--ifm-color-success-contrast-background: var(--cv-theme-light-colors-positive-container);
--ifm-color-success-contrast-foreground: var(--cv-theme-light-colors-on-positive-container);
Expand All @@ -51,6 +50,7 @@
--ifm-breadcrumb-item-background-active: none;
--ifm-breadcrumb-color-active: #5e7484;
--mdc-theme-surface-canvas: var(--cv-theme-surface-container);
--ifm-toc-link-color: var(--Gray-700, #333a3e);
}

body {
Expand All @@ -77,6 +77,14 @@ aside.theme-doc-sidebar-container {
border-right: none;
}

.alert a:hover {
text-decoration-thickness: 1px;
}

.alert--secondary a {
text-decoration-color: #333a3e;
}

.markdown h1:first-child {
color: #00233C;

Expand Down Expand Up @@ -179,15 +187,13 @@ html:not(.plugin-pages).plugin-search-algolia .main-wrapper {
--ifm-menu-color-background-hover: none;
}

.menu__list-item--collapsed {
.menu__caret:before {
transform: rotateZ(0);
margin-left: calc(var(--ifm-menu-link-padding-horizontal) / 2);
}
.menu__list-item--collapsed .menu__caret:before {
transform: rotate(0);
margin-left: calc(var(--ifm-menu-link-padding-horizontal) / 2);
}

.menu__link--sublist-caret:before {
transform: rotateZ(0);
}
.menu__list-item--collapsed .menu__link--sublist-caret:before {
transform: rotate(0);
}

.menu__link--sublist-caret:after {
Expand All @@ -196,7 +202,7 @@ html:not(.plugin-pages).plugin-search-algolia .main-wrapper {

.menu__link--sublist-caret:before {
content: '';
background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
filter: var(--ifm-menu-link-sublist-icon-filter);
height: 1.25rem;
transform: rotate(90deg);
Expand All @@ -205,7 +211,8 @@ html:not(.plugin-pages).plugin-search-algolia .main-wrapper {
}

.menu__caret:before {
transform: rotateZ(90deg);
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
transform: rotate(90deg);
margin-left: calc(var(--ifm-menu-link-padding-horizontal) / 2);
}

Expand All @@ -231,6 +238,42 @@ html:not(.plugin-pages).plugin-search-algolia .main-wrapper {
padding-left: 24px;
}

.table-of-contents__link {
font-size: 0.75rem;
line-height: 1.25rem;
}

.table-of-contents,
.table-of-contents ul {
padding-left: 0;
}

.table-of-contents__left-border {
border-left: none;
}

.table-of-contents__link--active {
color: var(--ifm-toc-link-color);
font-weight: 700;
}

.table-of-contents ul a {
padding-left: calc(var(--ifm-toc-padding-horizontal) * 2.25);
}

.table-of-contents li {
margin: 0;
}

.table-of-contents__link {
padding: 0.375rem var(--ifm-toc-padding-horizontal);
border-left: 2px solid var(--cv-theme-primary-20);
}

.table-of-contents__link--active {
border-left: 2px solid var(--cv-theme-primary);
}

.breadcrumbs__item:first-child .breadcrumbs__link {
padding-left: 0;
}
Expand Down Expand Up @@ -267,6 +310,7 @@ html.plugin-search-algolia .main-wrapper .container {
margin: 0 auto;
width: 100%;
}

html:not(.plugin-pages).plugin-search-algolia .main-wrapper {
padding: 0;
margin: 0 auto;
Expand All @@ -281,4 +325,4 @@ html.plugin-search-algolia .main-wrapper .container {

html[data-navbar='false'] .navbar {
display: none;
}
}
61 changes: 61 additions & 0 deletions src/theme/Admonition/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { type ReactNode } from 'react';
import clsx from 'clsx';
import { ThemeClassNames } from '@docusaurus/theme-common';

import type { Props } from '@theme/Admonition/Layout';

import styles from './styles.module.css';

function AdmonitionContainer({
type,
className,
children,
}: Pick<Props, 'type' | 'className'> & { children: ReactNode }) {
return (
<div
className={clsx(
ThemeClassNames.common.admonition,
ThemeClassNames.common.admonitionType(type),
styles.admonition,
className
)}
>
{children}
</div>
);
}

function AdmonitionHeading({ icon, title }: Pick<Props, 'icon' | 'title'>) {
return (
<div className={styles.admonitionHeading}>
{icon && <span className={styles.admonitionIcon}>{icon}</span>}
{title}
</div>
);
}

function AdmonitionContent({ children }: Pick<Props, 'children'>) {
return children ? (
<div className={styles.admonitionContent}>{children}</div>
) : null;
}

export default function AdmonitionLayout(props: Props): JSX.Element {
const { type, icon, title, children, className } = props;
return (
<AdmonitionContainer
type={type}
className={clsx(
className,
styles.admonitionWrapper,
type === 'tip' ? styles.admonitionTip : ''
)}
>
<span className={styles.admonitionIcon}>{icon}</span>
<span className={styles.admonitionContentWrapper}>
<AdmonitionHeading title={title} />
<AdmonitionContent>{children}</AdmonitionContent>
</span>
</AdmonitionContainer>
);
}
70 changes: 70 additions & 0 deletions src/theme/Admonition/Layout/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.admonition {
margin-bottom: 1em;
padding: 0 1.5rem;
}

.admonitionHeading {
--ifm-h5-font-size: 1rem;
--ifm-heading-font-weight: 400;

font: 400 1rem / 1.5rem var(--ifm-heading-font-family);
text-transform: capitalize;
}

.admonitionHeading code {
text-transform: none;
}

.admonitionIcon {
display: inline-block;
vertical-align: middle;
padding: 1.25rem 0.875rem 0 0;
}

.admonitionIcon svg {
display: inline-block;
height: 1.4em;
width: 1.25em;
fill: var(--ifm-alert-foreground-color);
}

.admonitionIcon:not(.admonitionTip .admonitionIcon) {
--ifm-alert-foreground-color: #00000099;
}

.admonitionContentWrapper {
padding: 0.625rem;
}

.admonitionContent > :last-child {
margin-bottom: 0;
}

.admonitionContent,
.admonitionContent p {
color: var(--cv-theme-on-surface);
font-size: 0.875rem;
}

.admonitionTip p {
color: var(--cv-theme-on-secondary);
}

.admonitionWrapper {
--ifm-alert-border-left-width: 0;
--ifm-alert-border-radius: 12px;

display: flex;
align-items: flex-start;
}

.admonitionWrapper {
text-underline-offset: 2px;
}

.admonitionTip {
--ifm-alert-background-color: var(--cv-theme-secondary);
--ifm-alert-foreground-color: var(--cv-theme-on-secondary);
--ifm-alert-border-color: var(--cv-theme-on-secondary);
--ifm-code-background: var(--cv-theme-on-secondary-container-8);
}

0 comments on commit a64d2c4

Please sign in to comment.