docs: 💄 many css improvments + minor fixes
Signed-off-by: jffarge <jf@dagger.io>
This commit is contained in:
jffarge
Andrea Luzzardi
parent
2d6bf2fa64
commit
d0169727c2
@ -10,7 +10,6 @@
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-background-color: var(--ifm-color-primary-light);
|
||||
|
||||
--ifm-code-background: var(--ifm-color-primary-dark);
|
||||
--ifm-code-font-size: 100%;
|
||||
--ifm-code-border-radius: 2rem;
|
||||
@ -19,7 +18,7 @@
|
||||
--ifm-code-padding-horizontal: 0.2rem;
|
||||
--ifm-color-primary: #0e2b3d;
|
||||
--ifm-color-primary-dark: #131226;
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darker: #0d0c1b;
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: #fffef6;
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
@ -39,7 +38,7 @@
|
||||
--ifm-menu-color: var(--ifm-color-primary-dark);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-dark);
|
||||
--ifm-menu-color-background-hover: #fdf9d7;
|
||||
--ifm-menu-color-background-active: #fdf9d7;
|
||||
--ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
|
||||
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.318 9.128a24.776 24.776 0 004.224-3.993.842.842 0 011.32.026c1.227 1.618 2.107 3.387 3.831 4.556.889.6-.159 1.9-1.044 1.3A14.369 14.369 0 018.14 7a30.457 30.457 0 01-3.829 3.463c-.845.671-1.834-.67-.993-1.335z" fill="%23131226" /></svg>');
|
||||
--ifm-navbar-height: 6rem;
|
||||
--ifm-navbar-background-color: var(--ifm-color-primary-light);
|
||||
@ -52,7 +51,7 @@
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-background-color: var(--ifm-color-primary-dark);
|
||||
--ifm-navbar-background-color: transparent;
|
||||
--ifm-navbar-background-color: var(--ifm-color-primary-darker);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary-light);
|
||||
--ifm-menu-color-background-active: var(--ifm-color-primary);
|
||||
--ifm-link-color: var(--ifm-color-primary-light);
|
||||
@ -63,13 +62,14 @@ html[data-theme="dark"] {
|
||||
--ifm-table-stripe-background: #2e526a;
|
||||
--ifm-code-background: var(--ifm-color-primary-dark);
|
||||
--ifm-heading-color: var(--ifm-color-primary-light);
|
||||
--ifm-blockquote-color: var(--ifm-menu-color-background-hover);
|
||||
--ifm-color-emphasis-300: var(--ifm-menu-color-background-hover);
|
||||
}
|
||||
|
||||
/* global */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
h2 {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@ code {
|
||||
.markdown {
|
||||
& > h2 {
|
||||
--ifm-h2-font-size: 1.5rem;
|
||||
--ifm-h2-vertical-rhythm-top: 3;
|
||||
--ifm-h2-vertical-rhythm-top: 4;
|
||||
}
|
||||
|
||||
& > h3 {
|
||||
@ -94,6 +94,10 @@ code {
|
||||
--ifm-h3-vertical-rhythm-top: 3;
|
||||
}
|
||||
|
||||
& > h2 + h3 {
|
||||
--ifm-h3-vertical-rhythm-top: 2;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
@ -130,9 +134,11 @@ a[class*="menuLinkExternal"]:after {
|
||||
position: absolute;
|
||||
right: var(--ifm-menu-link-padding-horizontal);
|
||||
top: var(--ifm-menu-link-padding-vertical);
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
h1[class^="docTitle"] {
|
||||
h1[class^="h1Heading"] {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@ -141,6 +147,10 @@ h1[class^="docTitle"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 2rem 0 5rem;
|
||||
|
||||
html[data-theme="dark"] & svg path {
|
||||
fill: var(--ifm-color-primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
#__docusaurus {
|
||||
@ -148,7 +158,7 @@ h1[class^="docTitle"] {
|
||||
padding-bottom: 3rem;
|
||||
|
||||
html[data-theme="dark"] & {
|
||||
background: #0d0c1b;
|
||||
background: var(--ifm-color-primary-darker);
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,6 +242,7 @@ div[class^="codeBlockContainer"] {
|
||||
|
||||
div[class^="codeBlockTitle"] {
|
||||
background-color: var(--ifm-color-primary-dark) !important;
|
||||
border-bottom: 1px solid #606770;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@ -244,6 +255,7 @@ div[class^="codeBlockContainer"] {
|
||||
|
||||
code[class^="codeBlockLines"] {
|
||||
background-color: var(--ifm-color-primary-dark) !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
.token-line {
|
||||
color: var(--ifm-color-primary-light) !important;
|
||||
@ -301,19 +313,29 @@ html[data-theme="dark"] .menu {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
&--active:not(.menu__link--sublist) {
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-color-primary-light);
|
||||
|
||||
html[data-theme="dark"] & {
|
||||
background-color: var(--ifm-menu-color-background-hover);
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] &,
|
||||
html[data-theme="dark"] &:not([href]),
|
||||
html[data-theme="dark"] &:focus {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] &:hover {
|
||||
html[data-theme="dark"] &:not(.menu__link--active):hover {
|
||||
background-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] &:active {
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-color-primary-light);
|
||||
html[data-theme="dark"] &:not(.menu__link--active):active {
|
||||
background-color: var(--ifm-color-primary-light);
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
&.menu__link--sublist {
|
||||
@ -325,7 +347,7 @@ html[data-theme="dark"] .menu {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fdf9d7;
|
||||
background-color: var(--ifm-menu-color-background-hover);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] & {
|
||||
@ -346,10 +368,16 @@ html[data-theme="dark"] .menu {
|
||||
display: none;
|
||||
}
|
||||
&:before {
|
||||
content: url("/img/Dagger_Icons_Search.svg");
|
||||
content: "";
|
||||
background-color: black;
|
||||
mask: url("/img/Dagger_Icons_Search.svg");
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
html[data-theme="dark"] & {
|
||||
background-color: var(--ifm-color-primary-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -370,7 +398,6 @@ div[class*="admonition-"] .admonition-icon svg {
|
||||
|
||||
img[alt="github-contribute"] {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
@ -384,7 +411,7 @@ img[alt="github-contribute"] {
|
||||
.admonition-#{$name} .admonition-icon::before {
|
||||
mask: url($path);
|
||||
content: "";
|
||||
background-color: $bgColor;
|
||||
background-color: var(--ifm-color-primary-dark);
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@ -1 +0,0 @@
|
||||
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
|
||||
|
Before Width: | Height: | Size: 830 B |
1
website/src/theme/Toggle/icon_day.svg
Normal file
1
website/src/theme/Toggle/icon_day.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg class="mode" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
website/src/theme/Toggle/icon_night.svg
Normal file
1
website/src/theme/Toggle/icon_night.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg class="mode" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
|
||||
|
After Width: | Height: | Size: 843 B |
@ -9,8 +9,8 @@ import { useThemeConfig } from '@docusaurus/theme-common';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import DarkIcon from "./Icon_Night-mode.svg"
|
||||
import LightIcon from "./Icon_Day-mode.svg"
|
||||
import DarkIcon from "./icon_night.svg"
|
||||
import LightIcon from "./icon_day.svg"
|
||||
|
||||
const Dark = ({ icon, style }) => (
|
||||
<span className={clsx(styles.toggle, styles.dark)} style={style}>
|
||||
|
||||
@ -103,3 +103,9 @@
|
||||
:global(.react-toggle--checked .react-toggle-thumb) {
|
||||
left: 31px;
|
||||
}
|
||||
|
||||
:global(.icon_day_svg__mode),
|
||||
:global(.icon_night_svg__mode) {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user