diff --git a/README.md b/README.md index 09649be..8f8040b 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ A function that takes the constituent parts of a "twt" and generates an [extension-compatible hash](https://twtxt.dev/exts/twt-hash.html) for it, which is then returned. Version 0.10.0 and above includes support for -[V2 of the Hashing Spec](https://git.mills.io/yarnsocial/twtxt.dev/pulls/28): +[V2 of the Hashing Spec](https://twtxt.dev/exts/twt-hash-v2.html): - A specific hashing version can be provided as an optional argument. - When no version argument is provided, it defaults to using version 1 for all twts with a created diff --git a/dist-demo/demo/styles.css b/dist-demo/demo/styles.css index d4b5781..ba48963 100644 --- a/dist-demo/demo/styles.css +++ b/dist-demo/demo/styles.css @@ -11,6 +11,7 @@ --link-active: lch(from var(--main-link) calc(l + 20) c h); --gray-light: #5F758E; + --gray-dark: #404f60; } @keyframes riseInDetails { @@ -59,9 +60,10 @@ a:active { } a:hover { + background-color: var(--link-active); border-color: var(--link-active); border-radius: .5rem; - color: var(--link-active); + color: var(--bg-main); } button { @@ -77,6 +79,7 @@ code { } details figure { + background-color: transparent; margin: 1rem .5rem; } @@ -141,6 +144,8 @@ textarea { summary { cursor: pointer; } + +/** Classes */ .code-cmd { color: var(--gray-light); @@ -218,6 +223,10 @@ summary { padding: 0; } +.tab:target .tab-link { + background-color: var(--bg-main); +} + .tab:target .tab-panel { display: block; } @@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel { display: block; } -.tab:target .tab-link { - background: linear-gradient(var(--bg-dark), var(--bg-main)); -} - .tab:target + .tab { margin-top: auto; } @@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link { } .tab-link { - background-color: transparent;; + background-color: transparent; border: 2px solid var(--fg-main); border-bottom-color: transparent; margin-top: -4.5rem; @@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link { } .tab:target .tab-link { + background-color: var(--bg-main); border-bottom: 0; font-size: 1.2rem; margin-top: -4.55rem; } .tab:target .tab-link:hover { + background-color: var(--link-active); border-radius: .5rem .5rem 0 0; - background-color: var(--bg-dark); - color: var(--main-link); font-size: 1.2rem; margin-top: -4.55rem; } @@ -411,19 +416,27 @@ body.invertedTheme { color: var(--bg-main); } +body.invertedTheme a { + color: var(--gray-dark); +} + body.invertedTheme a:hover { - background-color: var(--main-link); + background-color: var(--bg-dark); border-color: var(--bg-dark); color: var(--fg-main); } +body.invertedTheme code { + background-color: var(--bg-light); + color: var(--bg-main); +} body.invertedTheme figcaption { border-color: var(--bg-main); } body.invertedTheme figure { - background-color: var(--gray-light); + background-color: transparent; border-color: var(--bg-main); } @@ -442,27 +455,33 @@ body.invertedTheme .code-cmd { color: var(--bg-dark); } +body.invertedTheme .code-cmnt { + color: var(--bg-dark); +} + + body.invertedTheme .code-str { color: var(--bg-dark); } body.invertedTheme .tab-link { - color: var(--bg-dark); background-color: var(--fg-main); border-color: var(--bg-main); } -body.invertedTheme .tab:target .tab-link { - background: linear-gradient(var(--link-active), var(--fg-main)); -} - body.invertedTheme .tab-link:hover { - background-color: var(--main-link); + background-color: var(--bg-dark); border-color: var(--bg-dark); } body.invertedTheme .tab:target .tab-link { + background-color: var(--fg-main); border-color: var(--bg-main); + border-color: var(--bg-main); +} + +body.invertedTheme .tab:target .tab-link:hover { + background-color: var(--bg-dark); } body.invertedTheme .tab-panel { diff --git a/dist-demo/demo/theme-toggle.js b/dist-demo/demo/theme-toggle.js index c780f18..126fb74 100644 --- a/dist-demo/demo/theme-toggle.js +++ b/dist-demo/demo/theme-toggle.js @@ -8,6 +8,11 @@ document.addEventListener("DOMContentLoaded", () => { toggle.addEventListener("click", () => { document.body.classList.toggle("invertedTheme"); + + localStorage.setItem( + "useInvertedTheme", + document.body.classList.contains("invertedTheme") ? "true" : "", + ); }); toggle.innerHTML = ` @@ -28,6 +33,9 @@ document.addEventListener("DOMContentLoaded", () => { `.trim(); document.body.appendChild(toggle); + + if (!!localStorage.getItem("useInvertedTheme")) + document.body.classList.add("invertedTheme"); }); // @license-end diff --git a/dist-demo/index.html b/dist-demo/index.html index be5c62c..e482ea7 100644 --- a/dist-demo/index.html +++ b/dist-demo/index.html @@ -171,7 +171,7 @@

Version 0.10.0 and above includes support for - V2 of the + V2 of the Hashing Spec: