styles: add width to period table

Author: phodal

.stylelintrc.json

@@ -7,10 +7,26 @@
     "no-empty-source": null,
     "selector-type-no-unknown": null,
     "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true
+    "scss/at-rule-no-unknown": true,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "host"
+        ]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": [
+          "ng-deep"
+        ]
+      }
+    ]
   },
   "ignore": [
     "custom-elements",
     "default-namespace"
   ]
-}
+}

src/app/presentation/home/home.component.html

@@ -7,15 +7,17 @@ <h1>- LEDGE -</h1>
     </p>
   </div>
 
-  <div class="period-title markdown">
-    <h4>它可以帮助您的企业在数字化时代更好地前进。</h4>
-    <h2 class="title intro">DevOps 元素周期表 —— 选择您的 DevOps 工具</h2>
+  <div class="home-section period-section">
+    <div class="period-title markdown">
+      <h4>它可以帮助您的企业在数字化时代更好地前进。</h4>
+      <h2 class="title intro">DevOps 元素周期表 —— 选择您的 DevOps 工具</h2>
+    </div>
+    <app-periodic-table
+      [selectedMetal]="highlightState"
+      (currentAtomCategory)="setCurrentAtomCategory($event)"
+    >
+    </app-periodic-table>
   </div>
-  <app-periodic-table
-    [selectedMetal]="highlightState"
-    (currentAtomCategory)="setCurrentAtomCategory($event)"
-  >
-  </app-periodic-table>
 
   <div class="home-section">
     <div class="section-title">「它可以」</div>
@@ -58,7 +60,7 @@ <h3 class="center">
         沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询
       </h3>
     </div>
-    <img src="/assets/images/esp.svg" alt="ESP Modeling" />
+    <img src="/assets/images/esp.svg" alt="ESP Modeling"/>
   </div>
 
   <div class="home-section box-shadow">
@@ -67,7 +69,7 @@ <h3 class="center">
       <div class="contributor" *ngFor="let user of contributors">
         <div class="avatar">
           <a href="{{ user.link }}" target="_blank"
-            ><img src="{{ user.avatar }}" alt=""
+          ><img src="{{ user.avatar }}" alt=""
           /></a>
         </div>
         <div class="username">

src/app/presentation/home/home.component.scss

@@ -86,10 +86,15 @@
 
 .home-section {
   width: 1200px;
-  margin: 0 auto;
+  margin: 2em auto 0;
   border-radius: 8px;
   background-color: $white;
 
+  &.period-section {
+    width: auto;
+    padding: 2em;
+  }
+
   .section-title {
     font-size: 40px;
     letter-spacing: 2.5px;
@@ -123,8 +128,7 @@
     line-height: 1.5;
     letter-spacing: 1px;
     text-align: center;
-    margin: 0px auto;
-    margin-top: 16px;
+    margin: 16px auto 0;
     width: 800px;
   }
 
@@ -143,9 +147,7 @@
 }
 
 :host ::ng-deep {
-
   .devops-content {
-
     .no-toc-markdown {
       width: 100%;
     }