shoelace: Cherry-pick components

This commit is contained in:
beerpiss 2024-01-17 03:26:19 +07:00
parent 6347671b6a
commit 9ea81d1739
No known key found for this signature in database
GPG Key ID: BF5DCBABB5F41037
3 changed files with 20 additions and 21 deletions

View File

@ -28,10 +28,18 @@
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link rel="stylesheet" href="../index.css"> <link rel="stylesheet" href="../index.css">
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/spinner/spinner.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/radio-group/radio-group.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/radio-button/radio-button.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/input/input.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/select/select.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/option/option.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/tag/tag.js"></script>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/button/button.js"></script>
<script async type="module" <script async type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/icon/icon.js"
integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" data-shoelace="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/dist">
crossorigin="anonymous"></script> </script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"
integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
@ -42,7 +50,7 @@
<body> <body>
<header class="header"> <header class="header">
<p class="header__title">Keiyoushi</p> <a class="header__title" href="../">Keiyoushi</a>
</header> </header>
<div class="description"> <div class="description">
Join the <a class="description__anchor" href="https://discord.gg/3FbCpdKbdY">Discord server</a> for support. Make sure to star <a class="description__anchor" href="https://github.com/keiyoushi/extensions">the GitHub repo</a>. Join the <a class="description__anchor" href="https://discord.gg/3FbCpdKbdY">Discord server</a> for support. Make sure to star <a class="description__anchor" href="https://github.com/keiyoushi/extensions">the GitHub repo</a>.
@ -131,12 +139,6 @@
</div> </div>
</template> </template>
</div> </div>
<script>
Promise.allSettled(
["sl-spinner"].map((e) => customElements.whenDefined(e))
)
.then(() => document.body.classList.add("ready"))
</script>
</body> </body>
</html> </html>

View File

@ -23,11 +23,6 @@
body { body {
margin: .85rem auto; margin: .85rem auto;
max-width: 42rem; max-width: 42rem;
visibility: hidden
}
body.ready {
visibility: visible
} }
@media only screen and (max-width:767px) { @media only screen and (max-width:767px) {
@ -56,7 +51,12 @@ body.ready {
color: #2e84bf; color: #2e84bf;
font-weight: 600; font-weight: 600;
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .5rem margin-bottom: .5rem;
text-decoration: none;
}
a.header__title:visited {
color: #2e84bf;
} }
.description { .description {

View File

@ -27,10 +27,7 @@
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<script async type="module" <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/button/button.js"></script>
src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js"
integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin"
crossorigin="anonymous"></script>
<script data-goatcounter="https://keiyoushi.goatcounter.com/count" <script data-goatcounter="https://keiyoushi.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script> async src="//gc.zgo.at/count.js"></script>
</head> </head>