Added site button

changelog/index.html

@@ -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>

home.html

@@ -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>Leilukin's Hub now has a site button for you to link to!</li>
-                            <li>Replaced some of the images for my <a href="/shrines/asummersend/"><cite>A Summer’s 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>
                         </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">

links/index.html

@@ -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>

main.css

@@ -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;