Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make my website button into a WebC component

This commit is contained in:
Helen Chong 2024-04-12 00:03:29 +08:00
parent 74fc59f9b5
commit 4fb7783da1
3 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/_includes/main/site-btn.webc Normal file
View File

@ -0,0 +1,45 @@
<div class="site-btn__container">
<div>
<a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
</div>
<textarea class="site-btn__textarea textarea-for-copy"><a href="https://leilukin.neocities.org/" target="_blank"><img src="https://leilukin.neocities.org/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a></textarea>
<button class="copy-txt-btn">Copy HTML</button>
</div>
<style webc:keep webc:bucket="defer">
.site-btn__container {
display: flex;
gap: 1rem;
align-items: center;
margin: 0.5rem 0;
}
.site-btn__textarea {
width: 10rem;
height: 2.5rem;
font-size: 0.75rem;
background-color:black;
color: var(--clr-body-txt);
}
.copy-txt-btn {
border: none;
background: var(--clr-link-btn-bg);
color: var(--clr-body-txt);
padding: 0.3rem 0.8rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: bold;
}
.copy-txt-btn:hover {
background: var(--clr-link-hover);
}
</style>
<script webc:keep webc:bucket="defer">
document.querySelector(".copy-txt-btn").onclick = () => {
document.querySelector(".textarea-for-copy").select();
document.execCommand('copy');
}
</script>

30
src/assets/css/main.css
View File

@ -454,36 +454,6 @@ article, .content-container {
height: 100%;
}
/* Website link button */
.site-btn__container {
display: flex;
gap: 1rem;
align-items: center;
margin: 0.5rem 0;
}
.site-btn__textarea {
width: 10rem;
height: 2.5rem;
font-size: 0.75rem;
background-color:black;
color: var(--clr-body-txt);
}
.copy-txt-btn {
border: none;
background: var(--clr-link-btn-bg);
color: var(--clr-body-txt);
padding: 0.3rem 0.8rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: bold;
}
.copy-txt-btn:hover {
background: var(--clr-link-hover);
}
/* Web button lists */
.web-btn-wrapper {
display: flex;

17
src/home.njk
View File

@ -18,20 +18,9 @@ metadata:
<h2>Link to My Website</h2>
<p>You can link to my website with this button:</p>
<div class="site-btn__container">
<div>
<a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
</div>
<textarea class="site-btn__textarea textarea-for-copy"><a href="https://leilukin.neocities.org/" target="_blank"><img src="https://leilukin.neocities.org/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a></textarea>
<button class="copy-txt-btn">Copy HTML</button>
<script>
document.querySelector(".copy-txt-btn").onclick = () => {
document.querySelector(".textarea-for-copy").select();
document.execCommand('copy');
}
</script>
</div>
{% renderTemplate "webc" %}
<site-btn></site-btn>
{% endrenderTemplate %}
<p>Credit to <a href="https://github.com/hekate2" target="_blank">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 Web Button Maker</a>!</p>
</section>