アイコンの追加 (Font Awesome), 閉じすぎ div を削除

2020-07-02 20:32:02 +09:00
parent 08825793ed
commit 80b707d427
3 changed files with 90 additions and 21 deletions
--- a/about/misc.html
+++ b/about/misc.html
@@ -62,9 +62,18 @@
            <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 348.106V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80v351.988c0 26.51 21.49 48 48 48h268.118a48 48 0 0 0 33.941-14.059l83.882-83.882A48 48 0 0 0 448 348.106zm-128 80v-76.118h76.118L320 428.106zM400 80v223.988H296c-13.255 0-24 10.745-24 24v104H48V80h352z"/></svg><p>その他</p></a>
        </li>
      </ul>
-     <h1>その他</h1>
-     <h2>所持デバイス</h2>
-     <h3>PC</h3>
+     <h1>
+      <svg width="45px" height="45px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 348.106V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80v351.988c0 26.51 21.49 48 48 48h268.118a48 48 0 0 0 33.941-14.059l83.882-83.882A48 48 0 0 0 448 348.106zm-128 80v-76.118h76.118L320 428.106zM400 80v223.988H296c-13.255 0-24 10.745-24 24v104H48V80h352z"/></svg>
+      その他
+    </h1>
+     <h2>
+      <svg width="35px" height="35px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"/></svg>
+      所持デバイス
+    </h2>
+     <h3>
+      <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"/></svg>
+      PC
+    </h3>
     <div class="row" style="margin-left: 3px">
     <div class="card" style="max-width: 30rem">
        <div class="card-body">
@@ -115,7 +124,8 @@
        </div>
      </div>
    </div>
-    <h3>モバイル</h3>
+    <h3><svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/></svg>
+      モバイル</h3>
    <div class="row" style="margin-left: 3px">
        <div class="card" style="max-width: 30rem">
           <div class="card-body">
@@ -150,7 +160,10 @@
            </div>
          </div>
        </div>
-        <h3>周辺機器</h3>
+        <h3>
+          <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 352a160 160 0 0 0 160 160h64a160 160 0 0 0 160-160V224H0zM176 0h-16A160 160 0 0 0 0 160v32h176zm48 0h-16v192h176v-32A160 160 0 0 0 224 0z"/></svg>
+          周辺機器
+        </h3>
        <div class="row" style="margin-left: 3px">
            <div class="card" style="max-width: 30rem">
               <div class="card-body">
@@ -185,7 +198,10 @@
                </div>
              </div>
            </div>
-     <h2>起動 / プレイしたことのあるゲームの一覧</h2>
+     <h2>
+      <svg width="35px" height="35px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M480.07 96H160a160 160 0 1 0 114.24 272h91.52A160 160 0 1 0 480.07 96zM248 268a12 12 0 0 1-12 12h-52v52a12 12 0 0 1-12 12h-24a12 12 0 0 1-12-12v-52H84a12 12 0 0 1-12-12v-24a12 12 0 0 1 12-12h52v-52a12 12 0 0 1 12-12h24a12 12 0 0 1 12 12v52h52a12 12 0 0 1 12 12zm216 76a40 40 0 1 1 40-40 40 40 0 0 1-40 40zm64-96a40 40 0 1 1 40-40 40 40 0 0 1-40 40z"/></svg> 
+      起動 / プレイしたことのあるゲームの一覧
+    </h2>
     <h3>ノベルゲーム</h3>
     <p>進行中</p>
     <ul>
@@ -247,11 +263,15 @@
     </ul>
     <div class="card">
        <div class="card-body">
-          <h5 class="card-title">authorized_keys</h5>
+          <h5 class="card-title">
+            <svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 512 512"><path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"/></svg>
+            authorized_keys
+          </h5>
          <pre>ssh-rsa AAAAB3NzaC1yc2EAAAABJQAAAQEAh6eykGuYwuljBIO+zBRgsEaVzVnktCCIFuMHz3UiuPR7gFogWQFLOVOTdX5j4Ic92lOoSGL1i2rR67N04yBJX5ureyVO5uDa7+i0lOSlrn0tOfJJMQGi1Jdq6/0iN4ynHep+hoYoWm/wloBZf2VRgdbz64oVcaSTT8vcx9V5Y6Ea3bn2DXv67GYRD3Dk+/37gj5KqvJaONoIxzOrs9ism03tvAvHTjmlY81XGjR8UZHfxNFhyKsA6OUma8C0YvryEOCZX3MPsNXi+9+r1cs0KtYjtr+5jTDrFd/WnwcdSAvylEMG92xAoVmbW6L2wyK/DejQu+PRMSBe/gr47zeO9Q==</pre>
        </div>
      </div>
-      <h2>かわいいアイコンたち</h2>
+      <h2><svg width="35px" height="35px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z"/></svg>
+        かわいいアイコンたち</h2>
      <p>描いてくださり、ありがとうございます!</p>
      <div class="row" style="text-align: center;">
        <div class="col" >
@@ -280,6 +300,16 @@
        <a href="https://twitter.com/R_I_R_U_">りる</a> さんより
      </div>
    </div>
+    <h2>
+      <svg width="35px" height="35px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
+      Special Thanks
+    </h2>
+    <ul>
+      <li><a href="https://v5.getbootstrap.com/">Bootstrap · The most popular HTML, CSS, and JS library in the world.</a></li>
+      <li><a href="https://vercel.com/">Develop. Preview. Ship. – Vercel</a></li>
+      <li><a href="https://fontawesome.com/">Font Awesome</a></li>
+    </ul>
+    <p style="text-align: center; margin-top: 10px">Made by yude. ・ Licensed under MIT License. (excluding assets)</p>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>