summaryrefslogtreecommitdiff
path: root/public/styles/markdown/markdown.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/styles/markdown/markdown.css')
-rw-r--r--public/styles/markdown/markdown.css251
1 files changed, 251 insertions, 0 deletions
diff --git a/public/styles/markdown/markdown.css b/public/styles/markdown/markdown.css
new file mode 100644
index 0000000..eccbf7d
--- /dev/null
+++ b/public/styles/markdown/markdown.css
@@ -0,0 +1,251 @@
+.sl-markdown-content
+ :not(.expressive-code *)
+ + :not(a, strong, em, del, span, input, code, br)
+ + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+ margin-top: 1rem;
+}
+
+/* Headings after non-headings have more spacing. */
+.sl-markdown-content
+ :not(h1, h2, h3, h4, h5, h6)
+ + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+ margin-top: 1.5em;
+}
+
+.sl-markdown-content li + li:not(:where(.not-content *)),
+.sl-markdown-content dt + dt:not(:where(.not-content *)),
+.sl-markdown-content dt + dd:not(:where(.not-content *)),
+.sl-markdown-content dd + dd:not(:where(.not-content *)) {
+ margin-top: 0.25rem;
+}
+
+.sl-markdown-content li:not(:where(.not-content *)) {
+ overflow-wrap: anywhere;
+}
+
+.sl-markdown-content
+ li
+ > :last-child:not(li, ul, ol):not(
+ a,
+ strong,
+ em,
+ del,
+ span,
+ input,
+ :where(.not-content *)
+ ) {
+ margin-bottom: 1.25rem;
+}
+
+.sl-markdown-content dt:not(:where(.not-content *)) {
+ font-weight: 700;
+}
+.sl-markdown-content dd:not(:where(.not-content *)) {
+ padding-inline-start: 1rem;
+}
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+ color: var(--sl-color-white);
+ line-height: var(--sl-line-height-headings);
+ font-weight: 600;
+ font-size: 10000%;
+}
+
+.sl-markdown-content
+ :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+.sl-markdown-content h1:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h1);
+}
+.sl-markdown-content h2:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h2);
+}
+.sl-markdown-content h3:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h3);
+}
+.sl-markdown-content h4:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h4);
+}
+.sl-markdown-content h5:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h5);
+}
+.sl-markdown-content h6:not(:where(.not-content *)) {
+ font-size: var(--sl-text-h6);
+}
+
+.sl-markdown-content a:not(:where(.not-content *)) {
+ color: var(--sl-color-text-accent);
+}
+.sl-markdown-content a:hover:not(:where(.not-content *)) {
+ color: var(--sl-color-white);
+}
+
+.sl-markdown-content code:not(:where(.not-content *)) {
+ background-color: var(--sl-color-bg-inline-code);
+ margin-block: -0.125rem;
+ padding: 0.125rem 0.375rem;
+ font-size: var(--sl-text-code-sm);
+}
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
+ font-size: inherit;
+}
+
+.sl-markdown-content pre:not(:where(.not-content *)) {
+ border: 1px solid var(--sl-color-gray-5);
+ padding: 0.75rem 1rem;
+ font-size: var(--sl-text-code);
+ tab-size: 2;
+}
+
+.sl-markdown-content pre code:not(:where(.not-content *)) {
+ all: unset;
+ font-family: var(--__sl-font-mono);
+}
+
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+ border-inline-start: 1px solid var(--sl-color-gray-5);
+ padding-inline-start: 1rem;
+}
+
+/* Table styling */
+.sl-markdown-content table:not(:where(.not-content *)) {
+ display: block;
+ overflow: auto;
+ border-spacing: 0;
+}
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+ border-bottom: 1px solid var(--sl-color-gray-5);
+ padding: 0.5rem 1rem;
+ /* Align text to the top of the row in multiline tables. */
+ vertical-align: baseline;
+}
+.sl-markdown-content
+ :is(th:first-child, td:first-child):not(:where(.not-content *)) {
+ padding-inline-start: 0;
+}
+.sl-markdown-content
+ :is(th:last-child, td:last-child):not(:where(.not-content *)) {
+ padding-inline-end: 0;
+}
+.sl-markdown-content th:not(:where(.not-content *)) {
+ color: var(--sl-color-white);
+ font-weight: 600;
+}
+/* Align headings to the start of the line unless set by the `align` attribute. */
+.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
+ text-align: start;
+}
+/* <table>s, <hr>s, and <blockquote>s inside asides */
+.sl-markdown-content
+ .starlight-aside
+ :is(th, td, hr, blockquote):not(:where(.not-content *)) {
+ border-color: var(--sl-color-gray-4);
+}
+@supports (
+ border-color:
+ color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)
+) {
+ .sl-markdown-content
+ .starlight-aside
+ :is(th, td, hr, blockquote):not(:where(.not-content *)) {
+ border-color: color-mix(
+ in srgb,
+ var(--sl-color-asides-text-accent) 30%,
+ transparent
+ );
+ }
+}
+
+/* <code> inside asides */
+@supports (
+ border-color:
+ color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)
+) {
+ .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
+ background-color: color-mix(
+ in srgb,
+ var(--sl-color-asides-text-accent) 12%,
+ transparent
+ );
+ }
+}
+
+.sl-markdown-content hr:not(:where(.not-content *)) {
+ border: 0;
+ border-bottom: 1px solid var(--sl-color-hairline);
+}
+
+/* <details> and <summary> styles */
+.sl-markdown-content details:not(:where(.not-content *)) {
+ --sl-details-border-color: var(--sl-color-gray-5);
+ --sl-details-border-color--hover: var(--sl-color-text-accent);
+
+ border-inline-start: 2px solid var(--sl-details-border-color);
+ padding-inline-start: 1rem;
+}
+.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
+.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
+ border-color: var(--sl-details-border-color--hover);
+}
+.sl-markdown-content summary:not(:where(.not-content *)) {
+ color: var(--sl-color-white);
+ cursor: pointer;
+ display: block; /* Needed to hide the default marker in some browsers. */
+ font-weight: 600;
+ /* Expand the outline so that the marker cannot distort it. */
+ margin-inline-start: -0.5rem;
+ padding-inline-start: 0.5rem;
+}
+.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
+ margin-bottom: 1rem;
+}
+
+/* <summary> marker styles */
+.sl-markdown-content summary:not(:where(.not-content *))::marker,
+.sl-markdown-content
+ summary:not(:where(.not-content *))::-webkit-details-marker {
+ display: none;
+}
+.sl-markdown-content summary:not(:where(.not-content *))::before {
+ --sl-details-marker-size: 1.25rem;
+
+ background-color: currentColor;
+ content: "";
+ display: inline-block;
+ height: var(--sl-details-marker-size);
+ width: var(--sl-details-marker-size);
+ margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
+ vertical-align: middle;
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+@media (prefers-reduced-motion: no-preference) {
+ .sl-markdown-content summary:not(:where(.not-content *))::before {
+ transition: transform 0.2s ease-in-out;
+ }
+}
+.sl-markdown-content
+ details[open]
+ > summary:not(:where(.not-content *))::before {
+ transform: rotateZ(90deg);
+}
+[dir="rtl"] .sl-markdown-content summary:not(:where(.not-content *))::before,
+.sl-markdown-content [dir="rtl"] summary:not(:where(.not-content *))::before {
+ transform: rotateZ(180deg);
+}
+/* <summary> with only a paragraph automatically added when using MDX */
+.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
+ display: inline;
+}
+
+/* <details> styles inside asides */
+.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
+ --sl-details-border-color: var(--sl-color-asides-border);
+ --sl-details-border-color--hover: var(--sl-color-asides-text-accent);
+}