index.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <head>
   4     <meta charset="UTF-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <title>はやおのぺーじ</title>
   7     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
   8
   9
  10     <style>
  11
  12         /* カラーパレット: https://colordrop.io/ */
  13         html{
  14             background-color: #17223b;
  15             color: #fff7f7;
  16         }
  17
  18         body{
  19             margin-left: 4vw;
  20             margin-right: 4vw;
  21             height: 100%;
  22         }
  23         header h1, .header-description{
  24             display: inline-block;
  25         }
  26
  27         .box{
  28             cursor: pointer;
  29             display: flex;
  30             margin-top: 5vh;
  31         }
  32
  33         main, header{
  34             padding: 2%
  35         }
  36
  37         .service-name{
  38             color: #08ffc8;
  39             text-align: right;
  40         }
  41
  42         .service-description{
  43             margin-left: 3vw;
  44         }
  45
  46         @media screen and (max-width:999px) {
  47             main, header{
  48                 margin: 0;
  49             }
  50
  51             body{
  52                 margin-top: 2vh;
  53                 margin-left: 0.1vw;
  54                 margin-right: 0.1vw;
  55             }
  56         }
  57
  58
  59     </style>
  60
  61     <script>
  62         window.addEventListener("load",function(){
  63
  64             // リンクを作成
  65             Array.from(document.getElementsByClassName("box")).forEach(element => {
  66                 element.addEventListener("click", function(){
  67                     var link = element.dataset.link
  68                     if (link){
  69                         location.href = link;
  70                     }
  71
  72                 });
  73             });
  74
  75             // 横幅を設定
  76             // 参考: https://gray-code.com/javascript/get-max-value-and-minimum-value-in-array/
  77             ["service-name", "service-description"].forEach(className => {
  78                 var WidthList = [];
  79                 Array.from(document.getElementsByClassName(className)).forEach(element =>{
  80                     WidthList.push(element.clientWidth);
  81                 })
  82
  83                 var MaxWidth = WidthList.reduce(function(a,b){
  84                     return Math.max(a,b);
  85                 });
  86
  87                 Array.from(document.getElementsByClassName(className)).forEach(element =>{
  88                     element.style.width = MaxWidth + 5 + "px";
  89                 })
  90             })
  91
  92         });
  93     </script>
  94 </head>
  95 <body>
  96     <header>
  97         <h1>ハヤオのトップページ</h1>
  98         <div class="header-description">
  99             <p>ハヤオが開発したいろんなサイトへのリンクをまとめているトップページです。</p>
 100         </div>
 101     </header>
 102     <main>
 103         <div class="box-container">
 104             <div class="box" data-link="/buildmydist/index.html">
 105                 <p class="service-name">【2019年版】Ubuntu系のOSを自作しよう（旧版）</p>
 106                 <p class="service-description">昔のハヤオが作ったUbuntu18.04の派生OSを開発するためのサイト。黒歴史。</p>
 107             </div>
 108             <div class="box" data-link="/buildmydist-2/">
 109                 <p class="service-name">オリジナルLinuxディストリを自作しよう2</p>
 110                 <p class="service-description">いろいろなOS派生のディストリビューションを開発するためのサイト</p>
 111             </div>
 112             <div class="box" data-link="/alteriso-options-generator/index.php">
 113                 <p class="service-name">AlterISO3 ビルドオプション ジェネレータ</p>
 114                 <p class="service-description">AlterISO3のビルド設定を行うツール。初めてJSを使った。</p>
 115             </div>
 116             <div class="box" data-link="https://hayao0819.github.io/web-notepad/index.html">
 117                 <p class="service-name">Web NotePad</p>
 118                 <p class="service-description">初めて作ったウェブアプリ。LocalStorageにデータを保存する。タブ機能有り。</p>
 119             </div>
 120             <div class="box" data-link="/sleep/index.php">
 121                 <p class="service-name">n秒後に反応するサイト</p>
 122                 <p class="service-description">ウェブのタイムアウトなどを検証するためにあえて遅延させるサイト。</p>
 123             </div>
 124             <div class="box" data-link="/tatebou/index.html">
 125                 <p class="service-name">迫真縦棒ドメイン短縮URL</p>
 126                 <p class="service-description">山Dの迫真縦棒ドメインの短縮URLを作成するウェブサイト。</p>
 127             </div>
 128
 129         </div>
 130
 131         <div class="box-container">
 132             <div class="box" data-link="https://twitter.com/Hayao0819">
 133                 <p class="service-name">Twitter</p>
 134                 <p class="service-description">ハヤオのすみか</p>
 135             </div>
 136             <div class="box" data-link="https://github.com/Hayao0819/">
 137                 <p class="service-name">GitHub</p>
 138                 <p class="service-description">ハヤオが書いたどうでもいいソースコードの置き場</p>
 139             </div>
 140         </div>
 141     </main>
 142 </body>
 143 </html>