diff options
| -rw-r--r-- | docker/nginx/sites/www/index.html | 63 | ||||
| -rw-r--r-- | docker/nginx/sites/www/src/style.css | 19 |
2 files changed, 53 insertions, 29 deletions
diff --git a/docker/nginx/sites/www/index.html b/docker/nginx/sites/www/index.html index 5ff04a0..0e96410 100644 --- a/docker/nginx/sites/www/index.html +++ b/docker/nginx/sites/www/index.html @@ -19,39 +19,56 @@ </div> </div> <article id="main-article"> - <img id="avatar" src="./avatar.png" title="my avatar" width="80" height="80"> + <img id="avatar" src="./avatar.png" alt="My avatar" width="80" height="80"/> <h1 id="title">Hello! This is <span id="title-name">crupest</span> !</h1> <hr/> <section> <p>Welcome to my home page! Nice to meet you here! 🥰</p> <p>If you have something interesting to share with me, feel free to email me at - <a href="mailto:crupest@crupest.life">crupest@crupest.life</a>.</p> + <a rel="noopener noreferrer" href="mailto:crupest@crupest.life">crupest@crupest.life</a>.</p> <p>You can also create an issue in any of my repos on GitHub to talk anything to me, - <a href="https://github.com/crupest">https://github.com/crupest</a>.</p> + <a rel="noopener noreferrer" href="https://github.com/crupest">https://github.com/crupest</a>.</p> </section> <section> <h2 id="friends">My Friends <small>(more links are being collected ...)</small></h2> <div id="friends-container"> - <a class="friend-link" href="https://wsmcs.cn" target="_blank"> - <img class="friend-img" - src="https://wsmcs.cn/wp-content/uploads/2023/02/BifengxiaPanda_ZH-CN8879969527_UHD-scaled.jpg" - width="80" height="80"> - <span class="friend-name">wsm</span> - </a> + <div class="friend"> + <a class="friend-link" href="https://wsmcs.cn" target="_blank"> + <img class="friend-img" 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> + </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" + src="https://avatars.githubusercontent.com/u/63097618?v=4" + width="80" height="80"/><br/> + <span class="friend-name">hsz</span><br/> + </a> + <span class="friend-tag">Game Engine Lover</span> + </div> </div> </section> <section> <h2>Other Links</h2> <ul> - <li><a href="https://crupest.life" target="_blank">https://crupest.life</a> : home page, - aka the one you are reading, built with <a href="https://parceljs.org" target="_blank">Parcel</a> - and <a href="https://pnpm.io" target="_blank">pnpm</a>.</li> - <li><a href="https://crupest.life/blog" target="_blank">https://crupest.life/blog</a> : blogs, - built with <a href="https://gohugo.io" target="_blank">hugo</a>.</li> - <li><a href="https://git.crupest.life" target="_blank">https://git.crupest.life</a> : - self-hosted <a href="https://forgejo.org" target="_blank">Forgejo</a> instance.</li> - <li><del><a href="https://timeline.crupest.life" target="_blank">https://timeline.crupest.life</a> : - micro-blog with my own web app <a href="https://github.com/crupest/Timeline">Timeline</a>.</del> + <li><a href="https://crupest.life" target="_blank">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> + 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> + : 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> + : self-hosted + <a rel="noopener noreferrer" href="https://forgejo.org" target="_blank">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 + <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> </ul> @@ -60,13 +77,13 @@ <footer> <p id="license"> <small>This work is licensed under - <a href="https://creativecommons.org/licenses/by-nc/4.0/" - target="_blank" rel="license noopener noreferrer"> + <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"> - <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"> - <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg"> - <img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg"> + <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"/> + <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg"/> + <img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg"/> </span> </a> </small> diff --git a/docker/nginx/sites/www/src/style.css b/docker/nginx/sites/www/src/style.css index 501c262..9daad94 100644 --- a/docker/nginx/sites/www/src/style.css +++ b/docker/nginx/sites/www/src/style.css @@ -99,19 +99,26 @@ body[data-emotion="angry"] .slogan.angry { transform: translateY(0); } -.friend-link { - display: inline-block; +#friends-container { + display: flex; + gap: 1em; +} + +.friend { + flex-grow: 0; + text-align: center; +} + +.friend a { font-family: unset; } .friend-img { - display: block; object-fit: cover; } -.friend-name { - display: block; - text-align: center; +.friend-tag { + font-size: 0.8em; } #license a { |