Make my website button into a WebC component
This commit is contained in:
parent
74fc59f9b5
commit
4fb7783da1
|
@ -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>
|
|
@ -454,36 +454,6 @@ article, .content-container {
|
||||||
height: 100%;
|
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 button lists */
|
||||||
.web-btn-wrapper {
|
.web-btn-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
17
src/home.njk
17
src/home.njk
|
@ -18,20 +18,9 @@ metadata:
|
||||||
<h2>Link to My Website</h2>
|
<h2>Link to My Website</h2>
|
||||||
|
|
||||||
<p>You can link to my website with this button:</p>
|
<p>You can link to my website with this button:</p>
|
||||||
|
{% renderTemplate "webc" %}
|
||||||
<div class="site-btn__container">
|
<site-btn></site-btn>
|
||||||
<div>
|
{% endrenderTemplate %}
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
<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>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue