ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(pgp): copy & download buttons

Browse source
This commit is contained in:
ayo 2026-05-31 18:40:50 +02:00
parent 7e0380a324
commit 7966746711
1 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/pages/pgp.astro
View file

@ -13,7 +13,12 @@ const description =
<p>{description}</p> <p>{description}</p>
<div class="key-block" role="region" aria-labelledby="public-key"> <div class="key-block" role="region" aria-labelledby="public-key">
<button class="copy-btn" aria-label="Copy key to clipboard">Copy</button> <div class="btn-wrapper">
<button class="copy-btn btn" aria-label="Copy key to clipboard"
>Copy</button
>
<a href="/publickey.asc" class="btn">Download</a>
</div>
<pre <pre
id="public-key"><code> id="public-key"><code>
-----BEGIN PGP PUBLIC KEY BLOCK----- -----BEGIN PGP PUBLIC KEY BLOCK-----
@ -31,11 +36,13 @@ AP0YLC768PFTBm9CM5T1BE0xjJ7s4dZSrVoI4n8RSe1nCA==
-----END PGP PUBLIC KEY BLOCK----- -----END PGP PUBLIC KEY BLOCK-----
</code></pre> </code></pre>
</div> </div>
<p>Expiry Date: 2027-05-30</p>
<p> <p>
<a href="/publickey.asc" class="download-link"> Download key (asc) </a> Fingerprint: <code
>17F1 3D5E 8FF7 372B 1354 5C38 65E6 BF64 1529 3C65</code>
</p> </p>
<p>This key will expire on: 2027-05-30</p>
<p></p>
</main> </main>
<Footer /> <Footer />
</Layout> </Layout>
@ -83,11 +90,16 @@ AP0YLC768PFTBm9CM5T1BE0xjJ7s4dZSrVoI4n8RSe1nCA==
display: block; display: block;
} }
/* Copy button */ /* buttons */
.copy-btn { .btn-wrapper {
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
right: 0.5rem; right: 0.5rem;
}
.btn {
display: inline-block;
position: relative;
background: var(--color-brand-blue-1); background: var(--color-brand-blue-1);
color: #fff; color: #fff;
border: none; border: none;
@ -97,14 +109,15 @@ AP0YLC768PFTBm9CM5T1BE0xjJ7s4dZSrVoI4n8RSe1nCA==
cursor: pointer; cursor: pointer;
opacity: 0.9; opacity: 0.9;
transition: opacity 0.2s; transition: opacity 0.2s;
text-decoration: none;
} }
.copy-btn:hover, .btn:hover,
.copy-btn:focus { .btn:focus {
opacity: 1; opacity: 1;
} }
.copy-btn:focus { .btn:focus {
outline: 2px solid #0056b3; outline: 2px solid #0056b3;
outline-offset: 2px; outline-offset: 2px;
} }