diff options
Diffstat (limited to '')
36 files changed, 3531 insertions, 0 deletions
diff --git a/docs/static/docs.css b/docs/static/docs.css new file mode 100644 index 0000000..30c9898 --- /dev/null +++ b/docs/static/docs.css @@ -0,0 +1,413 @@ +.bg-cover { + position: absolute; + z-index: -1; + inset: 0; +} + +.Logo { + display: flex; + height: 2.5rem; + align-items: center; + color: rgb(24 24 27); + opacity: 0.9; + + &:hover { + opacity: 1; + } + & img.light { + display: block; + } + & img.dark { + display: none; + } + &:is(.dark *) img.light { + display: none; + } + &:is(.dark *) img.dark { + display: block; + } +} + +.NavLinks { + & a { + padding: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: rgb(82 82 91); + } + & a:hover { + color: rgb(24 24 27); + } + + & a:is(.dark *) { + color: rgb(212 212 216); + } + & a:is(.dark *):hover { + color: rgb(255 255 255); + } +} + +.homepage { + padding-top: 0; + padding-bottom: 0; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); +} +.homepage section.hero { + margin-left: auto; + margin-right: auto; + display: flex; + max-width: 56rem; + flex-direction: column; + padding-top: 2.25rem; + padding-bottom: 2.25rem; + color: rgb(23 23 23); + + &:is(.dark *) { + color: rgb(245 245 245); + } + + & h1 { + margin: 0 auto; + width: 300px; + height: 140px; + background-image: url("/static/img/jinjax-logo.svg"); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + text-indent: -999px; + display: none; + } + + & h2 { + font-size: 2.2rem; + font-weight: 600; + line-height: 1.2; + letter-spacing: -0.05em; + } + & h2 .g1 { + background-image: linear-gradient(to bottom right, #fbbf24, #fb923c); + background-clip: text; + color: transparent; + } + + & h2 .g2 { + background-image: linear-gradient(to bottom right, #34d399, #3b82f6); + background-clip: text; + color: transparent; + } + + @media (min-width: 768px) { + & { + padding-top: 2.5rem; + padding-bottom: 3rem; + } + & h1 { + display: block; + width: 300px; + height: 100px; + } + & h2 { + font-size: 2.4rem; + text-align: center; + } + & h2 .g2 { + white-space: nowrap; + } + } + + @media (min-width: 1024px) { + & h1 { + width: 400px; + height: 140px; + } + & h2 { + font-size: 3rem; + } + } +} + +.homepage section.code { + margin-left: -1rem; + margin-right: -1rem; + max-width: 72rem; + border-width: 1px; + border-color: rgb(212 212 212); + background-color: rgb(231 229 228); + padding: 1.5rem 0; + + &:is(.dark *) { + border-color: rgb(82 82 82); + background-color: rgb(41 37 36); + } + + & .panel { + display: flex; + flex-direction: column; + } + & .panel ~ .panel { + margin-top: 1.5rem; + } + & h2 { + margin-bottom: 0.5rem; + text-align: center; + font-size: 1.5rem; + line-height: 1.1; + font-weight: 700; + } + & .highlight { + flex-grow: 1; + } + & pre { + height: 100%; + } + + @media (min-width: 1024px) { + & { + border-radius: 1rem; + padding: 1.5rem; + margin-bottom: 2.5rem; + margin-left: auto; + margin-right: auto; + } + & .stack { + display: flex; + align-items: stretch; + } + & .panel { + width: 50%; + } + & .panel ~ .panel { + margin-top: 0; + margin-left: 0.5rem; + } + } +} + +.homepage section.features { + margin-left: auto; + margin-right: auto; + max-width: 56rem; + padding-top: 2rem; + padding-bottom: 2rem; + + & h2 { + margin-bottom: 2rem; + text-align: center; + font-size: 2.2rem; + line-height: 1.2; + font-weight: 800; + } + & h2 code { + font-size: 0.9em; + } + & .cards { + margin-top: 2.5rem; + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + column-gap: 1rem; + row-gap: 1.5rem; + font-size: 1rem; + line-height: 1.4rem; + } + & .card { + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + height: 9rem; + max-width: 28rem; + border-radius: 1rem; + border-width: 2px; + border-color: rgb(245 245 244); + background-color: rgb(250 250 249); + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + } + & .card:is(.dark *) { + border-color: rgb(41 37 36); + background-color: rgb(41 37 36); + } + & .card > .header { + margin-bottom: 0.5rem; + display: flex; + align-items: center; + flex-direction: row-reverse; + } + & .card > .header img { + float: left; + max-height: 32px; + width: 2.5rem; + padding-right: 0.75rem; + } + & .card > .header img:is(.dark *) { + filter: invert(100%) + } + & .card > .header h3 { + font-size: 1.4rem; + font-weight: 600; + color: rgb(24 24 27); + } + & .card > .header h3:is(.dark *) { + color: rgb(228 228 231); + } + & .card > .body { + flex-grow: 1; + margin-top: 0.5rem; + font-size: 1rem; + line-height: 1.4; + color: rgb(82 82 91); + } + & .card a { + font-weight: 600; + } + + @media (min-width: 768px) { + & .cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + & .card { + height: 10rem; + } + } + + @media (min-width: 1280px) { + & { + max-width: 1280px; + } + & .cards { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + & .card { + height: 13rem; + align-items: flex-start; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } + } +} + +.homepage section.spaghetti { + margin-bottom: 1.25rem; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + + & .wrapper { + margin-left: auto; + margin-right: auto; + max-width: 64rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 2rem; + padding-bottom: 2rem; + } + + & h2 { + margin-bottom: 2rem; + text-align: center; + font-size: 2.2rem; + line-height: 1.2; + font-weight: 800; + } + + & .text { + position: relative; + font-size: 1.4rem; + line-height: 1.4; + } + & .text img { + position: absolute; + left: 0; + top: 0; + display: none; + height: 100%; + max-height: 24rem; + } + & .text p { + margin-bottom:1.5rem; + } + + @media (min-width: 640px) { + & .wrapper { + padding-top: 3rem; + padding-bottom: 3rem; + } + } + + @media (min-width: 1024px) { + & .wrapper { + max-width: 72rem; + } + & .text { + padding-left: 440px; + } + & .text img { + display: block; + } + } +} + +.homepage section.engage { + background-image: linear-gradient(to bottom, #d6d3d1, #e7e5e4, #a8a29e); + margin-left: -1rem; + margin-right: -1rem; + + &:is(.dark *) { + background-image: linear-gradient(to bottom, #000, #1c1917); + } + + & .wrapper { + padding-top: 3rem; + padding-bottom: 3rem; + text-align: center; + } + + & h3 { + margin-bottom: 2rem; + text-align: center; + font-size: 1.875rem; + line-height: 1.4; + font-weight: 800; + } + + & a { + display: flex-inline; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + margin-bottom: 1.25rem; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 1rem; + background-image: linear-gradient(to top right, #a3e635, #65a30d); + padding: 1rem 2rem; + text-align: center; + font-family: var(--cd-font-sans); + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + color: rgb(39 39 42); + text-decoration-line: none; + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + & a:hover { + background-image: linear-gradient(to top right, #a3e635, #a3e635); + color: rgb(0 0 0); + } + & a i { + font-style: normal; + font-size: 1.2rem; + } + + & .hint { + font-size: 0.75rem; + line-height: 1rem; + } +}
\ No newline at end of file diff --git a/docs/static/favicon.ico b/docs/static/favicon.ico Binary files differnew file mode 100644 index 0000000..3615f29 --- /dev/null +++ b/docs/static/favicon.ico diff --git a/docs/static/fonts/karla-bold-ext.woff2 b/docs/static/fonts/karla-bold-ext.woff2 Binary files differnew file mode 100644 index 0000000..88c185a --- /dev/null +++ b/docs/static/fonts/karla-bold-ext.woff2 diff --git a/docs/static/fonts/karla-bold.woff2 b/docs/static/fonts/karla-bold.woff2 Binary files differnew file mode 100644 index 0000000..244e69d --- /dev/null +++ b/docs/static/fonts/karla-bold.woff2 diff --git a/docs/static/fonts/karla-regular-.woff2 b/docs/static/fonts/karla-regular-.woff2 Binary files differnew file mode 100644 index 0000000..244e69d --- /dev/null +++ b/docs/static/fonts/karla-regular-.woff2 diff --git a/docs/static/fonts/karla-regular-ext.woff2 b/docs/static/fonts/karla-regular-ext.woff2 Binary files differnew file mode 100644 index 0000000..88c185a --- /dev/null +++ b/docs/static/fonts/karla-regular-ext.woff2 diff --git a/docs/static/fonts/material-symbols-rounded.woff2 b/docs/static/fonts/material-symbols-rounded.woff2 Binary files differnew file mode 100644 index 0000000..0200f5e --- /dev/null +++ b/docs/static/fonts/material-symbols-rounded.woff2 diff --git a/docs/static/img/anatomy-en.png b/docs/static/img/anatomy-en.png Binary files differnew file mode 100644 index 0000000..d880437 --- /dev/null +++ b/docs/static/img/anatomy-en.png diff --git a/docs/static/img/anatomy-en.svg b/docs/static/img/anatomy-en.svg new file mode 100644 index 0000000..bacfb60 --- /dev/null +++ b/docs/static/img/anatomy-en.svg @@ -0,0 +1,347 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + width="420" + height="440" + version="1.1" + viewBox="0 0 420 440" + id="svg151" + sodipodi:docname="anatomy-en.svg" + inkscape:export-filename="/media/data/anatomy-en.png" + inkscape:export-xdpi="223.41818" + inkscape:export-ydpi="223.41818" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview153" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="2.3136364" + inkscape:cx="172.45579" + inkscape:cy="357.66208" + inkscape:window-width="1280" + inkscape:window-height="740" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg151" /> + <defs + id="defs5"> + <marker + id="TriangleStart" + overflow="visible" + markerHeight="2.6867051" + markerWidth="2.3239999" + orient="auto-start-reverse" + preserveAspectRatio="xMidYMid" + viewBox="0 0 5.3244081 6.1553851"> + <path + transform="scale(.6)" + d="m5.8 0-8.6 5v-10z" + fill="context-stroke" + fill-rule="evenodd" + stroke="context-stroke" + stroke-width="1pt" + id="path2" /> + </marker> + </defs> + <rect + width="420" + height="440" + fill="#ffffff" + fill-opacity="0.85" + stroke="#dddddd" + id="rect7" + x="0.40752804" + y="1.6170791" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418" /> + <path + d="m17 98h320" + stroke="#555" + stroke-width="1px" + id="path9" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418" /> + <text + id="code" + fill="#444444" + font-family="'SF Mono', Monaco, monospace" + font-size="11px" + font-weight="bold" + stroke-width="1.4" + style="line-height:1.25;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"><tspan + sodipodi:role="line" + id="tspan83456" + x="17" + y="90"><tspan + x="17" + y="90" + font-style="italic" + font-weight="600" + id="tspan8">components/Form.jinja</tspan><tspan + x="17" + y="131" + id="tspan10">{#def action, label, method="post" #}</tspan><tspan + x="17" + y="145" + id="tspan12" /></tspan><tspan + sodipodi:role="line" + id="tspan83458" + x="17" + y="103.75"><tspan + x="17" + y="145" + id="tspan83460" /></tspan><tspan + sodipodi:role="line" + x="17" + y="145" + id="tspan83494"><tspan + x="17" + y="145" + id="tspan83496">{#css form.css, /static/theme.css #}</tspan><tspan + x="17" + y="160" + id="tspan14">{#js form.js #}</tspan><tspan + x="17" + y="187" + fill="#555555" + id="tspan16">{% set method = method.lower() %}</tspan><tspan + x="17" + y="215" + fill="#3771c8" + id="tspan22"><tspan + id="tspan18"><</tspan><tspan + id="tspan20">form</tspan></tspan><tspan + x="24" + y="229" + id="tspan32"><tspan + fill="#5f8dd3" + id="tspan24">method=</tspan><tspan + fill="#008800" + id="tspan26">"</tspan><tspan + fill="#ff7f2a" + id="tspan28">{{ method }}</tspan><tspan + fill="#008800" + id="tspan30">"</tspan></tspan><tspan + x="24" + y="244" + id="tspan42"><tspan + fill="#5f8dd3" + id="tspan34">action=</tspan><tspan + fill="#008800" + id="tspan36">"</tspan><tspan + fill="#ff7f2a" + id="tspan38">{{ action }}</tspan><tspan + fill="#008800" + id="tspan40">"</tspan></tspan><tspan + x="24" + y="257" + fill="#ff7f2a" + id="tspan46">{{ attrs.render(<tspan + id="tspan44">class="form"</tspan>) }}</tspan><tspan + x="17" + y="272" + fill="#3771c8" + id="tspan48">></tspan><tspan + x="24" + y="286" + fill="#555555" + id="tspan50">{% if method == "post" -%}</tspan><tspan + x="24" + y="299" + fill="#3771c8" + id="tspan60"><input <tspan + fill="#5f8dd3" + id="tspan58">type=<tspan + fill="#008800" + id="tspan52">"hidden"</tspan> name=<tspan + fill="#008800" + id="tspan54">"csrf"</tspan> value="<tspan + fill="#ff7f2a" + id="tspan56">{{token}}</tspan>" /></tspan></tspan><tspan + x="24" + y="314" + fill="#555555" + id="tspan62">{% endif -%}</tspan><tspan + x="24" + y="341" + id="tspan66"><tspan + fill="#ff7f2a" + id="tspan64">{{ content }}</tspan></tspan><tspan + x="24" + y="370" + fill="#214478" + id="tspan72"><Button :label=<tspan + fill="#008800" + id="tspan53">"label"</tspan> /></tspan><tspan + x="17" + y="386" + fill="#3771c8" + id="tspan76"></<tspan + fill="#3771c8" + font-weight="bold" + id="tspan74">form</tspan>></tspan></tspan></text> + <g + id="arrows" + transform="translate(0.44852325)" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"> + <path + d="m 96,49 c 13,28 24,0.84 25,24" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000000" + stroke-width="1.7" + id="path94" /> + <path + d="m 263.05173,66.190373 c 3.21374,29.013609 -66.83732,10.210641 -66.83732,43.210637" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000000" + stroke-width="1.7" + id="path96" + sodipodi:nodetypes="cc" /> + <path + d="m 299.74715,171.9951 c -24.29574,-13.93589 13.75099,-34.69573 -30.19646,-30.86252" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000000" + stroke-width="1.7" + id="path98" + sodipodi:nodetypes="cc" /> + <path + d="M 299.74715,171.9951 C 282.96418,161.72557 170.13518,157.37012 132.6202,158.53979" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000000" + stroke-width="1.7" + id="path100" + sodipodi:nodetypes="cc" /> + <path + d="m 169,404 c -11,-17 -39.53849,-5.19589 -47.53849,-23.49589" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000000" + stroke-width="1.7" + id="path102" + sodipodi:nodetypes="cc" /> + </g> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99580394,0,0,0.99717236,22.306709,8.8220192)" + id="text111" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"><tspan + x="0" + y="11" + id="tspan105">Everything before the </tspan><tspan + x="0" + y="30" + id="tspan107">first dot is the component </tspan><tspan + x="0" + y="48" + id="tspan109">name</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99585975,0,0,0.94509234,216.62806,15.846205)" + id="text115" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"><tspan + x="0" + y="6" + id="tspan113">Arguments definition</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99962611,0,0,0.98554306,218.63043,28.835757)" + id="text121" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"><tspan + x="0" + y="11" + id="tspan117">Arguments without a </tspan><tspan + x="0" + y="30" + id="tspan119">default value are required</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue';white-space:pre;inline-size:102.594" + transform="matrix(1.0036128,0,0,0.99557292,305.3546,154.45222)" + id="text127" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418" + xml:space="preserve"><tspan + x="0" + y="11" + id="tspan1018">Optional lists of </tspan><tspan + x="0" + y="26" + id="tspan1020">CSS and JS files</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue';white-space:pre;inline-size:138.046" + transform="translate(277.91845,188.39939)" + id="text135" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418" + xml:space="preserve"><tspan + x="0" + y="11" + id="tspan1022">Paths are absolute or </tspan><tspan + x="0" + y="26" + id="tspan1024">relative to the root of +</tspan><tspan + x="0" + y="41" + id="tspan1026">the components folder</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99764329,0,0,0.98692271,247.4097,314.31427)" + id="text143" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418"><tspan + x="0" + y="11" + id="tspan137">You can have more </tspan><tspan + x="0" + y="30" + id="tspan139">than one parent </tspan><tspan + x="0" + y="48" + id="tspan141">element, unlike React</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue';white-space:pre;inline-size:165.6" + transform="matrix(0.9980174,0,0,0.98858774,171.78044,387.36773)" + id="text149" + inkscape:export-filename="/home/jpsca/Code/jinjax/docs/static/img/anatomy-en.png" + inkscape:export-xdpi="223.418" + inkscape:export-ydpi="223.418" + xml:space="preserve"><tspan + x="0" + y="11" + id="tspan1028">You can call any other </tspan><tspan + x="0" + y="26" + id="tspan1030">component and pass attributes </tspan><tspan + x="0" + y="41" + id="tspan1032">to them</tspan></text> +</svg> diff --git a/docs/static/img/anatomy-es.svg b/docs/static/img/anatomy-es.svg new file mode 100644 index 0000000..a3b3952 --- /dev/null +++ b/docs/static/img/anatomy-es.svg @@ -0,0 +1,288 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + width="420" + height="440" + version="1.1" + viewBox="0 0 420 440" + id="svg151" + sodipodi:docname="anatomy-es.svg" + inkscape:export-filename="/media/data/Code/jinjax-docs/static/img/anatomy-es.png" + inkscape:export-xdpi="223.41818" + inkscape:export-ydpi="223.41818" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview153" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="1.1568182" + inkscape:cx="14.695481" + inkscape:cy="220.86444" + inkscape:window-width="2560" + inkscape:window-height="1357" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg151" /> + <defs + id="defs5"> + <marker + id="TriangleStart" + overflow="visible" + markerHeight="2.6867051" + markerWidth="2.3239999" + orient="auto-start-reverse" + preserveAspectRatio="xMidYMid" + viewBox="0 0 5.3244081 6.1553851"> + <path + transform="scale(.6)" + d="m5.8 0-8.6 5v-10z" + fill="context-stroke" + fill-rule="evenodd" + stroke="context-stroke" + stroke-width="1pt" + id="path2" /> + </marker> + </defs> + <rect + width="420" + height="440" + fill="#fff" + fill-opacity=".85" + stroke="#ddd" + id="rect7" /> + <path + d="m17 98h320" + stroke="#555" + stroke-width="1px" + id="path9" /> + <text + id="code" + fill="#444" + font-family="'SF Mono', Monaco, monospace" + font-size="11px" + font-weight="bold" + stroke-width="1.4" + style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25"><tspan + x="17" + y="90" + font-style="italic" + font-weight="600" + id="tspan1151">components/Form.jinja</tspan><tspan + x="17" + y="131" + id="tspan1153">{#def action, label, method="post" #}</tspan><tspan + x="17" + y="145" + id="tspan1155">{#css form.css %}</tspan><tspan + x="17" + y="160" + id="tspan1157">{#js form.js %}</tspan><tspan + x="17" + y="187" + fill="#555" + id="tspan1159">{% set method = method.lower() %}</tspan><tspan + x="17" + y="215" + fill="#3771c8" + id="tspan1165"><tspan + id="tspan1161"><</tspan><tspan + id="tspan1163">form</tspan></tspan><tspan + x="24" + y="229" + id="tspan1175"><tspan + fill="#5f8dd3" + id="tspan1167">method=</tspan><tspan + fill="#080" + id="tspan1169">"</tspan><tspan + fill="#ff7f2a" + id="tspan1171">{{ method }}</tspan><tspan + fill="#080" + id="tspan1173">"</tspan></tspan><tspan + x="24" + y="244" + id="tspan1185"><tspan + fill="#5f8dd3" + id="tspan1177">action=</tspan><tspan + fill="#080" + id="tspan1179">"</tspan><tspan + fill="#ff7f2a" + id="tspan1181">{{ action }}</tspan><tspan + fill="#080" + id="tspan1183">"</tspan></tspan><tspan + x="24" + y="257" + fill="#ff7f2a" + id="tspan1189">{{ attrs.render(<tspan + id="tspan1187">class="form"</tspan>) }} + </tspan><tspan + x="17" + y="272" + fill="#3771c8" + id="tspan1191">></tspan><tspan + x="24" + y="286" + fill="#555" + id="tspan1193">{% if method == "post" -%}</tspan><tspan + x="24" + y="299" + fill="#3771c8" + id="tspan1203"> + <input <tspan + fill="#5f8dd3" + id="tspan1201">type=<tspan + fill="#080" + id="tspan1195">"hidden"</tspan> name=<tspan + fill="#080" + id="tspan1197">"csrf"</tspan> value="<tspan + fill="#ff7f2a" + id="tspan1199">{{token}}</tspan>" /></tspan></tspan><tspan + x="24" + y="314" + fill="#555" + id="tspan1205">{% endif -%}</tspan><tspan + x="24" + y="341" + id="tspan1209"><tspan + fill="#ff7f2a" + id="tspan1207">{{ content }}</tspan></tspan><tspan + x="24" + y="370" + fill="#214478" + id="tspan1215"> + <Button <tspan + fill="#5f8dd3" + id="tspan1211">label=</tspan><tspan + fill="#ff7f2a" + id="tspan1213">{label}</tspan>> + </tspan><tspan + x="17" + y="386" + fill="#3771c8" + id="tspan1219"></<tspan + fill="#3771c8" + font-weight="bold" + id="tspan1217">form</tspan>></tspan></text> + <g + id="arrows"> + <path + d="m96 49c13 28 24 .84 25 24" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000" + stroke-width="1.7" + id="path94" /> + <path + d="m255 65c13 28-60 16-60 49" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000" + stroke-width="1.7" + id="path96" /> + <path + d="m260 151c-26 6.7-74-7.6-108-9.2" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000" + stroke-width="1.7" + id="path98" /> + <path + d="m262 158c-26 5.2-91-.74-124-2" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000" + stroke-width="1.7" + id="path100" /> + <path + d="m169 404c-11-17-56-3.7-64-22" + fill="none" + marker-end="url(#TriangleStart)" + stroke="#000" + stroke-width="1.7" + id="path102" /> + </g> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99580394,0,0,0.99717236,22.306709,8.8220192)" + id="text111"><tspan + x="0" + y="11" + id="tspan105">Todo antes del primer </tspan><tspan + x="0" + y="30" + id="tspan107">punto es el nombre del </tspan><tspan + x="0" + y="48" + id="tspan109">componente</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99585975,0,0,0.94509234,216.62806,15.846205)" + id="text115"><tspan + x="0" + y="6" + id="tspan113">Definición de argumentos</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99962611,0,0,0.98554306,218.63043,28.835757)" + id="text121"><tspan + x="0" + y="11" + id="tspan117">Los argumentos sin valores </tspan><tspan + x="0" + y="30" + id="tspan119">predefinidos son obligatorios</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(1.0036128,0,0,0.99557292,276.36705,142.82391)" + id="text127"><tspan + x="0" + y="11" + id="tspan123">Listas opcionales de </tspan><tspan + x="0" + y="30" + id="tspan125">archivos CSS y JS</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="translate(275.93954,180.65106)" + id="text135"><tspan + x="0" + y="11" + id="tspan129">Las rutas son </tspan><tspan + x="0" + y="30" + id="tspan131">relativas al folder </tspan><tspan + x="0" + y="48" + id="tspan133">de componentes</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.99764329,0,0,0.98692271,247.4097,314.31427)" + id="text143"><tspan + x="0" + y="11" + id="tspan137">Puedes tener mas de </tspan><tspan + x="0" + y="30" + id="tspan139">un elemento padre, a </tspan><tspan + x="0" + y="48" + id="tspan141">diferencia de React</tspan></text> + <text + style="font-size:12px;font-family:'Comic Neue'" + transform="matrix(0.9980174,0,0,0.98858774,171.78044,387.36773)" + id="text149"><tspan + x="0" + y="11" + id="tspan145">Puedes llamar a cualquier </tspan><tspan + x="0" + y="30" + id="tspan147">otro componente</tspan></text> +</svg> diff --git a/docs/static/img/anchors.png b/docs/static/img/anchors.png Binary files differnew file mode 100644 index 0000000..ba74fe5 --- /dev/null +++ b/docs/static/img/anchors.png diff --git a/docs/static/img/apple-touch-icon.png b/docs/static/img/apple-touch-icon.png Binary files differnew file mode 100644 index 0000000..aa04ca4 --- /dev/null +++ b/docs/static/img/apple-touch-icon.png diff --git a/docs/static/img/composable.svg b/docs/static/img/composable.svg new file mode 100644 index 0000000..c54628c --- /dev/null +++ b/docs/static/img/composable.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> + <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" /> +</svg> diff --git a/docs/static/img/encapsulated.svg b/docs/static/img/encapsulated.svg new file mode 100644 index 0000000..afb9119 --- /dev/null +++ b/docs/static/img/encapsulated.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> + <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /> +</svg> diff --git a/docs/static/img/favicon.png b/docs/static/img/favicon.png Binary files differnew file mode 100644 index 0000000..9b6ccd2 --- /dev/null +++ b/docs/static/img/favicon.png diff --git a/docs/static/img/favicon.svg b/docs/static/img/favicon.svg new file mode 100644 index 0000000..d243cf2 --- /dev/null +++ b/docs/static/img/favicon.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg width="512" height="512" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + <rect style="fill:#ffffff" width="128.0000" height="112.0000" x="4.0000" y="12.0000" /> + <rect style="fill:#55b2ff" width="128.0000" height="16.0000" x="4.0000" y="12.0000" /> + <path style="fill:#000000" d="m 1.6901338,127.07004 v 3e-5 C 1.3828219,126.9448 0.8768176,126.51851 0.56568825,126.12275 L -6.9341144e-6,125.40319 V 67.874657 C -6.9341144e-6,23.83623 0.07409113,10.183354 0.31607229,9.6520087 1.0219463,8.1019542 -3.7115247,8.2034435 67.877153,8.2034435 h 65.786837 l 0.90134,0.9018238 0.90133,0.9018247 c 0,0 -0.0453,38.573404 -0.0679,57.860106 -0.0226,19.286701 -0.0679,57.860102 -0.0679,57.860102 l -0.7336,0.73399 -0.73359,0.73399 m -3.69215,-5.16205 V 33.351884 H 5.291517 V 122.03323 M 130.17158,13.497852 H 5.291517 V 28.057476 H 130.17158 Z" /> + <rect style="fill:#d0ec7e;stroke:#000000;stroke-width:4.81818;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" width="58.46307" height="58.463062" x="55.0000" y="50.0000" /> +</svg> diff --git a/docs/static/img/jinjax-logo-w.png b/docs/static/img/jinjax-logo-w.png Binary files differnew file mode 100644 index 0000000..74f52c3 --- /dev/null +++ b/docs/static/img/jinjax-logo-w.png diff --git a/docs/static/img/jinjax-logo-w.svg b/docs/static/img/jinjax-logo-w.svg new file mode 100644 index 0000000..0b8c9bf --- /dev/null +++ b/docs/static/img/jinjax-logo-w.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="87mm" height="24mm" viewBox="0 0 87 24"><g style="fill:#f0f0f0;fill-opacity:1"><g style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#d);fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:1.44682;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" transform="matrix(.46943 0 0 .47617 -461.947 -45.454)"><path d="M1054.78 135.02c6.991 0 10.976-3.75 10.976-10.273v-18.691h-8.281v18.632c0 2.227-.957 3.399-2.813 3.399-1.836 0-3.027-1.27-3.027-3.496v-.04h-7.93v.06c0 6.523 4.316 10.41 11.074 10.41zm18.964-25.273c2.246 0 4.082-1.758 4.082-3.984 0-2.247-1.836-4.004-4.082-4.004-2.226 0-4.082 1.757-4.082 4.004 0 2.226 1.856 3.984 4.082 3.984zm-4.004 24.492h8.008v-21.953h-8.008zm11.29.001h8.007v-12.403c0-2.13 1.074-3.653 2.988-3.653 2.032 0 2.95 1.368 2.95 3.653v12.402h8.007v-14.18c0-5.273-2.5-8.32-7.343-8.32-3.047 0-5.313 1.602-6.211 4.024h-.39v-3.477h-8.009zm29.042-24.493c2.246 0 4.082-1.758 4.082-3.984 0-2.247-1.836-4.004-4.082-4.004-2.226 0-4.082 1.757-4.082 4.004 0 2.226 1.856 3.984 4.082 3.984zm-4.804 31.914c5.566 0 8.808-2.598 8.808-7.05v-22.325h-8.008v21.973c0 1.23-.703 1.757-2.324 1.757-.332 0-.683-.019-.918-.058v5.586c.469.058 1.64.117 2.442.117zm18.027-7.109c2.773 0 5.117-1.153 5.957-2.891h.39v2.578h7.852v-14.941c0-4.805-3.574-7.559-9.844-7.559-6.308 0-10.234 2.754-10.566 6.992l-.02.254h7.148l.04-.097c.37-.918 1.328-1.426 2.91-1.426 1.543 0 2.48.703 2.48 1.836v1.62l-4.336.255c-5.82.351-9.004 2.695-9.004 6.68v.038c0 4.004 2.793 6.66 6.992 6.66zm.645-7.266v-.04c0-1.054.976-1.757 2.656-1.874l3.047-.195v1.27c0 1.523-1.426 2.714-3.223 2.714-1.523 0-2.48-.742-2.48-1.875zm15.468 6.954h8.75l4.824-8.497h.157l4.863 8.496h9.219l-8.692-14.082v-.156l8.73-13.945h-9.179l-4.453 8.984h-.156l-4.434-8.984h-9.648l8.32 13.906v.156z" aria-label="JinjaX" style="font-weight:900;font-family:"SF Pro Text";-inkscape-font-specification:"SF Pro Text Heavy";fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:1.44682;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/></g></g><g style="fill:#90d73b;stroke:#4d4d4d;stroke-width:4"><path fill="#fff" stroke="none" d="M1.74 1.616h23.704v20.906H1.741Z"/><path fill="#e6e6e6" stroke="none" d="M1.74 1.616h23.704v2.986H1.741Z"/><path fill="#4d4d4d" stroke="none" d="M1 23c.003-7.61 0-15.455 0-22h25v22m-.894-.846V5.601H1.98v16.553m23.126-18.9V1.897H1.98v2.718h23.126z"/><path d="M92.311 45.905h26.316v26.316H92.311Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#fff" d="M17.147 45.887h64.319v64.319H17.147Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#55b2ff" d="M25.854 53.803h35.304v35.304H25.854Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#e6e6e6" d="M92.311 83.873h26.316v26.316H92.311Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/></g></svg>
\ No newline at end of file diff --git a/docs/static/img/jinjax-logo.png b/docs/static/img/jinjax-logo.png Binary files differnew file mode 100644 index 0000000..941df9f --- /dev/null +++ b/docs/static/img/jinjax-logo.png diff --git a/docs/static/img/jinjax-logo.svg b/docs/static/img/jinjax-logo.svg new file mode 100644 index 0000000..4870abb --- /dev/null +++ b/docs/static/img/jinjax-logo.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="87mm" height="24mm" viewBox="0 0 87 24"><g style="fill:#000;fill-opacity:1"><g style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#d);fill:#000;fill-opacity:1;stroke:none;stroke-width:1.44682;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" transform="matrix(.46943 0 0 .47617 -461.947 -45.454)"><path d="M1054.78 135.02c6.991 0 10.976-3.75 10.976-10.273v-18.691h-8.281v18.632c0 2.227-.957 3.399-2.813 3.399-1.836 0-3.027-1.27-3.027-3.496v-.04h-7.93v.06c0 6.523 4.316 10.41 11.074 10.41zm18.964-25.273c2.246 0 4.082-1.758 4.082-3.984 0-2.247-1.836-4.004-4.082-4.004-2.226 0-4.082 1.757-4.082 4.004 0 2.226 1.856 3.984 4.082 3.984zm-4.004 24.492h8.008v-21.953h-8.008zm11.29.001h8.007v-12.403c0-2.13 1.074-3.653 2.988-3.653 2.032 0 2.95 1.368 2.95 3.653v12.402h8.007v-14.18c0-5.273-2.5-8.32-7.343-8.32-3.047 0-5.313 1.602-6.211 4.024h-.39v-3.477h-8.009zm29.042-24.493c2.246 0 4.082-1.758 4.082-3.984 0-2.247-1.836-4.004-4.082-4.004-2.226 0-4.082 1.757-4.082 4.004 0 2.226 1.856 3.984 4.082 3.984zm-4.804 31.914c5.566 0 8.808-2.598 8.808-7.05v-22.325h-8.008v21.973c0 1.23-.703 1.757-2.324 1.757-.332 0-.683-.019-.918-.058v5.586c.469.058 1.64.117 2.442.117zm18.027-7.109c2.773 0 5.117-1.153 5.957-2.891h.39v2.578h7.852v-14.941c0-4.805-3.574-7.559-9.844-7.559-6.308 0-10.234 2.754-10.566 6.992l-.02.254h7.148l.04-.097c.37-.918 1.328-1.426 2.91-1.426 1.543 0 2.48.703 2.48 1.836v1.62l-4.336.255c-5.82.351-9.004 2.695-9.004 6.68v.038c0 4.004 2.793 6.66 6.992 6.66zm.645-7.266v-.04c0-1.054.976-1.757 2.656-1.874l3.047-.195v1.27c0 1.523-1.426 2.714-3.223 2.714-1.523 0-2.48-.742-2.48-1.875zm15.468 6.954h8.75l4.824-8.497h.157l4.863 8.496h9.219l-8.692-14.082v-.156l8.73-13.945h-9.179l-4.453 8.984h-.156l-4.434-8.984h-9.648l8.32 13.906v.156z" aria-label="JinjaX" style="font-weight:900;font-family:"SF Pro Text";-inkscape-font-specification:"SF Pro Text Heavy";fill:#000;fill-opacity:1;stroke:none;stroke-width:1.44682;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/></g></g><g style="fill:#90d73b;stroke:#4d4d4d;stroke-width:4"><path fill="#fff" stroke="none" d="M1.74 1.616h23.704v20.906H1.741Z"/><path fill="#e6e6e6" stroke="none" d="M1.74 1.616h23.704v2.986H1.741Z"/><path fill="#4d4d4d" stroke="none" d="M1 23c.003-7.61 0-15.455 0-22h25v22m-.894-.846V5.601H1.98v16.553m23.126-18.9V1.897H1.98v2.718h23.126z"/><path d="M92.311 45.905h26.316v26.316H92.311Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#fff" d="M17.147 45.887h64.319v64.319H17.147Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#55b2ff" d="M25.854 53.803h35.304v35.304H25.854Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/><path fill="#e6e6e6" d="M92.311 83.873h26.316v26.316H92.311Z" transform="matrix(.18519 0 0 .18666 1 -.624)"/></g></svg>
\ No newline at end of file diff --git a/docs/static/img/logo.png b/docs/static/img/logo.png Binary files differnew file mode 100644 index 0000000..4b12c00 --- /dev/null +++ b/docs/static/img/logo.png diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg new file mode 100644 index 0000000..ed5ce3f --- /dev/null +++ b/docs/static/img/logo.svg @@ -0,0 +1,9 @@ +<svg width="512" height="512" viewBox="0 0 135 135" fill="#90d73b" stroke-width="4" stroke="#4d4d4d" xmlns="http://www.w3.org/2000/svg"> +<path d="M4 12h128v112H4z" fill="#fff" stroke-width="0"/> +<path d="M4 12h128v16H4z" fill="#e6e6e6" stroke-width="0"/> +<path d="M0 126.563C.014 85.794 0 43.763 0 8.7h135v117.862m-4.828-4.53V33.35H5.292v88.681M130.17 20.78V13.5H5.29v14.56h124.88z" fill="#4d4d4d" stroke-width="0"/> +<path d="M92.311 45.905h26.316v26.316H92.311z"/> +<path d="M17.147 45.887h64.319v64.319H17.147z" fill="#fff"/> +<path d="M25.854 53.803h35.304v35.304H25.854z" fill="#55b2ff"/> +<path d="M92.311 83.873h26.316v26.316H92.311z" fill="#e6e6e6"/> +</svg>
\ No newline at end of file diff --git a/docs/static/img/modern.svg b/docs/static/img/modern.svg new file mode 100644 index 0000000..e986962 --- /dev/null +++ b/docs/static/img/modern.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> +<svg width="32mm" height="20mm" version="1.1" viewBox="0 0 32 20" xmlns="http://www.w3.org/2000/svg"> + <text transform="matrix(.38398 0 0 .3722 -42.207 -42.291)" fill="#000000" font-family="sans-serif" font-size="40px" style="line-height:1.25;shape-inside:url(#rect2079);white-space:pre" xml:space="preserve"/> + <path d="m21.48 2.5704e-6h-3.3855l-7.4789 20h3.3986z" fill="#3465a4" stroke-width=".7728"/> + <path d="m32 8.6678-10.497-3.7261v2.6314l7.9024 2.5711-7.9024 2.5812v2.5711l10.497-3.7261z" fill="#333" stroke-width=".44679"/> + <path d="m1.3575e-7 8.6678 10.497-3.7261v2.6314l-7.9024 2.5711 7.9024 2.5812v2.5711l-10.497-3.7261z" fill="#333" stroke-width=".44679"/> +</svg> diff --git a/docs/static/img/practical.svg b/docs/static/img/practical.svg new file mode 100644 index 0000000..702446c --- /dev/null +++ b/docs/static/img/practical.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> + <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /> +</svg> diff --git a/docs/static/img/simple.svg b/docs/static/img/simple.svg new file mode 100644 index 0000000..b69150b --- /dev/null +++ b/docs/static/img/simple.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> + <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> +</svg> diff --git a/docs/static/img/slots-_slot.png b/docs/static/img/slots-_slot.png Binary files differnew file mode 100644 index 0000000..93cbab3 --- /dev/null +++ b/docs/static/img/slots-_slot.png diff --git a/docs/static/img/slots-diagram.png b/docs/static/img/slots-diagram.png Binary files differnew file mode 100644 index 0000000..c085250 --- /dev/null +++ b/docs/static/img/slots-diagram.png diff --git a/docs/static/img/spaghetti_code.png b/docs/static/img/spaghetti_code.png Binary files differnew file mode 100644 index 0000000..df44455 --- /dev/null +++ b/docs/static/img/spaghetti_code.png diff --git a/docs/static/img/ui-accordion.png b/docs/static/img/ui-accordion.png Binary files differnew file mode 100644 index 0000000..adddd7b --- /dev/null +++ b/docs/static/img/ui-accordion.png diff --git a/docs/static/img/ui-linkedlist.png b/docs/static/img/ui-linkedlist.png Binary files differnew file mode 100644 index 0000000..87667ba --- /dev/null +++ b/docs/static/img/ui-linkedlist.png diff --git a/docs/static/img/ui-menu.png b/docs/static/img/ui-menu.png Binary files differnew file mode 100644 index 0000000..ee82e03 --- /dev/null +++ b/docs/static/img/ui-menu.png diff --git a/docs/static/img/ui-popover.png b/docs/static/img/ui-popover.png Binary files differnew file mode 100644 index 0000000..22507f5 --- /dev/null +++ b/docs/static/img/ui-popover.png diff --git a/docs/static/img/ui-reldate.png b/docs/static/img/ui-reldate.png Binary files differnew file mode 100644 index 0000000..e2258c5 --- /dev/null +++ b/docs/static/img/ui-reldate.png diff --git a/docs/static/img/ui-tabs.png b/docs/static/img/ui-tabs.png Binary files differnew file mode 100644 index 0000000..7b3bccd --- /dev/null +++ b/docs/static/img/ui-tabs.png diff --git a/docs/static/prose.css b/docs/static/prose.css new file mode 100644 index 0000000..9a6531d --- /dev/null +++ b/docs/static/prose.css @@ -0,0 +1,637 @@ +.prose { + --cd-prose-body: #3f3f46; + --cd-prose-headings: #18181b; + --cd-prose-lead: #52525b; + --cd-prose-links: #18181b; + --cd-prose-bold: #18181b; + --cd-prose-counters: #71717a; + --cd-prose-bullets: #d4d4d8; + --cd-prose-hr: #e4e4e7; + --cd-prose-quotes: #18181b; + --cd-prose-quote-borders: #e4e4e7; + --cd-prose-captions: #71717a; + --cd-prose-code: #18181b; + --cd-prose-pre-code: rgb(238 238 238); + --cd-prose-pre-border: rgb(51, 51, 51); + --cd-prose-pre-bg: rgb(24 24 24); + --cd-prose-th-borders: #ddd; + --cd-prose-td-borders: #eee; + --cd-prose-bg-hover: rgba(0,0,0,0.035); + + --cd-prose-invert-body: #d4d4d8; + --cd-prose-invert-headings: #fff; + --cd-prose-invert-lead: #a1a1aa; + --cd-prose-invert-links: #fff; + --cd-prose-invert-bold: #fff; + --cd-prose-invert-counters: #a1a1aa; + --cd-prose-invert-bullets: #52525b; + --cd-prose-invert-hr: #3f3f46; + --cd-prose-invert-quotes: #f4f4f5; + --cd-prose-invert-quote-borders: #3f3f46; + --cd-prose-invert-captions: #a1a1aa; + --cd-prose-invert-code: #fff; + --cd-prose-invert-pre-code: rgb(238 238 238); + --cd-prose-invert-pre-border: rgb(51, 51, 51); + --cd-prose-invert-pre-bg: rgb(24 24 24); + --cd-prose-invert-th-borders: #52525b; + --cd-prose-invert-td-borders: #3f3f46; + --cd-prose-invert-bg-hover: rgba(0,0,0,0.035); +} + +.dark .prose { + --cd-prose-body: var(--cd-prose-invert-body); + --cd-prose-headings: var(--cd-prose-invert-headings); + --cd-prose-lead: var(--cd-prose-invert-lead); + --cd-prose-links: var(--cd-prose-invert-links); + --cd-prose-bold: var(--cd-prose-invert-bold); + --cd-prose-counters: var(--cd-prose-invert-counters); + --cd-prose-bullets: var(--cd-prose-invert-bullets); + --cd-prose-hr: var(--cd-prose-invert-hr); + --cd-prose-quotes: var(--cd-prose-invert-quotes); + --cd-prose-quote-borders: var(--cd-prose-invert-quote-borders); + --cd-prose-captions: var(--cd-prose-invert-captions); + --cd-prose-code: var(--cd-prose-invert-code); + --cd-prose-pre-code: var(--cd-prose-invert-pre-code); + --cd-prose-pre-border: var(--cd-prose-invert-pre-border); + --cd-prose-pre-bg: var(--cd-prose-invert-pre-bg); + --cd-prose-th-borders: var(--cd-prose-invert-th-borders); + --cd-prose-td-borders: var(--cd-prose-invert-td-borders); + --cd-prose-bg-hover: var(--cd-prose-invert-bg-hover); +} + +.prose { + font-size: 1em; + line-height: 1.75; + color: var(--cd-prose-body); +} + +.prose h1:not(:where([class~="not-prose"] *)) , +.prose h2:not(:where([class~="not-prose"] *)) , +.prose h3:not(:where([class~="not-prose"] *)) , +.prose h4:not(:where([class~="not-prose"] *)) , +.prose h5:not(:where([class~="not-prose"] *)) , +.prose h6:not(:where([class~="not-prose"] *)) { + font-family: var(--cd-font-serif); +} + +.prose :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-lead); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose :where(a):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-links); + text-decoration: underline; + font-weight: 500; +} + +.prose :where(strong):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-bold); + font-weight: 600; +} + +.prose :where(a strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(ol):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-left: 1.625em; +} + +.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; +} + +.prose :where(ul):not(:where([class~="not-prose"] *)) { + list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-left: 1.625em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { + font-weight: 400; + color: var(--cd-prose-counters); +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { + color: var(--cd-prose-bullets); +} + +.prose :where(hr):not(:where([class~="not-prose"] *)) { + border-color: var(--cd-prose-hr); + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; +} + +.prose :where(blockquote):not(:where([class~="not-prose"] *)) { + font-weight: 500; + font-style: italic; + color: var(--cd-prose-quotes); + border-left-width: 0.25em; + border-left-color: var(--cd-prose-quote-borders); + quotes: "\201C""\201D""\2018""\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; +} + +.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { + content: open-quote; +} + +.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { + content: close-quote; +} + +.prose :where(h1):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 800; + font-size: 2.2rem; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { + font-weight: 900; + color: inherit; +} + +.prose :where(h2):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 700; + font-size: 1.8em; + margin-top: 1.2em; + margin-bottom: 0.5em; + line-height: 1.3333333; +} + +.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { + font-weight: 800; + color: inherit; +} + +.prose :where(h3):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 600; + font-size: 1.4em; + margin-top: 1.6em; + margin-bottom: 0.4em; + line-height: 1.6; +} + +.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; + color: inherit; +} + +.prose :where(h4):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 600; + font-size: 1.2em; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; +} + +.prose :where(h4 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; + color: inherit; +} + +.prose :where(h5):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 600; + font-size: 1em; + margin-top: 1em; + margin-bottom: 0.5em; + line-height: 1.5; +} + + +.prose :where(h6):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 600; + font-size: 1em; + margin-top: 1em; + margin-bottom: 0.5em; + line-height: 1.4; +} + + +.prose :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; +} + +.prose :where(figcaption):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-captions); + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; +} + +.prose :where(code):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-code); + font-size: 0.98em; + letter-spacing: -0.02em; +} +.prose :where(code):not(:where(pre code)):not(:where([class~="not-prose"] *)) { + padding: 0.1em; + background: var(--cd-bg-color-hover); +} + +.prose :where(a code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(h1 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.875em; +} + +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.9em; +} + +.prose :where(h4 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(table):not(:where([class~="not-prose"] *)) { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + border-width: 1px; + border-color: var(--cd-prose-td-borders); +} + +.prose :where(thead):not(:where([class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--cd-prose-th-borders); +} + +.prose :where(thead th):not(:where([class~="not-prose"] *)) { + color: var(--cd-prose-headings); + font-weight: 600; + vertical-align: bottom; + border-left-width: 1px; + border-left-color: var(--cd-prose-th-borders); + /* text-transform: uppercase; */ +} +.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + border-left-width: 0; +} + +.prose :where(tbody tr):not(:where([class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--cd-prose-td-borders); + transition: background-color 125ms; +} +.prose :where(tbody tr:hover):not(:where([class~="not-prose"] *)) { + background-color: var(--cd-prose-bg-hover); +} + +.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { + border-bottom-width: 0; +} + +.prose :where(tbody td):not(:where([class~="not-prose"] *)) { + vertical-align: baseline; + border-left-width: 1px; + border-left-color: var(--cd-prose-th-borders); +} +.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { + border-left-width: 0; +} +.prose :where(tbody td p:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(tfoot):not(:where([class~="not-prose"] *)) { + border-top-width: 1px; + border-top-color: var(--cd-prose-th-borders); +} + +.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { + vertical-align: top; +} + +.prose :where(th, td):not(:where([class~="not-prose"] *)) { + padding: 0.5rem 1rem; +} + +.prose :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose :where(.task-list .task-list):not(:where([class~="not-prose"] *)) { + padding-left: 1em; +} + +.prose :where(dl):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose :where(dt):not(:where([class~="not-prose"] *)) { + font-weight: bold; +} + +.prose :where(dd):not(:where([class~="not-prose"] *)) { + padding-left: 1em; +} + +pre { + border: 1px solid rgb(var(--cd-prose-pre-border)); + overflow-x: auto; + font-weight: 400; + font-feature-settings: "kern"; + white-space: pre; + scrollbar-width: thin; + padding: 1.25rem 1.5rem; +} +pre::-webkit-scrollbar { + width: 2px; + background-color: ButtonFace; +} +pre:has([data-linenos]) { + padding-left: 0; +} +pre code { + background-color: transparent; + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: inherit; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; + +} +pre a { + text-decoration: none; +} + +.highlight { + margin-top: 0.5rem; + margin-bottom: 1rem; + border-radius: 6px; +} +.highlight:has(> .filename) { + background-color: rgb(249 250 251); + border: 1px solid rgb(153, 153, 153); +} +.highlight:is(.dark *):has(> .filename) { + background-color: rgb(55 65 81); + border-color: rgb(75 85 99); +} +.highlight > .filename { + border-radius: 6px 0 0 0; + display: inline-block; + border-right: 1px solid rgb(153, 153, 153); + background-color: #e7e9ed; + padding: 0.5rem; + color: #333; + font-weight: 500; + font-size: 0.9em; +} +.highlight:is(.dark *) > .filename { + border-color: rgb(75 85 99); + background-color: #111; + color: rgb(255 255 255); +} +.highlight pre { + background-color: rgba(0, 0, 0, 0.9); + border-radius: 6px; + font-size: 0.98rem; + line-height: 1.4; +} +.highlight .filename + pre { + border-radius: 0 0 6px 6px; +} +.highlight pre code { color: white; } + +.highlight pre code [data-linenos]:before { + content: attr(data-linenos); + display: inline-block; + width: 3rem; + text-align: right; + padding-right: 1rem; + white-space: nowrap; + color: rgb(82 82 91); + font-size: 0.75rem; +} +.highlight .hll { + background-color: #333; + display: block; +} + +.highlight .c { color: hsl(31, 76%, 64%) } /* Comment */ +.highlight .err { color: #960050; background-color: #1e0010 } /* Error */ +.highlight .k { color: #66d9ef } /* Keyword */ +.highlight .l { color: #ae81ff } /* Literal */ +.highlight .n { color: #f8f8f2 } /* Name */ +.highlight .o { color: #f92672 } /* Operator */ +.highlight .p { color: #f8f8f2 } /* Punctuation */ +.highlight .cm { color: hsl(30, 20%, 50%) } /* Comment.Multiline */ +.highlight .cp { color: hsl(30, 20%, 50%) } /* Comment.Preproc */ +.highlight .c1 { color: hsl(30, 20%, 50%) } /* Comment.Single */ +.highlight .cs { color: hsl(30, 20%, 50%) } /* Comment.Special */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .kc { color: #66d9ef } /* Keyword.Constant */ +.highlight .kd { color: #66d9ef } /* Keyword.Declaration */ +.highlight .kn { color: #f92672 } /* Keyword.Namespace */ +.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ +.highlight .kr { color: #66d9ef } /* Keyword.Reserved */ +.highlight .kt { color: #66d9ef } /* Keyword.Type */ +.highlight .ld { color: #e6db74 } /* Literal.Date */ +.highlight .m { color: #ae81ff } /* Literal.Number */ +.highlight .s { color: #e6db74 } /* Literal.String */ +.highlight .na { color: #a6e22e } /* Name.Attribute */ +.highlight .nb { color: #f8f8f2 } /* Name.Builtin */ +.highlight .nc { color: #a6e22e } /* Name.Class */ +.highlight .no { color: #66d9ef } /* Name.Constant */ +.highlight .nd { color: #a6e22e } /* Name.Decorator */ +.highlight .ni { color: #f8f8f2 } /* Name.Entity */ +.highlight .ne { color: #a6e22e } /* Name.Exception */ +.highlight .nf { color: #a6e22e } /* Name.Function */ +.highlight .nl { color: #f8f8f2 } /* Name.Label */ +.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ +.highlight .nx { color: #a6e22e } /* Name.Other */ +.highlight .py { color: #f8f8f2 } /* Name.Property */ +.highlight .nt { color: #f92672 } /* Name.Tag */ +.highlight .nv { color: #f8f8f2 } /* Name.Variable */ +.highlight .ow { color: #f92672 } /* Operator.Word */ +.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ +.highlight .mf { color: #ae81ff } /* Literal.Number.Float */ +.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ +.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ +.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ +.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ +.highlight .sc { color: #e6db74 } /* Literal.String.Char */ +.highlight .sd { color: #e6db74 } /* Literal.String.Doc */ +.highlight .s2 { color: #e6db74 } /* Literal.String.Double */ +.highlight .se { color: #ae81ff } /* Literal.String.Escape */ +.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ +.highlight .si { color: #e6db74 } /* Literal.String.Interpol */ +.highlight .sx { color: #e6db74 } /* Literal.String.Other */ +.highlight .sr { color: #e6db74 } /* Literal.String.Regex */ +.highlight .s1 { color: #e6db74 } /* Literal.String.Single */ +.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ +.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ +.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ +.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ + +.highlight .gh { } /* Generic Heading & Diff Header */ +.highlight .gu { color: hsl(30, 20%, 50%); } /* Generic.Subheading & Diff Unified/Comment? */ +.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ +.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ diff --git a/docs/static/theme.css b/docs/static/theme.css new file mode 100644 index 0000000..8dad4aa --- /dev/null +++ b/docs/static/theme.css @@ -0,0 +1,1808 @@ +/* latin */ +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 400; + src: url("./fonts/karla-regular-.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 400; + src: url("./fonts/karla-regular-ext.woff2") format("woff2"); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 700; + src: url("./fonts/karla-bold.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: "Karla"; + font-style: normal; + font-weight: 700; + src: url("./fonts/karla-bold-ext.woff2") format("woff2"); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: "Material Symbols Rounded"; + font-style: normal; + font-weight: 100 700; + font-display: block; + src: url("./fonts/material-symbols-rounded.woff2") format("woff2"); +} + +/* ---------------------------------------------------------------------- */ + +html { + --cd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --cd-font-sans: Karla, sans-serif; + --cd-font-icons: "Material Symbols Rounded"; + + --cd-padding-left: max(1rem, env(safe-area-inset-right)); + --cd-padding-right: max(1rem, env(safe-area-inset-left)); + + --cd-brand-color: #fbbf24; + --cd-bg-color-light: rgb(255 255 255); + --cd-bg-color-dark: rgb(23 23 23); + + --cd-bg-color: var(--cd-bg-color-light); + --cd-bg-color-hover: rgb(240, 240, 240); + --cd-text-color: rgb(23 23 23); + --cd-text-color-mild: rgb(63 63 70); + --cd-border-color: #e3e3e4; + + --cd-nav-bg-color: rgba(255, 255, 255, 0.8); + --cd-nav-bg-color-hover: rgb(244, 244, 244); + + --doc-symbol-parameter-fg-color: #df50af; + --doc-symbol-attribute-fg-color: #953800; + --doc-symbol-function-fg-color: #8250df; + --doc-symbol-method-fg-color: #8250df; + --doc-symbol-class-fg-color: #0550ae; + --doc-symbol-module-fg-color: #5cad0f; + + --doc-symbol-parameter-bg-color: #df50af1a; + --doc-symbol-attribute-bg-color: #9538001a; + --doc-symbol-function-bg-color: #8250df1a; + --doc-symbol-method-bg-color: #8250df1a; + --doc-symbol-class-bg-color: #0550ae1a; + --doc-symbol-module-bg-color: #5cad0f1a; +} + +html.dark { + --cd-brand-color: #3451b2; + + --cd-bg-color: var(--cd-bg-color-dark); + --cd-bg-color-hover: rgb(40 40 40); + --cd-text-color: rgb(250 250 250); + --cd-text-color-mild: rgb(161 161 170); + --cd-border-color: rgb(60 60 60); + + --cd-nav-bg-color: rgba(60, 60, 60, 0.8); + --cd-nav-bg-color-hover: rgb(70, 70, 70); + + --doc-symbol-parameter-fg-color: #ffa8cc; + --doc-symbol-attribute-fg-color: #ffa657; + --doc-symbol-function-fg-color: #d2a8ff; + --doc-symbol-method-fg-color: #d2a8ff; + --doc-symbol-class-fg-color: #79c0ff; + --doc-symbol-module-fg-color: #baff79; + + --doc-symbol-parameter-bg-color: #ffa8cc1a; + --doc-symbol-attribute-bg-color: #ffa6571a; + --doc-symbol-function-bg-color: #d2a8ff1a; + --doc-symbol-method-bg-color: #d2a8ff1a; + --doc-symbol-class-bg-color: #79c0ff1a; + --doc-symbol-module-bg-color: #baff791a; +} + +/* ---------------------------------------------------------------------- */ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ +*, +::before, +::after { + /* 1 */ + box-sizing: border-box; + /* 2 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; +} +::before, +::after { + --cd-content: ""; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Set default font sans +4. Disable tap highlights on iOS +*/ +html, +:host { + /* 1 */ + line-height: 1.5; + /* 2 */ + tab-size: 4; + /* 3 */ + -webkit-text-size-adjust: 100%; + /* 4 */ + font-family: var(--cd-font-sans); + font-feature-settings: normal; + font-variation-settings: normal; + /* 5 */ + -webkit-tap-highlight-color: transparent; +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class + directly on the `html` element. +*/ +body { + /* 1 */ + margin: 0; + /* 2 */ + line-height: inherit; +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ +hr { + /* 1 */ + height: 0; + /* 2 */ + color: inherit; + /* 3 */ + border-top-width: 1px; +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* Remove the default font size and weight for headings. */ +h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; +} + +/* Reset links to optimize for opt-in styling instead of opt-out. */ +a { + color: inherit; + text-decoration: inherit; +} + +/* Add the correct font weight in Edge and Safari. */ +b, strong { + font-weight: bolder; +} + +/* +1. Use the user"s configured `mono` font-family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ +code, kbd, samp, pre { + /* 1 */ + font-family: var(--cd-font-mono); + font-feature-settings: normal; + font-variation-settings: normal; + /* 2 */ + font-size: 1em; +} + +/* Add the correct font size in all browsers. */ +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in +all browsers. +*/ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ +table { + /* 1 */ + text-indent: 0; + /* 2 */ + border-color: inherit; + /* 3 */ + border-collapse: collapse; +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ +button, input, optgroup, select, textarea { + /* 1 */ + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + /* 2 */ + margin: 0; + /* 3 */ + padding: 0; +} + +/* Remove the inheritance of text transform in Edge and Firefox. */ +button, select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ +button, +input:where([type="button"]), +input:where([type="reset"]), +input:where([type="submit"]) { + /* 1 */ + -webkit-appearance: button; + /* 2 */ + background-color: transparent; + background-image: none; +} + +/* Use the modern Firefox focus style for all focusable elements. */ +:-moz-focusring { + outline: auto; +} + +/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ +:-moz-ui-invalid { + box-shadow: none; +} + +/* Add the correct vertical alignment in Chrome and Firefox. */ +progress { + vertical-align: baseline; +} + +/* Correct the cursor style of increment and decrement buttons in Safari. */ +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ +[type="search"] { + /* 1 */ + -webkit-appearance: textfield; + /* 2 */ + outline-offset: -2px; +} + +/* Remove the inner padding in Chrome and Safari on macOS. */ +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ +::-webkit-file-upload-button { + /* 1 */ + -webkit-appearance: button; + /* 2 */ + font: inherit; +} + +/* Add the correct display in Chrome and Safari. */ +summary { + display: list-item; +} + +/* Removes the default spacing and border for appropriate elements. */ +blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { + margin: 0; +} +fieldset { + margin: 0; + padding: 0; +} +legend { + padding: 0; +} +ol, ul, menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* Reset default styling for dialogs. */ +dialog { + padding: 0; +} + +/* Prevent resizing textareas horizontally by default. */ +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user"s configured gray 400 color. +*/ +input::-moz-placeholder, +textarea::-moz-placeholder { + /* 1 */ + opacity: 1; + /* 2 */ + color: #9ca3af; +} +input::placeholder, +textarea::placeholder { + /* 1 */ + opacity: 1; + /* 2 */ + color: #9ca3af; +} + +/* Set the default cursor for buttons. */ +button, +[role="button"] { + cursor: pointer; +} + +/* Make sure disabled buttons don"t get the pointer cursor. */ +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ +img, svg, video, canvas, audio, iframe, embed, object { + /* 1 */ + display: block; + /* 2 */ + vertical-align: middle; +} + +/* +Constrain images and videos to the parent width and preserve their +intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ +img, video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ +[hidden] { + display: none; +} + +/* ---------------------------------------------------------------------- */ + +html:has(.cd-nav-mobile:popover-open) { + overflow: hidden !important; + overflow-x: hidden !important; + overflow-y: hidden !important; +} +body { + position: relative; + min-height: 100vh; + color: var(--cd-text-color); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: var(--cd-bg-color-light); + transition: background 100ms linear; +} +html.dark body { + background-color: var(--cd-bg-color-dark); +} + +.keys, +kbd:not(.keys > kbd) { + font-family: var(--cd-font-mono); + display: inline-block; + padding: 0.2rem 0.25rem; + margin-left: 0.1rem; + margin-right: 0.1rem; + font-size: 0.875rem; + line-height: 1; + font-weight: 500; + letter-spacing: -0.025em; + line-height: 1; + border-radius: 0.25rem; + border-width: 1px; + border-color: #ffffff; + box-shadow: 0 0 2px 0 #000; + + &:is(.dark *) { + border-color: rgb(0 0 0); + background-color: rgb(24 24 27); + } +} + +.scrollbar-thin { + scrollbar-width: thin; /* Firefox */ +} +.scrollbar-thin::-webkit-scrollbar { + /* Safari and Chrome */ + width: 2px; + background-color: ButtonFace; +} +.scrollbar-default { + -ms-overflow-style: auto; /* IE and Edge */ + scrollbar-width: auto; /* Firefox */ +} +.scrollbar-default::-webkit-scrollbar { + /* Safari and Chrome */ + width: auto; +} + +a.headerlink { + margin-left: .25rem; + display: inline-block; + text-decoration-line: none; + opacity: 0; + transition-property: opacity; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-duration: .15s; +} +h2:hover a.headerlink, +h3:hover a.headerlink, +h4:hover a.headerlink, +h5:hover a.headerlink, +h6:hover a.headerlink { + opacity: 0.5; +} + +/* ---------------------------------------------------------------------- */ + +.doc-symbol { + border-radius: 0.1rem; + padding: 0 0.3em; + font-weight: bold; +} +.doc-symbol-attr { + color: var(--doc-symbol-attribute-fg-color) !important; + background-color: var(--doc-symbol-attribute-bg-color) !important; +} +.doc-symbol-function { + color: var(--doc-symbol-function-fg-color) !important; + background-color: var(--doc-symbol-function-bg-color) !important; +} +.doc-symbol-method { + color: var(--doc-symbol-method-fg-color) !important; + background-color: var(--doc-symbol-method-bg-color) !important; +} +.doc-symbol-class { + color: var(--doc-symbol-class-fg-color) !important; + background-color: var(--doc-symbol-class-bg-color) !important; +} +.doc-symbol-module { + color: var(--doc-symbol-module-fg-color) !important; + background-color: var(--doc-symbol-module-bg-color) !important; +} + +.doc-oname { + font-weight: normal; +} +.doc-olabel { + font-size: 0.6em !important; + color: #36464e !important; + font-weight: 400; + padding: 0.1rem 0.4rem !important; +} + +.doc-attrs ~ .doc-methods, +.doc-properties ~ .doc-methods { + margin-top; 1rem; +} + +/* ---------------------------------------------------------------------- */ + +.icon { + font-family: var(--cd-font-icons); + font-weight: normal; + font-style: normal; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; + cursor: default; + pointer-events: none; +} + +/* ---------------------------------------------------------------------- */ + +.cd-source { + display: flex; + align-items: center; + font-size: 0.85rem; + line-height: 1.2; + white-space: nowrap; + cursor: pointer; + text-decoration: none; + padding: 0.5rem 0.75rem; + min-width: 150px; + backdrop-filter: blur(4px); + background-color: var(--cd-nav-bg-color); + border-radius: 1rem; + transition: background 300ms ease-in-out; + + &:hover { + background-color: var(--cd-nav-bg-color-hover); + } + & > div { + opacity: 0.8; + transition: opacity 300ms ease-in-out; + } + &:hover > div { + opacity: 1; + } + & .cd-source__icon { + padding-right: 0.5rem; + } + & .cd-source__icon svg { + height: 1.5rem; + width: 1.5rem; + fill: currentcolor; + display: block; + } + & .cd-source__label { + font-size: 0.9rem; + font-weight: bold; + } + & .cd-source__repo { + display: inline-block; + max-width: calc(100% - 1.2rem); + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } + @media (max-width: 480px) { + & { + min-width: 0; + } + & .cd-source__icon { + padding-right: 0; + } + & .cd-source__repo { + display: none; + } + } + & .cd-source__facts { + display: hidden; + gap: 0.4rem; + list-style-type: none; + margin: 0.1rem 0 0; + overflow: hidden; + padding: 0; + width: 100%; + opacity: 0; + transform: translateY(100%); + transition: all 0.5s ease-out; + } + & .cd-source__facts.cd-source__facts--visible { + display: flex; + opacity: 1; + transform: translateY(0); + } + & .cd-source__facts [data-fact] { + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center; + line-height: 1; + } + & .cd-source__facts [data-fact]:nth-child(1n+2) { + flex-shrink: 0; + } + & .cd-source__facts [data-fact]:not([hidden]):before { + width: 0.6rem; + padding-right: 0.8rem; + font-family: var(--cd-font-icons); + font-weight: normal; + font-style: normal; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; + cursor: default; + pointer-events: none; + } + & .cd-source__facts [data-fact="version"]:not([hidden]):before { + content: "tag"; + } + & .cd-source__facts [data-fact="stars"]:not([hidden]):before { + content: "star"; + } + & .cd-source__facts [data-fact="forks"]:not([hidden]):before { + content: "fork_right"; + } + & .cd-source__facts [data-fact="numrepos"]:not([hidden]):before { + content: "numbers"; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-cards { + & { + display: grid; + grid-gap: 1rem; + } + @media (min-width: 480px) { + & { grid-template-columns: repeat(2, 1fr); } + } + @media (min-width: 900px) { + & { grid-template-columns: repeat(4, 1fr); } + } + & a.card { + display: block; + border: 1px solid var(--cd-border-color); + padding: 1rem; + border-radius: 6px; + background-color: var(--cd-bg-color); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + } + & a.card:hover { + display: block; + background-color: var(--cd-bg-color-hover); + } + & a.card h2 { + text-decoration: none; + font-family: var(--cd-font-sans); + font-weight: bold; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-text-button { + display: inline-flex; + cursor: pointer; + touch-action: manipulation; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + align-items: center; + justify-content: center; + white-space: nowrap; + border-radius: 0.25rem; + border-width: 1px; + border-color: rgb(228 228 231); + background-color: rgb(250 250 250); + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + color: rgb(39 39 42); + + &:hover { + border-color: rgb(212 212 216); + background-color: rgb(244 244 245); + color: rgb(24 24 27); + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);; + } + &:focus { + outline-style: solid; + outline-offset: 1px; + outline-color: rgb(82 82 91 / 0.5); + } + &:active { + border-color: rgb(161 161 170); + } + &:disabled { + cursor: default; + outline: 2px solid transparent; + outline-offset: 2px; + } + &:is(.dark *) { + border-color: rgb(82 82 91); + background-color: rgb(82 82 91 / 0.1); + color: rgb(228 228 231); + } + &:is(.dark *):hover { + border-color: rgb(113 113 122); + background-color: rgb(24 24 27); + color: rgb(244 244 245); + } + &:is(.dark *):active { + border-color: var(--cd-bg-color); + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-callout { + --bg-color: rgb(244 244 245); + --border-color: rgb(212 212 216); + --text-color: rgb(39 39 42); + + &.type-note, + &.type-info, + &.type-todo { + --bg-color: rgb(244 244 245); + --border-color: rgb(212 212 216); + --text-color: rgb(39 39 42); + } + &.type-tip { + --bg-color: rgb(254 249 195); + --border-color: rgb(254 240 138); + --text-color: rgb(133 77 14); + } + &.type-alert { + --bg-color: rgb(255 237 213); + --border-color: rgb(254 215 170); + --text-color: rgb(154 52 18); + } + &.type-warning { + --bg-color: rgb(255 237 213); + --border-color: rgb(254 215 170); + --text-color: rgb(154 52 18); + } + &.type-danger { + --bg-color: rgb(255 228 230); + --border-color: rgb(254 205 211); + --text-color: rgb(136 19 55); + } + &.type-error { + --bg-color: rgb(255 228 230); + --border-color: rgb(254 205 211); + --text-color: rgb(136 19 55); + } + &.type-internal { + --bg-color: rgb(231 229 228); + --border-color: rgb(214 211 209); + --text-color: rgb(28 25 23); + } + & { + position: relative; + border-top-width: 1px; + border-bottom-width: 1px; + overflow: hidden; + margin-left: -1rem; + margin-right: -1rem; + background-color: var(--bg-color); + border-color: var(--border-color); + color: var(--text-color); + } + @media (min-width: 640px) { + & { + border-left-width: 1px; + border-right-width: 1px; + border-radius: 0.25rem; + margin-left: 0; + margin-right: 0; + } + } + &:is(.dark *) { + background-color: oklch(from var(--bg-color) calc(l * 2) calc(c * 3) h / 0.8); + border-color: oklch(from var(--border-color) calc(l * 1.5) c h); + color: oklch(from var(--text-color) calc(l * 0.5) c h); + } + &:is(.dark *) ::selection { + background-color: oklch(from var(--bg-color) calc(l * 1.2) calc(c * 4) h) + } + &:is(aside) { + display: flex; + align-items: flex-start; + padding: 1.25rem 1rem 1rem; + } + @media (min-width: 640px) { + &:is(aside) { + padding-left: 1.25rem; + padding-right: 1.25rem; + } + } + & summary { + display: flex; + align-items: center; + font-weight: 700; + height: 3rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + cursor: pointer; + } + & .icon { + margin: -0.1rem 1rem 0 -0.25rem; + opacity: 0.9; + font-size: 1.2rem; + line-height: 1.4; + } + @media (max-width: 639px) { + & .icon { + display: none; + } + } + & .icon.arrow { + margin-left: auto; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + & details&[open] .icon.arrow { + transform: rotate(180deg); + } + & .content { + line-height: 1.4; + } + & details& .content { + padding: 0 1rem 1rem; + } + @media (min-width: 640px) { + & details& .content { + padding: 0 1.25rem 1rem; + } + } +} +/* Cannot be nested */ +.cd-callout::selection { + background-color: oklch(from var(--bg-color) calc(l * 0.9) calc(c * 3) h); +} + +/* ---------------------------------------------------------------------- */ + +.cd-example-tabs { + position: relative; + margin-top: 2rem; + margin-bottom: 3rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + + & .example-tabgroup { + width: 100%; + overflow: hidden; + position: relative; + border: 1px solid #999; + border-radius: 0.4rem; + } + + & .example-tablist { + z-index: 0; + display: flex; + border-bottom: 1px solid #999; + background-color: rgb(249 250 251); + overflow-x: auto; + overflow-y: hidden; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + width: 100%; + text-align: center; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + color: rgb(107 114 128); + } + & .example-tablist:is(.dark *) { + border-color: rgb(75 85 99); + background-color: rgb(55 65 81); + color: rgb(156 173 175); + } + + & .example-tab { + user-select: none; + border-right-width: 1px; + border-color: #999; + background-color: rgb(255 255 255); + padding: 0.5rem 1.6rem; + color: #333; + } + & .example-tab:is(.dark *) { + border-color: rgb(75 85 99); + background-color: rgb(31 41 55); + color: rgb(255 255 255); + } + & .example-tab:not(.ui-disabled):not(.ui-selected):hover { + background-color: rgb(249 250 251); + color: rgb(55 65 81); + } + & .example-tab:not(.ui-disabled):not(.ui-selected):hover:is(.dark *) { + background-color: rgb(55 65 81); + color: rgb(255 255 255); + } + & .example-tab.ui-disabled { + color: rgb(193 204 220); + } + & .example-tab.ui-selected { + color: black; + background-color: #e7e9ed; + } + & .example-tab.ui-selected:is(.dark *) { + color: white; + background-color: #111; + } + + & .example-tabpanel { + width: 100%; + flex-grow: 0;` + z-index: 10; + overflow: auto; + position: relative; + max-height: 400px; + } + & .example-tabpanel.ui-hidden { + display: none; + } + & .example-tabpanel div.highlight { + margin: 0; + padding: 0; + border-radius: 0; + font-size: 0.9rem; + } + & .example-tabpanel div.highlight pre { + border-radius: 0; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-footer { + padding-top: 1.25rem; + padding-bottom: 1.25rem; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + font-size: 0.875rem; + line-height: 1.25rem; + text-align: center; + border-top: 1px solid rgb(228 228 231); + + &:is(.dark *){ + border-color: rgb(82 82 91); + } + & .wrapper { + display: flex; + align-items: center; + } + & .copy { + margin-right: auto; + text-align: left; + padding: 0 16px; + } + & .built-with { + height: 100%; + color: rgb(113 113 122); + } + & .built-with:is(.dark *) { + color: inherit; + } + & .built-with a { + text-decoration: underline; + cursor: pointer; + } + & .themeswitch { + margin-left: 1.5rem; + margin-right: 0; + opacity: 0.8; + border-radius: 1rem; + background-color: var(--cd-nav-bg-color); + transition: opacity 300ms ease-in-out, background 300ms ease-in-out; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + & .themeswitch:hover { + opacity: 1; + background-color: var(--cd-nav-bg-color-hover); + } + @media (max-width: 640px) { + & .built-with, + & .themeswitch { + display: none; + } + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-header { + margin-bottom: 2rem; + + & div p { + margin-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1; + font-weight: 600; + } + & h1 { + display: inline-block; + font-size: 1.9rem; + line-height: 1.25rem; + color: rgb(24 24 27); + font-weight: 800; + margin: 0; + } + & h1:is(.dark *) { + color: rgb(228 228 231); + } + @media (min-width: 640px) { + & h1 { + font-size: 2.2rem; + } + } + & p.description { + margin-top: 0.25rem; + font-size: 1.125rem; + line-height: 1.75rem; + color: var(--cd-text-color-mild); + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-navbar { + display: flex; + align-items: center; + border-radius: 1rem; + padding: 0 0.75rem; + font-size: 0.875rem; + font-weight: bold; + backdrop-filter: blur(4px); + background-color: var(--cd-nav-bg-color); + box-shadow: rgb(15, 15, 15) 0px 0px 0px 0px inset, + rgba(163, 163, 170, 0.3) 0px 0px 0px 1px inset, + rgba(255, 255, 255, 0.2) 0px 20px 25px -5px, + rgba(255, 255, 255, 0.2) 0px 8px 10px -6px; + + &:is(.dark *) { + box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px inset, + rgba(63, 63, 70, 0.3) 0px 0px 0px 1px inset, + rgba(0, 0, 0, 0.2) 0px 20px 25px -5px, + rgba(0, 0, 0, 0.2) 0px 8px 10px -6px; + } + + & a { + white-space: nowrap; + padding: 0.75rem; + } + & a, + & button { + opacity: 0.8; + transition: opacity 300ms ease-in-out, background 300ms ease-in-out; + border-radius: 4px; + } + & a:hover, + & button:hover { + opacity: 1; + background-color: var(--cd-nav-bg-color-hover); + } + & a svg { + height: 20px; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-nav-top { + z-index: 1000; + width: 100%; + margin-top: 1rem; + + /* @media ((min-width: 1024px) and (min-height: 640px)) { + & { + position: sticky; + top: 1rem; + } + } */ + & .wrapper { + margin-left: auto; + margin-right: auto; + display: flex; + max-width: 100rem; + align-items: center; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + } + + & .logo { + padding: 0.75rem; + margin-left: -0.75rem; + margin-right: auto; + background-color: transparent; + transition: background 300ms ease-in-out; + } + @media (min-width: 640px) { + & .logo { + border-radius: 4px; + backdrop-filter: blur(4px); + background-color: var(--cd-nav-bg-color); + } + } + + & .nav-links { + display: none; + } + @media (min-width: 768px) { + & .nav-links { + display: inline-flex; + } + } + & .nav-extra { + margin-left: 0.75rem; + } + & .nav-links > .themeswitch { + border: none; + outline: none; + margin-left: 0.25rem; + } + & .cd-toggle-sidebar { + font-size: 1rem; + margin-left: 0.75rem; + width: 4.5rem; + line-height: 1; + padding: 0.75rem 0.5rem; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-nav-global { + /* position: sticky; */ + /* top: 0; */ + z-index: 0; + width: 12rem; + border-right-width: 1px; + border-color: rgb(228 228 231); + padding-right: 1rem; + padding-bottom: 2rem; + font-size: 0.875rem; + line-height: 1.2; + flex-shrink: 0; + /* + @media (min-height: 640px) { + & { + overflow-y: auto; + height: 100vh; + top: 3rem; + min-height: calc(100vh - 3rem); + } + } */ + + @media (min-width: 1536px) { + & { + font-size: 1rem; + line-height: 1.5rem; + width: 18rem; + } + } + &:is(.dark *) { + border-color: rgb(82 82 91); + } + + & nav { + display: flex; + width: 100%; + flex-direction: column; + padding-bottom: 3.5rem; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-nav-local { + position: sticky; + top: 5rem; + z-index: 0; + width: 25rem; + height: calc(100vh - 6.5rem); + margin-right: -1rem; + overflow: hidden; + border-left-width: 1px; + border-color: rgb(228 228 231); + + &:is(.dark *) { + border-color: rgb(82 82 91); + } + & .wrapper { + position: absolute; + inset: 0; + overflow-y: auto; + overflow-x: hidden; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + scroll-behavior: smooth; + padding: 1.5rem 0.25rem; + font-size: 0.9rem; + line-height: 1.2; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-nav-mobile { + position: fixed; + left: 0; + top: 0; + height: 100vh; + width: 100%; + min-width: 360px; + max-width: 640px; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + margin: 0; + padding: 0 0 4rem 0; + background-color: var(--cd-bg-color-hover); + color: var(--cd-text-color); + + transition: all 0.2s allow-discrete; + /* Final state of the exit animation */ + opacity: 0; + transform: translateX(-100%); + + &:popover-open { + opacity: 1; + transform: translateX(0); + } + /* Needs to be after the previous &:popover-open rule + to take effect, as the specificity is the same */ + @starting-style { + &:popover-open { + opacity: 0; + transform: translateX(-100%); + } + } + + @media (min-width: 640px) { + & { + border-right: 1px solid var(--cd-border-color); + } + } + & header { + margin: 1rem 0; + display: flex; + align-items: center; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + } + & .logo { + margin-right: auto; + } + & .themeswitch { + border: none; + background: none; + outline: none; + } + & .cd-toggle-sidebar { + font-size: 1rem; + margin-left: 0.75rem; + width: 4.5rem; + line-height: 1; + padding: 0.75rem 0.5rem; + } + + & .toc { + margin-bottom: 1.25rem; + display: flex; + flex-direction: column; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + font-size: 1rem; + line-height: 1.5rem; + } +} +/* Transition for the popover's backdrop. + ::backdrop cannot be nested */ +.cd-nav-mobile::backdrop { + transition: all 0.5s allow-discrete; + /* Final state of the exit animation */ + backdrop-filter: blur(0); + background-color: rgb(0 0 0 / 0%); +} +.cd-nav-mobile:popover-open::backdrop { + backdrop-filter: blur(2px); + background-color: rgb(0 0 0 / 15%); +} +@starting-style { + .cd-nav-mobile:popover-open::backdrop { + backdrop-filter: blur(0); + background-color: rgb(0 0 0 / 0%); + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-page-single > main { + margin: 0; + max-width: 100%; + padding: 0; +} + +.cd-page { + & .page-wrapper { + z-index: 10; + margin-left: auto; + margin-right: auto; + display: flex; + max-width: 100rem; + padding-top: 1rem; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + padding-bottom: 1.5rem; + min-width: 360px; + } + & .page-wrapper > main { + width: 100%; + padding-top: 1rem; + } + @media (min-width: 640px) { + & { + padding-bottom: 1rem; + } + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-prevnext { + display: flex; + align-items: stretch; + width: 100%; + margin-top: 2rem; + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: var(--cd-padding-left); + padding-right: var(--cd-padding-right); + border-top: 1px solid var(--cd-border-color); + font-family: var(--cd-font-sans); + + & a.prev, + & a.next { + display: flex; + align-items: center; + padding: 0.75rem 0.25rem; + text-decoration: none; + width: 50%; + border: 1px solid var(--cd-border-color); + color: var(--cd-text-color); + border-radius: 10px; + transition: all 0.2s ease-in; + } + & a.prev { + margin-right: 1.25rem; + justify-content: flex-start; + text-align: left; + } + & a.next { + margin-left: auto; + justify-content: flex-end; + text-align: right; + } + & a.prev:hover, + & a.next:hover { + border-color: rgb(113, 113, 122); + } + &:is(.dark *) a.prev:hover, + &:is(.dark *) a.next:hover { + border-color: rgb(150, 150, 150); + } + & .section { + font-size: 0.875rem; + line-height: 1; + color: rgb(113, 113, 122); + margin-bottom: 0.1rem; + } + &:is(.dark *) .section { + color: rgb(150, 150, 150); + } + & .title { + font-size: 1rem; + line-height: 1.1; + } + & i { + opacity: 0.8; + font-style: normal; + font-size: 1.4rem; + padding: 0 0.5rem; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-theme-switch { + display: flex; + align-items: center; + justify-content: center; + -webkit-tap-highlight-color: transparent; + + & { + font-weight: 400; + height: 2.5rem; + width: 2.5rem; + flex-grow: 0; + padding: 0.2rem; + } + @media (min-width: 1024px) { + & { + width: auto; + } + } + & svg { + padding: 0.3rem; + margin: 0; + } + &:is(.dark *) svg { + padding: 0.1rem; + } + & .sun-and-moon { + pointer-events: none; + display: block; + height: 100%; + width: 100%; + } + & .sun { + transform-origin: center; + transform: scale(1, 1); + transform: translate3d(0, 0, 0); + fill: #3f3f46; + stroke: transparent; + } + &:hover .sun { + fill: #27272a; + } + &:focus-visible .sun { + fill: #27272a; + } + @media (prefers-reduced-motion: no-preference) { + & .sun { + transition-property: transform; + transition-timing-function: cubic-bezier(0.5, 1.25, 0.75, 1.25); + transition-duration: 0.5s; + } + } + & .sun:is(.dark *) { + transform: scale(1.75, 1).75; + fill: #e4e4e7; + } + &:hover .sun:is(.dark *) { + fill: #f4f4f5; + } + &:focus-visible .sun:is(.dark *) { + fill: #f4f4f5; + } + @media (prefers-reduced-motion: no-preference) { + & .sun:is(.dark *) { + transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); + transition-duration: 250ms; + } + } + & .sun-beams { + transform-origin: center; + stroke: #3f3f46; + stroke-width: 2; + } + &:hover .sun-beams { + stroke: #27272a; + } + &:focus-visible .sun-beams { + stroke: #27272a; + } + @media (prefers-reduced-motion: no-preference) { + & .sun-beams { + transition-property: transform, opacity; + transition-timing-function: cubic-bezier(0.5, 1.5, 0.75, 1.25); + transition-duration: 400ms; + } + } + & .sun-beams:is(.dark *) { + transform: translate3d(0, 0, 0); + transform: rotate(-25deg); + stroke: #e4e4e7; + opacity: 0; + } + &:hover .sun-beams:is(.dark *) { + stroke: #f4f4f5; + } + &:focus-visible .sun-beams:is(.dark *) { + stroke: #f4f4f5; + } + @media (prefers-reduced-motion: no-preference) { + & .sun-beams:is(.dark *) { + transition-duration: 150ms; + } + } + & .moon { + transform-origin: center; + fill: #52525b; + } + &:hover .moon { + fill: #71717a; + } + & .moon circle { + transform: translate3d(0, 0, 0); + } + @media (prefers-reduced-motion: no-preference) { + & .moon circle { + transition-property: transform; + transition-timing-function: cubic-bezier(0, 0, 0, 1); + transition-duration: 0.3s; + } + } + & .moon circle:is(.dark *) { + transform: translateX(-7px); + } + @media (prefers-reduced-motion: no-preference) { + & .moon circle:is(.dark *) { + transition-delay: 0.3s; + } + } + & .light-text, + & .dark-text { + padding: 0.5rem; + padding-left: 0; + display: none; + white-space: nowrap; + font-weight: bold; + text-align: left; + } + @media (min-width: 1024px) { + & .light-text { + display: block; + } + & .light-text:is(.dark *) { + display: none; + } + & .dark-text:is(.dark *) { + display: block; + } + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-toc { + & details, + & section { + margin-top: 1.5rem; + } + + & summary { + margin-bottom: 0.5rem; + font-weight: 600; + color: rgb(39 39 42); + } + & summary:is(.dark *) { + color: rgb(244 244 245); + } + + & h2 { + margin-bottom: 0.5rem; + font-weight: 600; + color: rgb(39 39 42); + } + & h2:is(.dark *) { + color: rgb(244 244 245); + } + + & .page { + border-left-width: 2px; + border-color: rgb(244 244 245); + padding-left: 0.5rem; + } + & .page:hover { + border-color: rgb(212 212 216); + } + + & .page:is(.dark *) { + border-color: rgb(63 63 70 / 0.5); + } + & .page:is(.dark *):hover { + border-color: rgb(161 161 170); + } + + & a { + position: relative; + display: flex; + align-items: center; + border-radius: 0.25rem; + border-width: 1px; + border-color: transparent; + line-height: 1.2; + margin: 0; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + color: rgb(63 63 70); + } + & a:hover { + color: rgb(0 0 0); + } + & a:is(.dark *) { + color: rgb(161 161 170); + } + & a:is(.dark *):hover { + color: rgb(244 244 245); + } + & .active a { + border-color: rgb(228 228 231); + background-color: rgb(244 244 245); + font-weight: bold; + color: rgb(39 39 42); + } + & .active:is(.dark *) a { + color: black; + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-toc-page { + margin-top: -0.25rem; + + & li { + position: relative; + display: flex; + align-items: center; + } + + & li::after { + content: ""; + display: block; + position: absolute; + inset: 0; + background-color: var(--cd-brand-color); + border-radius: 0.25rem; + opacity: 0; + transition: opacity 0.2s ease-in-out; + z-index: -1; + } + + & li:has(a.active)::after { + opacity: 0.15; + } + + & a { + display: flex; + align-items: center; + color: rgb(82 82 91); + padding: 0.3rem 0 0.3rem 0.5rem; + } + & a:is(.dark *) { + color: rgb(161 161 170); + } + & a:hover:not(.active) { + & span { + text-decoration: underline; + } + } + + & li.indent-0 a { + padding-left: 0rem; + font-size: smaller; + text-transform: uppercase; + font-weight: bold; + border-bottom-width: 1px; + } + & li.indent-1 a { + padding-left: 0rem; + font-weight: bold; + } + & li.indent-2 a { padding-left: 1rem; } + & li.indent-3 a { padding-left: 1.5rem; } + & li.indent-4 a { padding-left: 2rem; } + & li.indent-5 a { padding-left: 2.5rem; } + & li.indent-6 a { padding-left: 3rem; } + + & li a::before { + content: ""; + display: inline-flex; + align-items: center; + justify-content: right; + line-height: 1; + height: 8px; + width: 8px; + margin: 0 0.5rem 0 0.5rem; + flex-grow: 0; + flex-shrink: 0; + } + li.indent-2 a::before { content: "○" } + li.indent-3 a::before { content: "•" } + li.indent-4 a::before { content: "·" } + li.indent-5 a::before { content: "⁃" } + li.indent-6 a::before { content: "·" } + + & li a.active::before { + content: ""; + border-radius: 3px; + background-color: var(--cd-brand-color); + } +} + +/* ---------------------------------------------------------------------- */ + +.cd-nav-global, +.cd-nav-local, +.cd-nav-mobile { + display: none; +} +.cd-nav-mobile:popover-open, +.cd-nav-top .cd-toggle-sidebar { + display: block; +} + +@media (min-width: 924px) { + .cd-nav-mobile, + .cd-nav-top .cd-toggle-sidebar { + display: none; + } +} + +@media (min-width: 924px) { + .cd-nav-global { + display: block; + } +} + +@media (min-width: 1024px) { + .cd-page .page-wrapper > main { + margin-left: 2.5rem; + margin-right: 2.5rem; + } + .cd-nav-local { + display: block; + } +} |
