diff options
Diffstat (limited to 'docker/nginx')
| -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 { | 
