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