feat(www): add friends' github links and refactor code.

3 files changed, 33 insertions, 28 deletions

diff --git a/docker/nginx/sites/www/github-mark.png b/docker/nginx/sites/www/github-mark.png
new file mode 100644
index 0000000..6cb3b70
--- /dev/null
+++ b/docker/nginx/sites/www/github-mark.png
diff --git a/docker/nginx/sites/www/index.html b/docker/nginx/sites/www/index.html
index 3f9eb45..6fae9ef 100644
--- a/docker/nginx/sites/www/index.html
+++ b/docker/nginx/sites/www/index.html
@@ -33,20 +33,22 @@
       <h2 id="friends">My Friends <small>(more links are being collected ...)</small></h2>
       <div id="friends-container">
         <div class="friend">
-          <a class="friend-link" href="https://wsmcs.cn" target="_blank">
-            <img class="friend-img" alt="Friend WSM's avatar"
+          <a rel="noopener noreferrer" href="https://wsmcs.cn">
+            <img class="friend-avatar" alt="Friend WSM's avatar"
               src="https://wsmcs.cn/wp-content/uploads/2023/02/BifengxiaPanda_ZH-CN8879969527_UHD-scaled.jpg"
               width="80" height="80"/><br/>
-            <span class="friend-name">wsm</span>
-          </a>
+            wsm</a>
+          <a rel="noopener noreferrer" href="https://github.com/wushuming666"><img
+            class="friend-github" src="./github-mark.png"/></a>
         </div>
         <div class="friend">
-          <a class="friend-link" rel="noopener noreferrer" href="https://github.com/hszSoft" target="_blank">
-            <img class="friend-img" alt="Friend HSZ's avatar"
+          <a rel="noopener noreferrer" href="https://www.hszsoft.com">
+            <img class="friend-avatar" alt="Friend HSZ's avatar"
               src="https://avatars.githubusercontent.com/u/63097618?v=4"
               width="80" height="80"/><br/>
-            <span class="friend-name">hsz</span><br/>
-          </a>
+            hsz</a>
+          <a rel="noopener noreferrer" href="https://github.com/hszSoft"><img
+            class="friend-github" src="./github-mark.png"/></a><br/>
           <span class="friend-tag">随性の程序员</span>
         </div>
       </div>
@@ -54,20 +56,19 @@
     <section>
       <h2>Other Links</h2>
       <ul>
-        <li><a href="https://crupest.life" target="_blank">https://crupest.life</a>
+        <li><a rel="noopener noreferrer" href="https://crupest.life">https://crupest.life</a>
           : home page, aka the one you are reading, built with
-          <a rel="noopener noreferrer" href="https://parceljs.org" target="_blank">Parcel</a>
+          <a rel="noopener noreferrer" href="https://parceljs.org">Parcel</a>
           and
-          <a rel="noopener noreferrer" href="https://pnpm.io" target="_blank">pnpm</a>.</li>
-        <li><a href="https://crupest.life/blog" target="_blank">https://crupest.life/blog</a>
+          <a rel="noopener noreferrer" href="https://pnpm.io">pnpm</a>.</li>
+        <li><a rel="noopener noreferrer" href="https://crupest.life/blog">https://crupest.life/blog</a>
           : blogs, built with
-          <a rel="noopener noreferrer" href="https://gohugo.io" target="_blank">hugo</a>.</li>
-        <li><a href="https://git.crupest.life" target="_blank">https://git.crupest.life</a>
+          <a rel="noopener noreferrer" href="https://gohugo.io">hugo</a>.</li>
+        <li><a rel="noopener noreferrer" href="https://git.crupest.life">https://git.crupest.life</a>
           : self-hosted
-          <a rel="noopener noreferrer" href="https://forgejo.org" target="_blank">Forgejo</a>
+          <a rel="noopener noreferrer" href="https://forgejo.org">Forgejo</a>
           instance.</li>
-        <li><del><a rel="nofollow" href="https://timeline.crupest.life" target="_blank">https://timeline.crupest.life</a>
-          : micro-blog with my own web app
+        <li><del><span class="fake-link">https://timeline.crupest.life</span> : micro-blog with my own web app
           <a rel="noopener noreferrer" href="https://github.com/crupest/Timeline">Timeline</a>.</del>
           No longer maintain, so it stops serving due to security concerns.
         </li>
@@ -90,7 +91,8 @@
     <footer>
       <p id="license">
         <small>This work is licensed under
-          <a rel="license noopener noreferrer" href="https://creativecommons.org/licenses/by-nc/4.0/"
+          <a rel="license noopener noreferrer"
+            href="https://creativecommons.org/licenses/by-nc/4.0/"
             target="_blank">
             <span id="license-text">CC BY-NC 4.0</span>
             <span id="license-img-container">
diff --git a/docker/nginx/sites/www/src/style.css b/docker/nginx/sites/www/src/style.css
index 64757a6..05c98a0 100644
--- a/docker/nginx/sites/www/src/style.css
+++ b/docker/nginx/sites/www/src/style.css
@@ -1,10 +1,3 @@
-:root {
-  --im-happy: dodgerblue;
-  --im-angry: orangered;
-  --im-good: hsl(120, 85%, 85%);
-  --im-active: hsl(20, 85%, 85%);
-}
-
 html {
   width: 100%;
 }
@@ -20,6 +13,10 @@ a {
   font-family: monospace;
 }
 
+.fake-link {
+  font-family: monospace;
+}
+
 #main-article {
   max-width: 880px;
   margin-top: 1em;
@@ -84,11 +81,11 @@ a {
 }
 
 .slogan.happy {
-  background-color: var(--im-happy);
+  background-color: dodgerblue;
 }
 
 .slogan.angry {
-  background-color: var(--im-angry);
+  background-color: orangered;
 }
 
 body[data-emotion="happy"] .slogan.happy {
@@ -113,10 +110,16 @@ body[data-emotion="angry"] .slogan.angry {
   font-family: unset;
 }
 
-.friend-img {
+.friend-avatar {
   object-fit: cover;
 }
 
+.friend-github {
+  width: 1em;
+  vertical-align: middle;
+  margin-right: -0.5em;
+}
+
 .friend-tag {
   font-size: 0.8em;
 }