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;
30 header h1, .header-description{
31 display: inline-block;
37 /* margin-top: 5vh; */
39 justify-content: center;
44 /* padding-left: 3vw; */
45 /*padding-right: 3vw; */
56 /* text-align: right; */
64 @media screen and (max-width:999px) {
81 const SetStyle = function(){
83 Array.from(document.getElementsByClassName("box")).forEach(element => {
84 element.addEventListener("click", function(){
85 var link = element.dataset.link
94 // 参考: https://gray-code.com/javascript/get-max-value-and-minimum-value-in-array/
96 ["service-name", "service-description"].forEach(className => {
98 Array.from(document.getElementsByClassName(className)).forEach(element =>{
99 WidthList.push(element.clientWidth);
102 var MaxWidth = WidthList.reduce(function(a,b){
103 return Math.max(a,b);
105 MaxWidthList.push(MaxWidth);
107 Array.from(document.getElementsByClassName(className)).forEach(element =>{
108 element.style.width = MaxWidth + 5 + "px";
111 console.log(MaxWidthList)
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);
121 Array.from(document.getElementsByClassName("service-name")).forEach(element => {
122 if (CenterBlank > 0 ){
123 //element.style.marginLeft = CenterBlank + "px";
129 window.addEventListener("load",SetStyle);
130 window.addEventListener("resize",SetStyle);
131 //window.addEventListener("resize", function(){location.reload();});
137 <div class="header-description">
138 <p>ハヤオが開発したいろんなサイトへのリンクをまとめているトップページです。</p>
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>
147 <div class="box" data-link="./blog/">
148 <p class="service-name">ハヤオの物置き</p>
149 <p class="service-description">個人的な内容ばかりのブログ。Hugoで構築してるのでそこそこモダン。</p>
151 <div class="box" data-link="/buildmydist/index.html">
152 <p class="service-name">【2019年版】Ubuntu系のOSを自作しよう(旧版)</p>
153 <p class="service-description">昔のハヤオが作ったUbuntu18.04の派生OSを開発するためのサイト。黒歴史。</p>
155 <div class="box" data-link="/buildmydist-2/">
156 <p class="service-name">オリジナルLinuxディストリを自作しよう2</p>
157 <p class="service-description">いろいろなOS派生のディストリビューションを開発するためのサイト</p>
159 <div class="box" data-link="/alteriso-options-generator/index.php">
160 <p class="service-name">AlterISO3 ビルドオプション ジェネレータ</p>
161 <p class="service-description">AlterISO3のビルド設定を行うツール。初めてJSを使った。</p>
163 <div class="box" data-link="https://hayao0819.github.io/web-notepad/index.html">
164 <p class="service-name">Web NotePad</p>
165 <p class="service-description">初めて作ったウェブアプリ。LocalStorageにデータを保存する。タブ機能有り。</p>
167 <div class="box" data-link="/sanmoku">
168 <p class="service-name">三目並べ</p>
169 <p class="service-description">プレーヤーの人数やマス目を自由に設定できるおかしな三目並べ</p>
172 <div class="box" data-link="/sleep/index.php">
173 <p class="service-name">n秒後に反応するサイト</p>
174 <p class="service-description">ウェブのタイムアウトなどを検証するためにあえて遅延させるサイト。</p>
176 <div class="box" data-link="/tatebou/index.html">
177 <p class="service-name">迫真縦棒ドメイン短縮URL</p>
178 <p class="service-description">山Dの迫真縦棒ドメインの短縮URLを作成するウェブサイト。</p>
183 <div class="box-container">
184 <div class="box" data-link="https://twitter.com/Hayao0819">
185 <p class="service-name">Twitter</p>
186 <p class="service-description">ハヤオのすみか</p>
188 <div class="box" data-link="https://github.com/Hayao0819/">
189 <p class="service-name">GitHub</p>
190 <p class="service-description">ハヤオが書いたどうでもいいソースコードの置き場</p>