5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
12 /* カラーパレット: https://colordrop.io/ */
14 background-color: #17223b;
23 header h1, .header-description{
24 display: inline-block;
46 @media screen and (max-width:999px) {
62 window.addEventListener("load",function(){
65 Array.from(document.getElementsByClassName("box")).forEach(element => {
66 element.addEventListener("click", function(){
67 var link = element.dataset.link
76 // 参考: https://gray-code.com/javascript/get-max-value-and-minimum-value-in-array/
77 ["service-name", "service-description"].forEach(className => {
79 Array.from(document.getElementsByClassName(className)).forEach(element =>{
80 WidthList.push(element.clientWidth);
83 var MaxWidth = WidthList.reduce(function(a,b){
87 Array.from(document.getElementsByClassName(className)).forEach(element =>{
88 element.style.width = MaxWidth + 5 + "px";
98 <div class="header-description">
99 <p>ハヤオが開発したいろんなサイトへのリンクをまとめているトップページです。</p>
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>
108 <div class="box" data-link="/buildmydist-2/">
109 <p class="service-name">オリジナルLinuxディストリを自作しよう2</p>
110 <p class="service-description">いろいろなOS派生のディストリビューションを開発するためのサイト</p>
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>
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>
120 <div class="box" data-link="/sleep/index.php">
121 <p class="service-name">n秒後に反応するサイト</p>
122 <p class="service-description">ウェブのタイムアウトなどを検証するためにあえて遅延させるサイト。</p>
124 <div class="box" data-link="/tatebou/index.html">
125 <p class="service-name">迫真縦棒ドメイン短縮URL</p>
126 <p class="service-description">山Dの迫真縦棒ドメインの短縮URLを作成するウェブサイト。</p>
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>
136 <div class="box" data-link="https://github.com/Hayao0819/">
137 <p class="service-name">GitHub</p>
138 <p class="service-description">ハヤオが書いたどうでもいいソースコードの置き場</p>