Skip to content

Commit efb0566

Browse files
csuwildcatcsuwildcat
committed
WIP
1 parent 5ee947a commit efb0566

10 files changed

Lines changed: 546 additions & 15 deletions

File tree

‎assets/css/index.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -888,9 +888,14 @@ wa-drawer.spec-up-issues-drawer::part(body) {
888888
min-width: 0;
889889
max-width: 25rem;
890890
padding: 1.1rem 1.1rem 0;
891+
background: unset;
892+
}
893+
894+
#toc ul.toc {
895+
padding-bottom: 2rem;
891896
}
892897

893-
wa-page.spec-up-shell[view='desktop'] #toc {
898+
wa-page.spec-up-shell::part(menu) {
894899
background-color: rgba(255 255 255 / 0.03);
895900
}
896901

@@ -1177,6 +1182,36 @@ a[path-0$="github.com"][path-3="projects"]:after {
11771182
padding: 0;
11781183
}
11791184

1185+
.spec-up-copy-line {
1186+
display: inline-flex;
1187+
align-items: center;
1188+
gap: 0.45rem;
1189+
max-width: 100%;
1190+
vertical-align: middle;
1191+
}
1192+
1193+
.spec-up-copy-text {
1194+
min-width: 0;
1195+
padding: 0.15rem 0.35rem;
1196+
border-radius: var(--wa-border-radius-s);
1197+
overflow-wrap: anywhere;
1198+
transition: background-color 180ms ease, box-shadow 180ms ease;
1199+
}
1200+
1201+
.spec-up-copy-button {
1202+
flex: none;
1203+
}
1204+
1205+
.spec-up-copy-line:has(wa-copy-button:hover) .spec-up-copy-text,
1206+
.spec-up-copy-line:has(wa-copy-button:focus-within) .spec-up-copy-text {
1207+
background-color: color-mix(in srgb, var(--wa-color-brand-fill-quiet) 55%, transparent);
1208+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-color-brand-border-normal) 45%, transparent);
1209+
}
1210+
1211+
wa-progress-ring::part(label) {
1212+
font-size: clamp(0.65rem, calc(var(--size) / 5), 1.25rem);
1213+
}
1214+
11801215
.mermaid {
11811216
display: flex;
11821217
align-items: center;

‎index.html‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
</div>
111111

112112
<nav id="toc" slot="navigation" aria-label="Table of contents">
113-
<ul class="toc"><li><a href="#abstract">Abstract</a></li><li><a href="#getting-started">Getting Started</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#term-references">Term References</a><ul><li><a href="#definition-lists">Definition Lists</a></li><li><a href="#table-defined-terms">Table-defined Terms</a></li><li><a href="#external-term-references">External Term References</a></li></ul></li><li><a href="#blockquote">Blockquote</a></li><li><a href="#notices">Notices</a></li><li><a href="#content-insertion">Content Insertion</a></li><li><a href="#tables">Tables</a></li><li><a href="#sequence-diagrams">Sequence Diagrams</a></li><li><a href="#flows">Flows</a></li><li><a href="#charts">Charts</a></li><li><a href="#syntax-highlighting">Syntax Highlighting</a></li><li><a href="#tex-math-equations">TeX Math Equations</a></li><li><a href="#tab-panels">Tab Panels</a></li><li><a href="#summary-blocks">Summary Blocks</a></li><li><a href="#badges">Badges</a></li><li><a href="#progress">Progress</a></li><li><a href="#fancy-links">Fancy Links</a><ul><li><a href="#github">GitHub</a></li></ul></li><li><a href="#external-spec-references">External Spec References</a><ul><li><a href="#default-references">Default References</a></li><li><a href="#normative-references">Normative References</a></li><li><a href="#informative-references">Informative References</a></li></ul></li></ul>
113+
<ul class="toc"><li><a href="#abstract">Abstract</a></li><li><a href="#getting-started">Getting Started</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#term-references">Term References</a><ul><li><a href="#definition-lists">Definition Lists</a></li><li><a href="#table-defined-terms">Table-defined Terms</a></li><li><a href="#external-term-references">External Term References</a></li></ul></li><li><a href="#blockquote">Blockquote</a></li><li><a href="#notices">Notices</a></li><li><a href="#content-insertion">Content Insertion</a></li><li><a href="#tables">Tables</a></li><li><a href="#sequence-diagrams">Sequence Diagrams</a></li><li><a href="#flows">Flows</a></li><li><a href="#charts">Charts</a></li><li><a href="#syntax-highlighting">Syntax Highlighting</a></li><li><a href="#tex-math-equations">TeX Math Equations</a></li><li><a href="#tab-panels">Tab Panels</a></li><li><a href="#summary-blocks">Summary Blocks</a></li><li><a href="#badges">Badges</a></li><li><a href="#progress">Progress</a></li><li><a href="#relative-time">Relative Time</a></li><li><a href="#copy">Copy</a></li><li><a href="#qr-codes">QR Codes</a></li><li><a href="#carousel">Carousel</a></li><li><a href="#fancy-links">Fancy Links</a><ul><li><a href="#github">GitHub</a></li></ul></li><li><a href="#external-spec-references">External Spec References</a><ul><li><a href="#default-references">Default References</a></li><li><a href="#normative-references">Normative References</a></li><li><a href="#informative-references">Informative References</a></li></ul></li></ul>
114114
</nav>
115115

116116
<main class="spec-up-main">
@@ -683,9 +683,58 @@ <h2 id="progress"><span class="spec-up-heading-text">Progress</span><a class="to
683683
<pre class="language-markdown"><code class="language-markdown">[[progress: bar, 50]]
684684

685685
[[progress: ring, 75]]
686+
687+
[[progress: bar, 50, 50%]]
688+
689+
[[progress: ring, 75, 3rem]]
690+
</code></pre>
691+
<p><wa-progress-bar value="50">50%</wa-progress-bar></p>
692+
<p><wa-progress-ring value="75">75%</wa-progress-ring></p>
693+
<p><wa-progress-bar value="50" style="width: 50%;">50%</wa-progress-bar></p>
694+
<p><wa-progress-ring value="75" style="--size: 3rem;">75%</wa-progress-ring></p>
695+
<h2 id="relative-time"><span class="spec-up-heading-text">Relative Time</span><a class="toc-anchor" href="#relative-time">§</a></h2>
696+
<pre class="language-markdown"><code class="language-markdown">[[time: 2020-07-15T09:17:00-04:00, long]]
697+
698+
[[time: 2020-07-15T09:17:00-04:00, short]]
686699
</code></pre>
687-
<p><wa-progress-bar value="50">50</wa-progress-bar></p>
688-
<p><wa-progress-ring value="75">75</wa-progress-ring></p>
700+
<p><wa-relative-time date="2020-07-15T09:17:00-04:00" format="long"></wa-relative-time></p>
701+
<p><wa-relative-time date="2020-07-15T09:17:00-04:00" format="short"></wa-relative-time></p>
702+
<h2 id="copy"><span class="spec-up-heading-text">Copy</span><a class="toc-anchor" href="#copy">§</a></h2>
703+
<pre class="language-markdown"><code class="language-markdown">[[copy: did:key:z6Mkf4XhsxVYQ1nQ6V6k4Q9j7xVjQm1Qw9Yk6B8JfP3L2mN4]]
704+
705+
[[copy: https://github.com/decentralized-identity/spec-up]]
706+
</code></pre>
707+
<p><span class="spec-up-copy-line"><span class="spec-up-copy-text" id="spec-up-copy-target-1">did:key:z6Mkf4XhsxVYQ1nQ6V6k4Q9j7xVjQm1Qw9Yk6B8JfP3L2mN4</span><wa-copy-button class="spec-up-copy-button" from="spec-up-copy-target-1" copy-label="Copy" success-label="Copied" error-label="Copy failed"></wa-copy-button></span></p>
708+
<p><span class="spec-up-copy-line"><span class="spec-up-copy-text" id="spec-up-copy-target-2">https://github.com/decentralized-identity/spec-up</span><wa-copy-button class="spec-up-copy-button" from="spec-up-copy-target-2" copy-label="Copy" success-label="Copied" error-label="Copy failed"></wa-copy-button></span></p>
709+
<h2 id="qr-codes"><span class="spec-up-heading-text">QR Codes</span><a class="toc-anchor" href="#qr-codes">§</a></h2>
710+
<pre class="language-markdown"><code class="language-markdown">[[qr: github.com/csuwildcat]]
711+
712+
[[qr: github.com/csuwildcat, 200]]
713+
</code></pre>
714+
<p><wa-qr-code value="github.com/csuwildcat"></wa-qr-code></p>
715+
<p><wa-qr-code value="github.com/csuwildcat" size="200"></wa-qr-code></p>
716+
<h2 id="carousel"><span class="spec-up-heading-text">Carousel</span><a class="toc-anchor" href="#carousel">§</a></h2>
717+
<pre class="language-markdown"><code class="language-markdown">::: carousel
718+
719+
<span class="token url"><span class="token operator">!</span>[<span class="token content">Carousel panel one</span>](<span class="token url">single-file-test/assets/carousel-panel-1.svg</span> <span class="token string">"Carousel Panel One"</span>)</span>
720+
721+
::
722+
723+
<span class="token url"><span class="token operator">!</span>[<span class="token content">Carousel panel two</span>](<span class="token url">single-file-test/assets/carousel-panel-2.svg</span> <span class="token string">"Carousel Panel Two"</span>)</span>
724+
725+
::
726+
727+
<span class="token url"><span class="token operator">!</span>[<span class="token content">Carousel panel three</span>](<span class="token url">single-file-test/assets/carousel-panel-3.svg</span> <span class="token string">"Carousel Panel Three"</span>)</span>
728+
729+
:::
730+
</code></pre>
731+
<wa-carousel class="spec-up-carousel" navigation="" pagination="" mouse-dragging=""><wa-carousel-item><p><img src="single-file-test/assets/carousel-panel-1.svg" alt="Carousel panel one" title="Carousel Panel One"></p></wa-carousel-item><wa-carousel-item><p><img src="single-file-test/assets/carousel-panel-2.svg" alt="Carousel panel two" title="Carousel Panel Two"></p></wa-carousel-item><wa-carousel-item><p><img src="single-file-test/assets/carousel-panel-3.svg" alt="Carousel panel three" title="Carousel Panel Three"></p></wa-carousel-item></wa-carousel>
732+
733+
734+
735+
736+
737+
689738
<h2 id="fancy-links"><span class="spec-up-heading-text">Fancy Links</span><a class="toc-anchor" href="#fancy-links">§</a></h2>
690739
<p>Spec-Up automatically upgrades the links of certain sites, like GitHub. GitHub is the only supported site with Fancy Links right now, but we’ll be adding more as we go.</p>
691740
<h3 id="github"><span class="spec-up-heading-text">GitHub</span><a class="toc-anchor" href="#github">§</a></h3>

‎single-file-test/assets/carousel-panel-1.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎single-file-test/assets/carousel-panel-2.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎single-file-test/assets/carousel-panel-3.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎single-file-test/spec.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,12 +541,88 @@ Details of what I want to show here.
541541
[[progress: bar, 50]]
542542

543543
[[progress: ring, 75]]
544+
545+
[[progress: bar, 50, 50%]]
546+
547+
[[progress: ring, 75, 3rem]]
544548
```
545549

546550
[[progress: bar, 50]]
547551

548552
[[progress: ring, 75]]
549553

554+
[[progress: bar, 50, 50%]]
555+
556+
[[progress: ring, 75, 3rem]]
557+
558+
## Relative Time
559+
560+
```markdown
561+
[[time: 2020-07-15T09:17:00-04:00, long]]
562+
563+
[[time: 2020-07-15T09:17:00-04:00, short]]
564+
```
565+
566+
[[time: 2020-07-15T09:17:00-04:00, long]]
567+
568+
[[time: 2020-07-15T09:17:00-04:00, short]]
569+
570+
## Copy
571+
572+
```markdown
573+
[[copy: did:key:z6Mkf4XhsxVYQ1nQ6V6k4Q9j7xVjQm1Qw9Yk6B8JfP3L2mN4]]
574+
575+
[[copy: https://github.com/decentralized-identity/spec-up]]
576+
```
577+
578+
[[copy: did:key:z6Mkf4XhsxVYQ1nQ6V6k4Q9j7xVjQm1Qw9Yk6B8JfP3L2mN4]]
579+
580+
[[copy: https://github.com/decentralized-identity/spec-up]]
581+
582+
## QR Codes
583+
584+
```markdown
585+
[[qr: github.com/csuwildcat]]
586+
587+
[[qr: github.com/csuwildcat, 200]]
588+
```
589+
590+
[[qr: github.com/csuwildcat]]
591+
592+
[[qr: github.com/csuwildcat, 200]]
593+
594+
## Carousel
595+
596+
```markdown
597+
::: carousel
598+
599+
![Carousel panel one](single-file-test/assets/carousel-panel-1.svg "Carousel Panel One")
600+
601+
::
602+
603+
![Carousel panel two](single-file-test/assets/carousel-panel-2.svg "Carousel Panel Two")
604+
605+
::
606+
607+
![Carousel panel three](single-file-test/assets/carousel-panel-3.svg "Carousel Panel Three")
608+
609+
:::
610+
```
611+
612+
::: carousel
613+
614+
![Carousel panel one](single-file-test/assets/carousel-panel-1.svg "Carousel Panel One")
615+
616+
::
617+
618+
![Carousel panel two](single-file-test/assets/carousel-panel-2.svg "Carousel Panel Two")
619+
620+
::
621+
622+
![Carousel panel three](single-file-test/assets/carousel-panel-3.svg "Carousel Panel Three")
623+
624+
:::
625+
550626
## Fancy Links
551627

552628
Spec-Up automatically upgrades the links of certain sites, like GitHub. GitHub is the only supported site with Fancy Links right now, but we'll be adding more as we go.

0 commit comments

Comments
 (0)