}
body{
- margin-top: 10vh;
margin-left: 4vw;
margin-right: 4vw;
+ height: 100%;
}
+
+ /*
+ header,main{
+ max-width: 1100px;
+ margin: 0 auto;
+ }*/
+
header h1, .header-description{
display: inline-block;
}
.box{
cursor: pointer;
display: flex;
- margin-top: 5vh;
+ /* margin-top: 5vh; */
+ padding: 3vh;
+ justify-content: center;
}
main, header{
- margin: 2%
+ padding-top: 3vh;
+ /* padding-left: 3vw; */
+ /*padding-right: 3vw; */
+
}
.service-name{
.service-description{
margin-left: 3vw;
+ /* text-align: right; */
}
+ .box-container{
+ /* width: 100vw; */
+ }
+
+ /*
@media screen and (max-width:999px) {
main, header{
margin: 0;
margin-right: 0.1vw;
}
}
+ */
</style>
<script>
- window.addEventListener("load",function(){
-
+ const SetStyle = function(){
// リンクを作成
Array.from(document.getElementsByClassName("box")).forEach(element => {
element.addEventListener("click", function(){
// 横幅を設定
// 参考: https://gray-code.com/javascript/get-max-value-and-minimum-value-in-array/
+ var MaxWidthList= [];
["service-name", "service-description"].forEach(className => {
var WidthList = [];
Array.from(document.getElementsByClassName(className)).forEach(element =>{
var MaxWidth = WidthList.reduce(function(a,b){
return Math.max(a,b);
});
+ MaxWidthList.push(MaxWidth);
Array.from(document.getElementsByClassName(className)).forEach(element =>{
element.style.width = MaxWidth + 5 + "px";
})
})
+ console.log(MaxWidthList)
+
+ // 中央の空白を設定
+ /*
+ var ServiceNameMaxWidth = MaxWidthList[0];
+ var ServiceDescMaxWidth = MaxWidthList[1];
+ var BoxWidth = Array.from(document.getElementsByClassName("box-container"))[0].clientWidth;
+ var CenterBlank = BoxWidth - ServiceDescMaxWidth - ServiceNameMaxWidth;
+ console.log(ServiceDescMaxWidth);
+
+ Array.from(document.getElementsByClassName("service-name")).forEach(element => {
+ if (CenterBlank > 0 ){
+ //element.style.marginLeft = CenterBlank + "px";
+ };
+ });
+ */
+ };
- });
+ window.addEventListener("load",SetStyle);
+ window.addEventListener("resize",SetStyle);
+ //window.addEventListener("resize", function(){location.reload();});
</script>
</head>
<body>
</header>
<main>
<div class="box-container">
+ <div class="box" data-link="/alter/index.html">
+ <p class="service-name">Alter Linux Alpha Release</p>
+ <p class="service-description">Alter Linuxの限定公開ビルドをダウンロードできるサイト。TailWind CSS最高。</p>
+ </div>
+ <div class="box" data-link="./blog/">
+ <p class="service-name">ハヤオの物置き</p>
+ <p class="service-description">個人的な内容ばかりのブログ。Hugoで構築してるのでそこそこモダン。</p>
+ </div>
<div class="box" data-link="/buildmydist/index.html">
<p class="service-name">【2019年版】Ubuntu系のOSを自作しよう（旧版）</p>
<p class="service-description">昔のハヤオが作ったUbuntu18.04の派生OSを開発するためのサイト。黒歴史。</p>
<p class="service-name">Web NotePad</p>
<p class="service-description">初めて作ったウェブアプリ。LocalStorageにデータを保存する。タブ機能有り。</p>
</div>
+ <div class="box" data-link="/sanmoku">
+ <p class="service-name">三目並べ</p>
+ <p class="service-description">プレーヤーの人数やマス目を自由に設定できるおかしな三目並べ</p>
+
+ </div>
<div class="box" data-link="/sleep/index.php">
<p class="service-name">n秒後に反応するサイト</p>
<p class="service-description">ウェブのタイムアウトなどを検証するためにあえて遅延させるサイト。</p>
</div>
+ <div class="box" data-link="/tatebou/index.html">
+ <p class="service-name">迫真縦棒ドメイン短縮URL</p>
+ <p class="service-description">山Dの迫真縦棒ドメインの短縮URLを作成するウェブサイト。</p>
+ </div>
</div>
</div>
</main>
</body>
-</html>
\ No newline at end of file
+</html>
OSDN Git Service
