add open props dependence

package.json

@@ -26,6 +26,7 @@
         "animate.css": "^4.1.1",
         "eva-icons": "^1.1.3",
         "ngx-highlightjs": "^12.0.0",
+        "open-props": "^1.7.10",
         "rxjs": "^7.5.7",
         "tslib": "^2.6.2",
         "zone.js": "~0.15.0"

projects/layout/src/modules/carousel/carousel.component.html

@@ -1,5 +1,12 @@
 @if(showPrevArrow){
-<button mat-mini-fab tabindex="-1" aria-hidden="true" aria-label="next" class="docs-carousel-nav docs-carousel-nav-prev" (click)="previous();">
+<button
+    mat-mini-fab
+    tabindex="-1"
+    aria-hidden="true"
+    aria-label="next"
+    class="docs-carousel-nav docs-carousel-nav-prev"
+    (click)="previous()"
+>
     <mat-icon>navigate_before</mat-icon>
 </button>
 }
@@ -10,9 +17,15 @@
     </div>
 </div>
 
-
 @if(showNextArrow) {
-<button mat-mini-fab tabindex="-1" aria-hidden="true" aria-label="next" class="docs-carousel-nav docs-carousel-nav-next" (click)="next();">
+<button
+    mat-mini-fab
+    tabindex="-1"
+    aria-hidden="true"
+    aria-label="next"
+    class="docs-carousel-nav docs-carousel-nav-next"
+    (click)="next()"
+>
     <mat-icon>navigate_next</mat-icon>
 </button>
 }

projects/layout/src/modules/navbar/navbar.component.scss

@@ -9,7 +9,7 @@
     box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 
     nav.doc-navbar-header {
-        height: 40px;
+        height: 56px;
         display: flex;
         flex-wrap: wrap;
         align-items: center;

src/app/tank/components/welcome/welcome.component.scss

@@ -31,6 +31,9 @@
 
     .docs-header-headline {
         color: #ffffff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
         h1 {
             font-size: 56px;

src/modules/home/home.component.scss

@@ -30,6 +30,7 @@
         top: -60px;
 
         &::before {
+            box-sizing: content-box;
             content: "";
             position: absolute;
             width: 100px;
@@ -44,6 +45,7 @@
         }
 
         &::after {
+            box-sizing: content-box;
             content: "";
             position: absolute;
             width: 140px;

src/styles.scss

@@ -1,10 +1,28 @@
+// 动画样式
 @import "~animate.css/animate.min.css";
+// 代码高亮样式
 @import "~highlight.js/styles/github-dark.css";
 
+/* the props */
+@import "open-props/open-props.min.css";
+
+/* optional imports that use the props */
+@import "open-props/normalize.min.css";
+@import "open-props/buttons.min.css";
+
+/* individual imports */
+@import "open-props/indigo.min.css";
+@import "open-props/easings.min.css";
+@import "open-props/animations.min.css";
+@import "open-props/sizes.min.css";
+@import "open-props/gradients.min.css";
+/* see PropPacks for the full list */
+
 html,
 body {
     height: 100%;
     --mdc-text-button-label-text-color: #ffffff;
+    --size-0: 0;
 }
 body {
     margin: 0;
@@ -31,3 +49,9 @@ a.docs-link {
 .docs-homepage-promo a {
     text-decoration: none;
 }
+:where(.btn,button,input:is([type=button],[type=submit],[type=reset])), :where(input[type=file])::-webkit-file-upload-button, :where(input[type=file])::file-selector-button {
+    gap: var(--size-0);
+}
+:where(h2) {
+    max-inline-size: var(--size-header-3);
+}

yarn.lock

@@ -9552,6 +9552,11 @@ only@~0.0.2:
   resolved "https://registry.npmmirror.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
   integrity sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==
 
+open-props@^1.7.10:
+  version "1.7.10"
+  resolved "https://registry.npmmirror.com/open-props/-/open-props-1.7.10.tgz#32eca44c5ad61a41fa238043294818e2a41be66c"
+  integrity sha512-zZPJlr39YbHPou7mQ9GUKz1jiYjWzyZf/0pkPZq4MrtwgZ6FSCnf7hLkvFRGq+RZZ327vGSW3HPc7QMH4FUAZg==
+
 open@10.1.0, open@^10.0.3:
   version "10.1.0"
   resolved "https://registry.npmmirror.com/open/-/open-10.1.0.tgz#a7795e6e5d519abe4286d9937bb24b51122598e1"