feat: fade docs pages

etchteam · Oct 4, 2024 · eb3cd2a · eb3cd2a
1 parent b069892
commit eb3cd2a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/src/components/composition/d-fade.webc b/src/components/composition/d-fade.webc
@@ -0,0 +1,13 @@
+<style webc:scoped>
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  :host {
+    animation: fade 0.75s var(--diamond-transition-timing) forwards;
+    opacity: 0;
+  }
+</style>
+
+<slot></slot>
diff --git a/src/layouts/docs.webc b/src/layouts/docs.webc
@@ -19,25 +19,27 @@ layout: default.webc
     </d-sidebar-nav>
 
     <diamond-section padding="fluid">
-      <diamond-grid>
-        <diamond-grid-item grow shrink>
-          <d-title-group class="diamond-spacing-bottom-xl">
-            <p @text="$data.tags[1]"></p>
-            <h1 @text="$data.title"></h1>
-            <p @text="$data.description"></p>
-          </d-title-group>
-        </diamond-grid-item>
-        <diamond-grid-item
-          webc:if="$data.icon"
-          class="diamond-hidden-small-mobile diamond-visible-large-tablet"
-        >
-          <d-icon :icon="$data.icon" class="giant-icon text-color-blue"></d-icon>
-        </diamond-grid-item>
-      </diamond-grid>
-
-      <d-separator class="diamond-spacing-bottom-xl"></d-separator>
-
-      <div @raw="content"></div>
+      <d-fade>
+        <diamond-grid>
+          <diamond-grid-item grow shrink>
+            <d-title-group class="diamond-spacing-bottom-xl">
+              <p @text="$data.tags[1]"></p>
+              <h1 @text="$data.title"></h1>
+              <p @text="$data.description"></p>
+            </d-title-group>
+          </diamond-grid-item>
+          <diamond-grid-item
+            webc:if="$data.icon"
+            class="diamond-hidden-small-mobile diamond-visible-large-tablet"
+          >
+            <d-icon :icon="$data.icon" class="giant-icon text-color-blue"></d-icon>
+          </diamond-grid-item>
+        </diamond-grid>
+
+        <d-separator class="diamond-spacing-bottom-xl"></d-separator>
+
+        <div @raw="content"></div>
+      </d-fade>
     </diamond-section>
   </d-sidebar-layout>
 </diamond-wrap>