Initial commit: DOSSIER Hugo website
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
.dark .highlight {
|
||||
/* Background .bg { color: #c9d1d9; background-color: #0d1117; }
|
||||
/* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #f85149 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
|
||||
/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
|
||||
/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
|
||||
/* LineHighlight .chroma .hl { background-color: #ffffcc } */
|
||||
/* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */
|
||||
/* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */
|
||||
/* Line */ .chroma .line { display: flex; }
|
||||
/* Keyword */ .chroma .k { color: #ff7b72 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #79c0ff }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
|
||||
/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
|
||||
/* KeywordType */ .chroma .kt { color: #ff7b72 }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { }
|
||||
/* NameBuiltin */ .chroma .nb { }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||
/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
|
||||
/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
|
||||
/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
|
||||
/* NameEntity */ .chroma .ni { color: #ffa657 }
|
||||
/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
|
||||
/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
|
||||
/* NameNamespace */ .chroma .nn { color: #ff7b72 }
|
||||
/* NameOther */ .chroma .nx { }
|
||||
/* NameProperty */ .chroma .py { color: #79c0ff }
|
||||
/* NameTag */ .chroma .nt { color: #7ee787 }
|
||||
/* NameVariable */ .chroma .nv { color: #79c0ff }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { color: #a5d6ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #79c0ff }
|
||||
/* LiteralString */ .chroma .s { color: #a5d6ff }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
|
||||
/* LiteralNumber */ .chroma .m { color: #a5d6ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
|
||||
/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
|
||||
/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
|
||||
/* Punctuation */ .chroma .p { }
|
||||
/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
|
||||
/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
|
||||
/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
|
||||
/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
|
||||
/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
|
||||
/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
|
||||
/* GenericEmph */ .chroma .ge { color: inherit; font-style: italic }
|
||||
/* GenericError */ .chroma .gr { color: #ffa198 }
|
||||
/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
|
||||
/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
|
||||
/* GenericOutput */ .chroma .go { color: #8b949e }
|
||||
/* GenericPrompt */ .chroma .gp { color: #8b949e }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #79c0ff }
|
||||
/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||
/* TextWhitespace */ .chroma .w { color: #6e7681 }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
/* Light theme for syntax highlight */
|
||||
/* Generated using `hugo gen chromastyles --style=github` */
|
||||
.highlight {
|
||||
/* Background .bg { background-color: #ffffff; } */
|
||||
/* PreWrapper .chroma { background-color: #ffffff; } */
|
||||
/* Other .chroma .x { } */
|
||||
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
|
||||
/* CodeLine .chroma .cl { } */
|
||||
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
|
||||
/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
|
||||
/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
|
||||
/* LineHighlight .chroma .hl { background-color: #ffffcc } */
|
||||
/* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
|
||||
/* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
|
||||
/* Line */ .chroma .line { display: flex; }
|
||||
/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
|
||||
/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
|
||||
/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
|
||||
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
|
||||
/* Name .chroma .n { } */
|
||||
/* NameAttribute */ .chroma .na { color: #008080 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #0086b3 }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
|
||||
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
|
||||
/* NameConstant */ .chroma .no { color: #008080 }
|
||||
/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
|
||||
/* NameEntity */ .chroma .ni { color: #800080 }
|
||||
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
|
||||
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
|
||||
/* NameFunctionMagic .chroma .fm { } */
|
||||
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
|
||||
/* NameNamespace */ .chroma .nn { color: #555555 }
|
||||
/* NameOther .chroma .nx { } */
|
||||
/* NameProperty .chroma .py { } */
|
||||
/* NameTag */ .chroma .nt { color: #000080 }
|
||||
/* NameVariable */ .chroma .nv { color: #008080 }
|
||||
/* NameVariableClass */ .chroma .vc { color: #008080 }
|
||||
/* NameVariableGlobal */ .chroma .vg { color: #008080 }
|
||||
/* NameVariableInstance */ .chroma .vi { color: #008080 }
|
||||
/* NameVariableMagic .chroma .vm { } */
|
||||
/* Literal .chroma .l { } */
|
||||
/* LiteralDate .chroma .ld { } */
|
||||
/* LiteralString */ .chroma .s { color: #dd1144 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #009926 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
|
||||
/* LiteralNumber */ .chroma .m { color: #009999 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
|
||||
/* Operator */ .chroma .o { color: #000000; font-weight: bold }
|
||||
/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
|
||||
/* Punctuation .chroma .p { } */
|
||||
/* Comment */ .chroma .c { color: #999988; font-style: italic }
|
||||
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
|
||||
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
|
||||
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
|
||||
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
|
||||
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
|
||||
/* Generic .chroma .g { } */
|
||||
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
|
||||
/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
|
||||
/* GenericError */ .chroma .gr { color: #aa0000 }
|
||||
/* GenericHeading */ .chroma .gh { color: #999999 }
|
||||
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
|
||||
/* GenericOutput */ .chroma .go { color: #888888 }
|
||||
/* GenericPrompt */ .chroma .gp { color: #555555 }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
|
||||
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||
/* TextWhitespace */ .chroma .w { color: #bbbbbb }
|
||||
}
|
||||
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
.hextra-archive-timeline {
|
||||
@apply hx:border-l-2 hx:border-black/15 hx:dark:border-white/15;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.hextra-badge {
|
||||
@apply hx:inline-flex hx:items-center;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.hextra-banner-hidden .hextra-banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hextra-banner {
|
||||
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:underline hx:decoration-from-font;
|
||||
}
|
||||
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:leading-7 hx:first:mt-0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.hextra-cards {
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
|
||||
}
|
||||
|
||||
.hextra-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hextra-card img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hextra-card:hover .hextra-card-icon svg {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.hextra-card .hextra-card-icon svg {
|
||||
width: 1.5rem;
|
||||
color: #00000033;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hextra-card p {
|
||||
margin-top: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark .hextra-card .hextra-card-icon svg {
|
||||
color: #ffffff66;
|
||||
}
|
||||
|
||||
.dark .hextra-card:hover .hextra-card-icon svg {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.hextra-card-tag {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 5px;
|
||||
&:where(:dir(ltr)) {
|
||||
right: 5px;
|
||||
}
|
||||
&:where(:dir(rtl)) {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@supports (
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.hextra-code-copy-btn {
|
||||
@apply hx:backdrop-blur-md hx:opacity-85 hx:dark:opacity-80;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.hextra-feature-grid {
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.hextra-jupyter-code-cell {
|
||||
scrollbar-gutter: auto;
|
||||
|
||||
@apply hx:mt-6;
|
||||
|
||||
.hextra-jupyter-code-cell-outputs-container {
|
||||
@apply hx:text-xs hx:overflow-hidden;
|
||||
|
||||
.hextra-jupyter-code-cell-outputs {
|
||||
@apply hx:overflow-auto hx:max-h-[50vh];
|
||||
|
||||
pre {
|
||||
@apply hx:text-xs hx:overflow-auto hx:max-w-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
nav {
|
||||
.hextra-search-wrapper {
|
||||
@apply hx:hidden hx:md:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.hextra-nav-container-blur {
|
||||
@apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hamburger Menu - Flattened Structure */
|
||||
.hextra-hamburger-menu svg g {
|
||||
@apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg path {
|
||||
@apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open path {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open g {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open > path {
|
||||
@apply hx:opacity-0;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(1) {
|
||||
@apply hx:rotate-45;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(1) path {
|
||||
@apply hx:translate-y-1;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(2) {
|
||||
@apply hx:-rotate-45;
|
||||
}
|
||||
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(2) path {
|
||||
@apply hx:-translate-y-1;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.hextra-scrollbar, .hextra-scrollbar * {
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
&::-webkit-scrollbar {
|
||||
@apply hx:w-3 hx:h-3;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply hx:bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply hx:rounded-[10px];
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply hx:shadow-neutral-500/20 hx:hover:shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.hextra-search-wrapper {
|
||||
li {
|
||||
@apply hx:mx-2.5 hx:wrap-break-word hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
|
||||
a {
|
||||
@apply hx:focus-visible:outline-none hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
|
||||
}
|
||||
|
||||
.hextra-search-title {
|
||||
@apply hx:text-base hx:font-semibold hx:leading-5;
|
||||
}
|
||||
|
||||
.hextra-search-active {
|
||||
@apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
.hextra-search-no-result {
|
||||
@apply hx:block hx:select-none hx:p-8 hx:text-center hx:text-sm hx:text-gray-400;
|
||||
}
|
||||
|
||||
.hextra-search-prefix {
|
||||
@apply hx:mx-2.5 hx:mb-2 hx:mt-6 hx:select-none hx:border-b hx:border-black/10 hx:px-2.5 hx:pb-1.5 hx:text-xs hx:font-semibold
|
||||
hx:uppercase hx:text-gray-500 hx:first:mt-0 hx:dark:border-white/20 hx:dark:text-gray-300 hx:contrast-more:border-gray-600
|
||||
hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50;
|
||||
}
|
||||
|
||||
.hextra-search-excerpt {
|
||||
@apply hx:overflow-hidden hx:text-ellipsis hx:mt-1 hx:text-sm hx:leading-[1.35rem] hx:text-gray-600 hx:dark:text-gray-400 hx:contrast-more:dark:text-gray-50;
|
||||
display: -webkit-box;
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.hextra-search-match {
|
||||
@apply hx:text-primary-600;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@media (max-width: 48rem) {
|
||||
.hextra-sidebar-container {
|
||||
@apply hx:fixed hx:pt-[calc(var(--navbar-height)+var(--hextra-banner-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-15 hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
|
||||
transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
contain: layout style;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.hextra-sidebar-container {
|
||||
li > .hextra-sidebar-children {
|
||||
@apply hx:h-0;
|
||||
}
|
||||
li.open > .hextra-sidebar-children {
|
||||
@apply hx:h-auto hx:pt-1;
|
||||
}
|
||||
li.open > .hextra-sidebar-item > .hextra-sidebar-collapsible-button > svg > path {
|
||||
@apply hx:rotate-90;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.hextra-steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
counter-increment: step;
|
||||
@apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
|
||||
/* https://github.com/tailwindlabs/tailwindcss/issues/15597#issuecomment-2582673546 */
|
||||
@apply hx:before:bg-gray-100 hx:dark:before:bg-neutral-800;
|
||||
@apply hx:before:border-4 hx:before:border-white hx:dark:before:border-dark;
|
||||
&:before {
|
||||
content: counter(step);
|
||||
@apply hx:absolute hx:size-[33px];
|
||||
@apply hx:rounded-full hx:text-neutral-400 hx:text-base hx:font-normal hx:text-center hx:-indent-px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) .hextra-steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
&:before {
|
||||
content: counter(step, persian);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Table of Contents Scroll Spy Styles */
|
||||
.hextra-toc a.hextra-toc-active {
|
||||
@apply hx:text-gray-900! hx:dark:text-gray-50! hx:transition-all hx:duration-200;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* Code syntax highlight */
|
||||
@import "./chroma/light.css";
|
||||
@import "./chroma/dark.css";
|
||||
|
||||
.hextra-code-block {
|
||||
@apply hx:text-[.9em] hx:leading-5;
|
||||
|
||||
pre {
|
||||
@apply hx:text-[.9em] hx:bg-primary-700/5 hx:overflow-x-auto hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40;
|
||||
}
|
||||
|
||||
.hextra-code-filename {
|
||||
@apply hx:absolute hx:top-0 hx:z-1 hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
|
||||
}
|
||||
|
||||
.hextra-code-filename + pre:not(.lntable pre) {
|
||||
/* Override padding for code blocks with filename but no highlight */
|
||||
@apply hx:pt-12;
|
||||
}
|
||||
}
|
||||
|
||||
.hextra-code-block pre:not(.lntable pre) {
|
||||
@apply hx:px-4 hx:mb-4 hx:py-4 hx:rounded-xl;
|
||||
}
|
||||
|
||||
.hextra-code-block div:nth-of-type(2) pre {
|
||||
@apply hx:pt-12 hx:pb-4;
|
||||
}
|
||||
|
||||
.chroma {
|
||||
.lntable {
|
||||
@apply hx:m-0 hx:block hx:w-auto hx:overflow-auto hx:rounded-xl;
|
||||
|
||||
pre {
|
||||
@apply hx:pt-4 hx:pb-4;
|
||||
}
|
||||
}
|
||||
.ln,
|
||||
.lnt:not(.hl > .lnt),
|
||||
.hl:not(.line) {
|
||||
@apply hx:pl-4 hx:pr-4 hx:min-w-[2.6rem] hx:text-neutral-600 hx:dark:text-neutral-300;
|
||||
}
|
||||
.lntd {
|
||||
@apply hx:p-0 hx:align-top;
|
||||
}
|
||||
.lntd:last-of-type {
|
||||
@apply hx:w-full;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
@apply hx:block hx:w-full hx:bg-primary-800/10;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
hx:max-w-full
|
||||
@@ -0,0 +1,91 @@
|
||||
@import "tailwindcss" prefix(hx);
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47));
|
||||
--color-primary-100: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44));
|
||||
--color-primary-200: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 36));
|
||||
--color-primary-300: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27));
|
||||
--color-primary-400: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16));
|
||||
--color-primary-500: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
|
||||
--color-primary-600: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45));
|
||||
--color-primary-700: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39));
|
||||
--color-primary-800: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32));
|
||||
--color-primary-900: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24));
|
||||
--color-dark: #111;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply hx:text-base hx:antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply hx:w-full hx:bg-white hx:dark:bg-dark hx:dark:text-gray-100;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-hue: 212deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
--navbar-height: 4rem;
|
||||
--hextra-banner-height: 2rem;
|
||||
--menu-height: 3.75rem; /* 60px */
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary-hue: 204deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
|
||||
@utility hextra-focus {
|
||||
@apply hx:outline-none hx:ring-2 hx:ring-primary-200 hx:ring-offset-1 hx:ring-offset-primary-300 hx:dark:ring-primary-800 hx:dark:ring-offset-primary-700;
|
||||
}
|
||||
|
||||
@utility hextra-focus-visible {
|
||||
@apply hx:focus-visible:outline-none hx:focus-visible:ring-2 hx:focus-visible:ring-primary-200 hx:focus-visible:ring-offset-1 hx:focus-visible:ring-offset-primary-300 hx:dark:focus-visible:ring-primary-800 hx:dark:focus-visible:ring-offset-primary-700;
|
||||
}
|
||||
|
||||
@utility hextra-focus-visible-inset {
|
||||
@apply hx:focus-visible:outline-none hx:focus-visible:ring-inset hx:focus-visible:ring-2 hx:focus-visible:ring-primary-200 hx:dark:focus-visible:ring-primary-800 hx:focus-visible:ring-offset-0;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
abbr:where([title]) {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:where(a, button, [role="tab"], [role="menuitem"], [role="menuitemradio"], input, select, textarea, [tabindex="0"]):not(
|
||||
[class*="hextra-focus-visible"]
|
||||
):focus-visible {
|
||||
@apply hx:hextra-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@import "./typography.css";
|
||||
@import "./highlight.css";
|
||||
@import "./components/cards.css";
|
||||
@import "./components/steps.css";
|
||||
@import "./components/search.css";
|
||||
@import "./components/sidebar.css";
|
||||
@import "./components/banner.css";
|
||||
@import "./components/navbar.css";
|
||||
@import "./components/scrollbar.css";
|
||||
@import "./components/code-copy.css";
|
||||
@import "./components/hextra/feature-grid.css";
|
||||
@import "./components/jupyter.css";
|
||||
@import "./components/badge.css";
|
||||
@import "./components/toc.css";
|
||||
@import "./components/archives.css";
|
||||
@@ -0,0 +1,147 @@
|
||||
.content {
|
||||
:where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100;
|
||||
}
|
||||
:where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-10 hx:border-b hx:pb-1 hx:text-3xl hx:border-neutral-200/70 hx:contrast-more:border-neutral-400 hx:dark:border-primary-100/10 hx:contrast-more:dark:border-neutral-400;
|
||||
}
|
||||
:where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-2xl;
|
||||
}
|
||||
:where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-xl;
|
||||
}
|
||||
:where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-lg;
|
||||
}
|
||||
:where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-base;
|
||||
}
|
||||
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-6 hx:leading-7 hx:first:mt-0;
|
||||
}
|
||||
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:text-primary-600 hx:underline hx:decoration-from-font;
|
||||
}
|
||||
:where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-6 hx:border-gray-300 hx:italic hx:text-gray-700 hx:dark:border-gray-700 hx:dark:text-gray-400 hx:first:mt-0 hx:ltr:border-l-2 hx:ltr:pl-6 hx:rtl:border-r-2 hx:rtl:pr-6;
|
||||
}
|
||||
:where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:bg-primary-700/5 hx:mb-4 hx:overflow-x-auto hx:rounded-xl hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:text-[.9em] hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40 hx:py-4;
|
||||
}
|
||||
:where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:wrap-break-word hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:block hx:overflow-x-auto hx:my-6 hx:p-0 hx:first:mt-0 hx:w-full hx:text-sm hx:leading-5 hx:border-collapse;
|
||||
|
||||
thead {
|
||||
@apply hx:bg-gray-50 hx:dark:bg-gray-600/20;
|
||||
}
|
||||
tr {
|
||||
@apply hx:m-0 hx:border-t hx:border-gray-300 hx:p-0 hx:dark:border-gray-600;
|
||||
}
|
||||
th {
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:p-2 hx:font-semibold hx:dark:border-gray-600;
|
||||
}
|
||||
td {
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:p-2 hx:dark:border-gray-600;
|
||||
}
|
||||
}
|
||||
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-6 hx:list-decimal hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
|
||||
li {
|
||||
@apply hx:my-2;
|
||||
}
|
||||
}
|
||||
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-6 hx:list-disc hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
|
||||
li {
|
||||
@apply hx:my-2;
|
||||
}
|
||||
}
|
||||
/* Task lists - hide list markers for lists containing checkboxes */
|
||||
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)):has(li input[type="checkbox"]) {
|
||||
@apply hx:list-none;
|
||||
}
|
||||
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
|
||||
inside the list item (li) of any parent ul or ol.
|
||||
The rule sets the top margin of the selected list to zero. */
|
||||
:where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mt-0;
|
||||
}
|
||||
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:wrap-break-word hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:bg-transparent hx:rounded-none hx:dark:bg-transparent;
|
||||
}
|
||||
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:mx-auto hx:my-4 hx:rounded-md;
|
||||
}
|
||||
:where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
figcaption {
|
||||
@apply hx:text-sm hx:text-gray-500 hx:dark:text-gray-400 hx:mt-2 hx:block hx:text-center;
|
||||
}
|
||||
}
|
||||
/* Definition list */
|
||||
:where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
dt {
|
||||
@apply hx:mt-6 hx:font-semibold;
|
||||
}
|
||||
dd {
|
||||
@apply hx:my-2 hx:ps-6;
|
||||
}
|
||||
}
|
||||
/* Horizontal line */
|
||||
:where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:my-10 hx:first:mt-0 hx:last:mb-0 hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
.footnotes {
|
||||
@apply hx:mt-12 hx:text-sm;
|
||||
|
||||
hr {
|
||||
@apply hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
}
|
||||
.subheading-anchor {
|
||||
@apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1;
|
||||
|
||||
span:target + &,
|
||||
:hover > &,
|
||||
&:focus-visible {
|
||||
@apply hx:opacity-100;
|
||||
}
|
||||
|
||||
span + &,
|
||||
:hover > & {
|
||||
@apply hx:no-underline!;
|
||||
}
|
||||
|
||||
@apply hx:after:text-gray-300 hx:dark:after:text-neutral-700;
|
||||
&:after {
|
||||
@apply hx:content-['#'] hx:px-1;
|
||||
span:target + & {
|
||||
@apply hx:text-gray-400;
|
||||
@apply hx:dark:text-neutral-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article details > summary {
|
||||
&::-webkit-details-marker {
|
||||
@apply hx:hidden;
|
||||
}
|
||||
&::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx:h-5 hx:w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
vertical-align: -4px;
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) ol {
|
||||
list-style-type: persian;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* Hugo template to derive CSS variables from site and page parameters */
|
||||
|
||||
/* Do not remove the following comment. It is used by Hugo to render CSS variables.
|
||||
{{- $layoutWidthValues := dict "normal" "80rem" "wide" "90rem" "full" "100%" -}}
|
||||
{{- $layoutWidthDefault := index $layoutWidthValues "normal" -}}
|
||||
|
||||
{{- $maxPageWidth := (index $layoutWidthValues (site.Params.page.width | default "normal")) | default $layoutWidthDefault -}}
|
||||
{{- $maxNavbarWidth := (index $layoutWidthValues (site.Params.navbar.width | default "normal")) | default $layoutWidthDefault -}}
|
||||
{{- $maxFooterWidth := (index $layoutWidthValues (site.Params.footer.width | default "normal")) | default $layoutWidthDefault -}}
|
||||
|
||||
{{- $maxContentWidth := "72rem" -}}
|
||||
*/
|
||||
|
||||
:root {
|
||||
--hextra-max-page-width: {{ $maxPageWidth }};
|
||||
--hextra-max-content-width: {{ $maxContentWidth }};
|
||||
--hextra-max-navbar-width: {{ $maxNavbarWidth }};
|
||||
--hextra-max-footer-width: {{ $maxFooterWidth }};
|
||||
}
|
||||
|
||||
.hextra-max-page-width {
|
||||
max-width: var(--hextra-max-page-width);
|
||||
}
|
||||
|
||||
.hextra-max-content-width {
|
||||
max-width: var(--hextra-max-content-width);
|
||||
}
|
||||
|
||||
.hextra-max-navbar-width {
|
||||
max-width: var(--hextra-max-navbar-width);
|
||||
}
|
||||
|
||||
.hextra-max-footer-width {
|
||||
max-width: var(--hextra-max-footer-width);
|
||||
}
|
||||
Reference in New Issue
Block a user