From 0c6c138e0e540dcb7a3bf862f0d154c2f538f186 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Wed, 26 Jul 2023 15:02:46 +0800
Subject: [PATCH] Added site button

---
 assets/Leilukins-Hub-button.png | Bin 0 -> 1408 bytes
 changelog/index.html            |   5 +++++
 home.html                       |  30 +++++++++++++++++++++++------
 links/index.html                |  22 ++++++++++++++++++++-
 main.css                        |  33 ++++++++++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 assets/Leilukins-Hub-button.png

diff --git a/assets/Leilukins-Hub-button.png b/assets/Leilukins-Hub-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e990969a322aaee4cda0ae9b236bed4ebbad907
GIT binary patch
literal 1408
zcmV-`1%LX9P)<h;3K|Lk000e1NJLTq003A30018d1^@s6W5^2N000F?Nkl<ZXhZFo
zZ)jCz9LK+R;1G>ArgxGPDSUH#F$eh~6(KO&-IQD}ns0QJfw0^b*FU2*oG;XoI0|E1
zagj-&202}24%;Z97;a#e+6!MeLB$5PCMzMG;;zr{o_;&eIXi!Tw{r$vcAq!fIp_EM
z``qvIeV*qRNhXu2qM{<?O1K2_^71e~KHeMY?(R-iS67GIdagCZVllL~whrU~&yX0x
z0lf2jb9kSu2cA5dq2Xp<v%vu?xP7}`vCKUF(U0k8{eAk~$LmCdDl35n3xMOtMd9fn
zNgcPC#fyQpYk_OmfJ>L0`;^2u)eH={@At>k+9jBF=oAz$nIj@LI0&p<2}B~I@N|%*
zj#~_Y-@6y+?F9}TaPD)<7U0-1AejVeYvtn#9dP{Mcj#-Xa2$bD#S&Qd4kUFXF>dJo
zKY(4-n^v&UCcHrKQe_b5&jTYPrh-dKtjnF_Dem-Xb7kmup)dd9V#A)s#>~Ix&KVY@
ztDNi8IJ~SZbOn1Yo-izeC(8Zo+XoN;{!wabtV@}dNAK(E48ZHvKHSy@+`kX3S_SCp
zEGsi&hK9_Ua3B1J#=!N}DGUt_?vMimhHaB;Z21sv`#+e*xvuRC3?F_=WL|CxwyRfH
zF{@JonBfszDo%h;oG{+gSg3F;D|W*M18jwI!)42?-}Olb23-Hfa#v`tcbZ#r{P|~q
z#}k17Gl<)_4O`GvOv{&)Ck5QuX{yc%FmJF<fbEb&w+MpT{^?Z<tcW`5P)Yqeaek)Q
z(fks8c~Y%oVR2KieWP*mR~;}d?HxOS-MbC&Y!ReRRv^L26fpZQsaJ2uX?htc*a<8*
z%0P$C0x!P=<f+Xjl~PM*1#sb8;Jvz1w14%R2(j*`T!A(nD&&2`!@#Li0Qn_Nwz1LJ
zfOLPQnCsVpO`CwFORa!OodlNQP`i8tV-NOHuwJ*R$@KC-fW6?_A=_1~KT|s$Ut860
z9~e!5d`&MmZWu~)+vK<od8HmhXIlbEYTmrr>X%%HzVQixHZ9##dHGY{deO(I`?Gy6
zA_Ys}Qp0XGVFzCH>|EUY`=Ln9*&gHz_?u`kHeUGyXUdGfRQP}WT_%7DIR6;g4$yD>
zzJN!s<|DfN5vt<AJHMEa2@rwOAxjlZ^%}POTZP}?v*EihU{>46ufWCfVpRS#ia7<T
zv;uR0{eNOlz%{SM@aE-vQ`W%Ev1<EYU5N4@{+#M169wy*Vjt$7J;0JB)}#u(qvDo~
zp>Iz0{1MD-geTyw6))oGQI*3JmaqUjorB#D{QA&>By)sQ%s5PB5!7m;p%jPPjdLvd
zr~RUl=_cpp!Lt&u<fqF-!T%L-eLb*k8!#|nTozWSiwr#<IRbQa7?%yo*;2W4$J<gQ
za|#;ct6=FF`16y%)&y{<Mcu641twJ5VeSjSbBk2oKy8qAg?k;-Siua6>eA(b@(+|l
z&=cQI*)pz2w=%CJdQf<h`o4gv5eei>)Vsa56rY`OzcvR2?3bvKfC(!`1Xu!D3RrSg
z_VQqfg0m8^7i0<Ch?+HBk;nde;42O(VDjA-Wl2?4(~~*WiR9$rJD7k0Vg>8{=$29S
zwz|#r8(-<-G59mEdZYRL&w~iw-&N|H;L+Rn0!*76L0zQ0{q9}kFXw?d9hr3=?Diwp
zl*dpoFF*Zx{`@Cc7@feaoAai^{jz3m?fP9b_~bzK=`^usjd6;gjgT%VT(aU65padf
z`sz~_(bLnDYHn_x^+3V~5RFEWNF)X#U0q#g3kwSi!tNl~9xypM+5Z&t`Cm8)a{-zF
O0000<MNUMnLSTY1)VRa|

literal 0
HcmV?d00001

diff --git a/changelog/index.html b/changelog/index.html
index 6a5b5245..bdc9f0d5 100644
--- a/changelog/index.html
+++ b/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>
diff --git a/home.html b/home.html
index edb07d95..05e73ffa 100644
--- a/home.html
+++ b/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>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>
+                            <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">
diff --git a/links/index.html b/links/index.html
index a0b033f9..814d54b7 100644
--- a/links/index.html
+++ b/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>
diff --git a/main.css b/main.css
index 0aae6f4d..61de8499 100644
--- a/main.css
+++ b/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;