diff --git a/demo/base.less b/demo/base.less index bc594f6..55c0c3f 100644 --- a/demo/base.less +++ b/demo/base.less @@ -31,6 +31,10 @@ body { @media (min-width: 1600px) { font-size: 18px; } + + @media (min-width: 1900px) { + font-size: 20px; + } } body { @@ -40,17 +44,18 @@ body { } h1 { - margin: -0.25rem 0 4rem 0; + margin: -0.25rem 0 5rem 0; font-size: 2.45em; font-weight: 620; line-height: 1.28; + max-width: 34rem; } h2 { margin: 0 0 1.3rem 0; scroll-margin-top: 5.5rem; font-size: 1.8em; - font-weight: 680; + font-weight: 640; line-height: 1.3; * + & { @@ -59,7 +64,7 @@ h2 { } p { - margin: 1em 0; + margin: 1.25em 0; & a { color: var(--accent-color); @@ -72,8 +77,26 @@ p { } } -hr { - margin: 4rem 0; - border: none; - border-top: 2px solid; +summary { + color: var(--accent-color); + cursor: pointer; + transition: color 0.2s; + user-select: none; + list-style-type: ''; + + &:before { + content: 'Show '; + } + + [open] > & { + list-style-type: ''; + + &:before { + content: 'Hide '; + } + } + + &:hover { + color: var(--color); + } } diff --git a/demo/code.less b/demo/code.less new file mode 100644 index 0000000..af11ff2 --- /dev/null +++ b/demo/code.less @@ -0,0 +1,127 @@ +.emgithub-file .code-area td.hljs-ln-line { + font-family: 'JetBrains Mono Variable' !important; + font-size: 0.85rem !important; + line-height: 1.675 !important; +} + +.copy-btn.copy-btn-dark { + font-family: 'JetBrains Mono Variable' !important; + font-weight: 400; + font-size: 0.8rem !important; + line-height: 2.4 !important; + padding: 0 0.6rem !important; + color: var(--code-3) !important; + background-color: var(--background) !important; + border: none !important; + border-radius: 0.4rem !important; + transition: color 0.2s, background-color 0.2s; + + &:active { + color: var(--color) !important; + background-color: var(--accent-color) !important; + } +} + +pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; +} + +code.hljs { + padding: 3px 5px; +} + +.emgithub-file { + border-radius: 0.55rem !important; + + & .code-area .hljs-ln-numbers { + color: var(--muted-color) !important; + opacity: 0.25; + } + + & .hljs-style-dark { + .hljs { + color: var(--code-1); + background-color: var(--code-background); + } + + .hljs-comment { + color: var(--muted-color); + opacity: 0.6; + } + + .hljs-punctuation, + .hljs-tag { + color: var(--code-1); + } + + .hljs-tag .hljs-attr, + .hljs-tag .hljs-name { + color: var(--code-accent-1); + } + + .hljs-attribute, + .hljs-doctag, + .hljs-keyword, + .hljs-meta .hljs-keyword, + .hljs-name, + .hljs-selector-tag { + color: var(--code-2); + font-weight: 600; + } + + .hljs-deletion, + .hljs-number, + .hljs-quote, + .hljs-selector-class, + .hljs-selector-id, + .hljs-string, + .hljs-template-tag, + .hljs-type { + color: var(--code-accent-2); + } + + .hljs-section, + .hljs-title { + color: var(--code-accent-1); + font-weight: 600; + } + + .hljs-link, + .hljs-operator, + .hljs-regexp, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-symbol, + .hljs-template-variable, + .hljs-variable, + .hljs-params, + .hljs-subst { + color: var(--code-2); + } + + .hljs-literal { + color: var(--code-3); + } + + .hljs-addition, + .hljs-built_in, + .hljs-bullet, + .hljs-code { + color: var(--code-1); + } + + .hljs-meta { + color: var(--code-accent-2); + } + + .hljs-meta .hljs-string { + color: var(--code-3); + } + + .hljs-strong { + font-weight: 600; + } + } +} diff --git a/demo/components/Embed.ts b/demo/components/Embed.ts new file mode 100644 index 0000000..8b0775b --- /dev/null +++ b/demo/components/Embed.ts @@ -0,0 +1,35 @@ +class EmbedComponent extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const name = this.getAttribute('name'); + const details = document.createElement('details'); + const summary = document.createElement('summary'); + const nodes = this.createEmbed('nodes'); + + summary.textContent = 'full example data'; + details.appendChild(summary); + details.appendChild(nodes); + + this.appendChild(this.createEmbed(name)); + this.appendChild(details); + } + + createEmbed(name: string): HTMLElement { + const script = document.createElement('script'); + + script.setAttribute('src', this.createSrc(name)); + + return script; + } + + createSrc(name: string): string { + const theme = 'dark'; + + return `https://marcantondahmen.github.io/emgithub/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fmarcantondahmen%2Fsortable-tree%2Fblob%2Fmaster%2Fdemo%2Fexamples%2F${name}.ts%3Fts%3D2&style=${theme}&type=code&showLineNumbers=on&showCopy=on`; + } +} + +customElements.define('demo-embed', EmbedComponent); diff --git a/demo/examples/nodes-shape.ts b/demo/examples/nodes-shape.ts index c413c4c..482d4d6 100644 --- a/demo/examples/nodes-shape.ts +++ b/demo/examples/nodes-shape.ts @@ -2,16 +2,10 @@ import { SortableTreeNodeData } from 'sortable-tree'; const nodes: SortableTreeNodeData[] = [ { - data: { - title: 'Homepage', - path: '/', - }, + data: { title: 'Homepage', path: '/' }, nodes: [ { - data: { - title: 'Page', - path: '/page', - }, + data: { title: 'Page', path: '/page' }, nodes: [ // { ... }, { ... } ], diff --git a/demo/grid.less b/demo/grid.less index df86784..bcd3b17 100644 --- a/demo/grid.less +++ b/demo/grid.less @@ -16,7 +16,7 @@ grid-template-columns: 20rem minmax(auto, 34rem); } - @media (min-width: 1255px) { - grid-template-columns: 1fr 34rem 1fr; + @media (min-width: 1300px) { + grid-template-columns: 1fr 38rem 1fr; } } diff --git a/demo/index.html b/demo/index.html index 8618155..26a40ce 100644 --- a/demo/index.html +++ b/demo/index.html @@ -26,54 +26,7 @@ content="https://raw.githubusercontent.com/marcantondahmen/sortable-tree/master/assets/readme.png" /> - - +