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
  24         /*
  25         header,main{
  26             max-width: 1100px;
  27             margin: 0 auto;
  28         }*/
  29
  30         header h1, .header-description{
  31             display: inline-block;
  32         }
  33
  34         .box{
  35             cursor: pointer;
  36             display: flex;
  37             /* margin-top: 5vh; */
  38             padding: 3vh;
  39             justify-content: center;
  40         }
  41
  42         main, header{
  43             padding-top: 3vh;
  44             /* padding-left: 3vw; */
  45             /*padding-right: 3vw; */
  46
  47         }
  48
  49         .service-name{
  50             color: #08ffc8;
  51             text-align: right;
  52         }
  53
  54         .service-description{
  55             margin-left: 3vw;
  56             /* text-align: right; */
  57         }
  58
  59         .box-container{
  60             /* width: 100vw; */
  61         }
  62
  63         /*
  64         @media screen and (max-width:999px) {
  65             main, header{
  66                 margin: 0;
  67             }
  68
  69             body{
  70                 margin-top: 2vh;
  71                 margin-left: 0.1vw;
  72                 margin-right: 0.1vw;
  73             }
  74         }
  75         */
  76
  77
  78     </style>
  79
  80     <script>
  81         const SetStyle = function(){
  82             // リンクを作成
  83             Array.from(document.getElementsByClassName("box")).forEach(element => {
  84                 element.addEventListener("click", function(){
  85                     var link = element.dataset.link
  86                     if (link){
  87                         location.href = link;
  88                     }
  89
  90                 });
  91             });
  92
  93             // 横幅を設定
  94             // 参考: https://gray-code.com/javascript/get-max-value-and-minimum-value-in-array/
  95             var MaxWidthList= [];
  96             ["service-name", "service-description"].forEach(className => {
  97                 var WidthList = [];
  98                 Array.from(document.getElementsByClassName(className)).forEach(element =>{
  99                     WidthList.push(element.clientWidth);
 100                 })
 101
 102                 var MaxWidth = WidthList.reduce(function(a,b){
 103                     return Math.max(a,b);
 104                 });
 105                 MaxWidthList.push(MaxWidth);
 106
 107                 Array.from(document.getElementsByClassName(className)).forEach(element =>{
 108                     element.style.width = MaxWidth + 5 + "px";
 109                 })
 110             })
 111             console.log(MaxWidthList)
 112
 113             // 中央の空白を設定
 114             /*
 115             var ServiceNameMaxWidth = MaxWidthList[0];
 116             var ServiceDescMaxWidth = MaxWidthList[1];
 117             var BoxWidth = Array.from(document.getElementsByClassName("box-container"))[0].clientWidth;
 118             var CenterBlank = BoxWidth - ServiceDescMaxWidth - ServiceNameMaxWidth;
 119             console.log(ServiceDescMaxWidth);
 120
 121             Array.from(document.getElementsByClassName("service-name")).forEach(element => {
 122                 if (CenterBlank > 0 ){
 123                     //element.style.marginLeft = CenterBlank + "px";
 124                 };
 125             });
 126             */
 127         };
 128
 129         window.addEventListener("load",SetStyle);
 130         window.addEventListener("resize",SetStyle);
 131         //window.addEventListener("resize", function(){location.reload();});
 132     </script>
 133 </head>
 134 <body>
 135     <header>
 136         <h1>ハヤオのトップページ</h1>
 137         <div class="header-description">
 138             <p>ハヤオが開発したいろんなサイトへのリンクをまとめているトップページです。</p>
 139         </div>
 140     </header>
 141     <main>
 142         <div class="box-container">
 143             <div class="box" data-link="/alter/index.html">
 144                 <p class="service-name">Alter Linux Alpha Release</p>
 145                 <p class="service-description">Alter Linuxの限定公開ビルドをダウンロードできるサイト。TailWind CSS最高。</p>
 146             </div>
 147             <div class="box" data-link="/buildmydist/index.html">
 148                 <p class="service-name">【2019年版】Ubuntu系のOSを自作しよう（旧版）</p>
 149                 <p class="service-description">昔のハヤオが作ったUbuntu18.04の派生OSを開発するためのサイト。黒歴史。</p>
 150             </div>
 151             <div class="box" data-link="/buildmydist-2/">
 152                 <p class="service-name">オリジナルLinuxディストリを自作しよう2</p>
 153                 <p class="service-description">いろいろなOS派生のディストリビューションを開発するためのサイト</p>
 154             </div>
 155             <div class="box" data-link="/alteriso-options-generator/index.php">
 156                 <p class="service-name">AlterISO3 ビルドオプション ジェネレータ</p>
 157                 <p class="service-description">AlterISO3のビルド設定を行うツール。初めてJSを使った。</p>
 158             </div>
 159             <div class="box" data-link="https://hayao0819.github.io/web-notepad/index.html">
 160                 <p class="service-name">Web NotePad</p>
 161                 <p class="service-description">初めて作ったウェブアプリ。LocalStorageにデータを保存する。タブ機能有り。</p>
 162             </div>
 163             <div class="box" data-link="/sanmoku">
 164                 <p class="service-name">三目並べ</p>
 165                 <p class="service-description">プレーヤーの人数やマス目を自由に設定できるおかしな三目並べ</p>
 166
 167             </div>
 168             <div class="box" data-link="/sleep/index.php">
 169                 <p class="service-name">n秒後に反応するサイト</p>
 170                 <p class="service-description">ウェブのタイムアウトなどを検証するためにあえて遅延させるサイト。</p>
 171             </div>
 172             <div class="box" data-link="/tatebou/index.html">
 173                 <p class="service-name">迫真縦棒ドメイン短縮URL</p>
 174                 <p class="service-description">山Dの迫真縦棒ドメインの短縮URLを作成するウェブサイト。</p>
 175             </div>
 176
 177         </div>
 178
 179         <div class="box-container">
 180             <div class="box" data-link="https://twitter.com/Hayao0819">
 181                 <p class="service-name">Twitter</p>
 182                 <p class="service-description">ハヤオのすみか</p>
 183             </div>
 184             <div class="box" data-link="https://github.com/Hayao0819/">
 185                 <p class="service-name">GitHub</p>
 186                 <p class="service-description">ハヤオが書いたどうでもいいソースコードの置き場</p>
 187             </div>
 188         </div>
 189     </main>
 190 </body>
 191 </html>