Added site button

This commit is contained in:
Helen Chong 2023-07-26 15:02:46 +08:00
parent ab24c646c6
commit 0c6c138e0e
5 changed files with 83 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -40,6 +40,11 @@
Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
</p>
<p class="date-style">July 26, 2023:</p>
<ul>
<li>Leilukin's Hub now has a site button for you to link to!</li>
</ul>
<p class="date-style">July 25, 2023:</p>
<ul>
<li>Leilukin's Hub now has a <a href="https://leilukin.123guestbook.com/" target="_blank">guestbook</a>!</li>

View File

@ -37,17 +37,35 @@
<section class="content-section">
<h1>Welcome!</h1>
<p>Hello! You can call me Leilukin. Welcome to my website! This site is my own personal hub and corner on the internet.</p>
<p>Feel free to drop a message and say hi on <a href="https://leilukin.123guestbook.com/" target="_blank">my guestbook</a>. Enjoy your stay!</p>
<Enjoy>Feel free to drop a message and say hi on <a href="https://leilukin.123guestbook.com/" target="_blank">my guestbook</a>. Enjoy your stay!</p>
</section>
<section class="content-section">
<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/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/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>
</section>
<section class="content-section">
<h2>Updates</h2>
<div class="text-box">
<p class="date-style">July 25, 2023:</p>
<p class="date-style">July 26, 2023:</p>
<ul>
<li>Leilukin's Hub now has a <a href="https://leilukin.123guestbook.com/" target="_blank">guestbook</a>!</li>
<li>Replaced some of the images for my <a href="/shrines/asummersend/"><cite>A Summers End — Hong Kong 1986</cite> shrine</a> pages, including the header image.</li>
<li>Moved the link to the <a href="/sitemap.html">site map</a> from the navigation bar to the footer.</li>
<li>Leilukin's Hub now has a site button for you to link to!</li>
</ul>
</div>
<a href="/changelog">View all site changelog</a>
@ -55,7 +73,7 @@
<section class="content-section">
<h2>Always Proud</h2>
<div style="display: inline-flex; flex-wrap: wrap;">
<div style="display: inline-flex; flex-wrap: wrap;gap: 0.5rem">
<img src="./buttons/progress.png" alt="A website button of the 2018 Progress Flag" title="2018 Progress Flag by Daniel Quasar (2018)">
<img src="./buttons/9_stripe.png" alt="A website button of the 9 stripe rainbow flag" title="Nine-Stripe Rainbow Flag by Gilbert Baker (2017)">
<img src="./buttons/lesbian.png" alt="A website button of the lesbian pride flag" title="I am a lesbian">

View File

@ -37,6 +37,26 @@
<section class="content-section">
<h1>Links</h1>
<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/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/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>
</section>
<section class="content-section">
<h2>Webrings I Have Joined</h2>
<div style="border: none; padding: 5px; display: inline-flex"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="./webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="./webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="./webrings/queercoded-right.png" alt="right arrow"></a></div>
@ -45,7 +65,7 @@
<section class="content-section">
<h2>Fanlistings I Have Joined</h2>
<div style="display: flex;flex-wrap: wrap;">
<div style="display: flex;flex-wrap: wrap;gap: 0.5rem">
<a href="https://glitterskies.org/kotor/" target="_blank"><img src="./fanlistings/kotor-100x50.png" alt="A website button of a Star Wars: Knights of the Old Republic fanlisting" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting"></a>
<a href="https://glitterskies.org/kotor2/" target="_blank"><img src="./fanlistings/kotor2-100x50.jpg" alt="A website button of a Star Wars: Knights of the Old Republic 2 fanlisting" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting"></a>
<a href="https://inspirationally.net/jedi/" target="_blank"><img src="./fanlistings/jedi-100x50.png" alt="A website button of a Jedi fanlisting" title="Keepers of the Peace // the Star Wars: [+] Jedi fanlisting"></a>

View File

@ -185,6 +185,10 @@ blockquote {
background-color: var(--quote-bg);
}
button:hover {
cursor: pointer;
}
pre {
white-space: pre-wrap;
overflow-x: auto;
@ -568,6 +572,35 @@ article, .content-container {
height: 100%;
}
/* Website button */
.site-btn__container {
display: flex;
gap: 1rem;
align-items: center;
}
.site-btn__textarea {
width: 10rem;
height: 2.5rem;
font-size: 0.75rem;
background-color:black;
color: var(--body-font-color);
}
.copy-txt-btn {
border: none;
background: var(--link-btn-bg);
color: var(--body-font-color);
padding: 0.3rem 0.8rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: bold;
}
.copy-txt-btn:hover {
background: var(--link-hover-color);
}
/* TABLE OF CONTENTS */
.sidebar__toc {
position: sticky;