[fix] : レイアウト処理を修正

[alterlinux/hayao.fascode.net.git] / index.html
diff --git a/index.html b/index.html

index a640eb2..2c9553b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -31,7 +31,10 @@
          }
  
          main, header{
-            padding: 2%
+            padding-top: 3vh;
+            padding-left: 3vw;
+            padding-right: 3vw;
+
          }
  
          .service-name{
@@ -41,6 +44,11 @@
  
          .service-description{
              margin-left: 3vw;
+            /* text-align: right; */
+        }
+
+        .box-container{
+            /* width: 100vw; */
          }
  
          @media screen and (max-width:999px) { 
@@ -59,8 +67,7 @@
      </style>
  
      <script>
-        window.addEventListener("load",function(){
-
+        const SetStyle = function(){
              // リンクを作成
              Array.from(document.getElementsByClassName("box")).forEach(element => {
                  element.addEventListener("click", function(){
@@ -74,6 +81,7 @@
  
              // 横幅を設定
              // 参考: 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 =>{
@@ -83,13 +91,32 @@
                  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);
      </script>
  </head>
  <body>