add view transtions from astro

yupanquidev · Sep 6, 2023 · 56623b3 · 56623b3
1 parent 20f3fa2
commit 56623b3
Showing 1 changed file with 138 additions and 131 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions";
 import Footer from "../components/footer/Footer.astro";
 import Header from "../components/header/Header.astro";
 export interface Props {
@@ -8,7 +9,7 @@ export interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -17,141 +18,147 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title} - Humberto Yupanqui Apaza</title>
-    <meta name="view-transition" content="same-origin" />
+    <ViewTransitions />
     <script src="/src/utils/darkMode.js"></script>
   </head>
   <body class="bg-zinc-100 dark:bg-zinc-950 w-full h-full flex flex-col">
     <Header />
     <slot />
     <Footer />
+    <style is:global>
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-Light.woff2") format("woff2"),
+          url("/public/fonts/Aileron-Light.woff") format("woff"),
+          url("/public/fonts/Aileron-Light.otf") format("opentype");
+        font-weight: 300;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-Regular.woff2") format("woff2"),
+          url("/public/fonts/Aileron-Regular.woff") format("woff"),
+          url("/public/fonts/Aileron-Regular.otf") format("opentype");
+        font-weight: 400;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-SemiBold.woff2") format("woff2"),
+          url("/public/fonts/Aileron-SemiBold.woff") format("woff"),
+          url("/public/fonts/Aileron-SemiBold.otf") format("opentype");
+        font-weight: 600;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-Bold.woff2") format("woff2"),
+          url("/public/fonts/Aileron-Bold.woff") format("woff"),
+          url("/public/fonts/Aileron-Bold.otf") format("opentype");
+        font-display: swap;
+        font-weight: 700;
+      }
+
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-Black.woff2") format("woff2"),
+          url("/public/fonts/Aileron-Black.woff") format("woff"),
+          url("/public/fonts/Aileron-Black.otf") format("opentype");
+        font-weight: 800;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: "Aileron";
+        src:
+          url("/public/fonts/Aileron-Heavy.woff2") format("woff2"),
+          url("/public/fonts/Aileron-Heavy.woff") format("woff"),
+          url("/public/fonts/Aileron-Heavy.otf") format("opentype");
+        font-weight: 900;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: "Cunia";
+        src:
+          url("/public/fonts/Cunia-Bold.woff2") format("woff2"),
+          url("/public/fonts/Cunia-Bold.woff") format("woff"),
+          url("/public/fonts/Cunia.otf") format("opentype");
+        font-weight: 900;
+        font-display: swap;
+      }
+
+      body {
+        font-family: "Aileron", sans-serif;
+      }
+
+      h1,
+      h2,
+      h3 {
+        font-family: "Cunia", sans-serif;
+      }
+
+      body::-webkit-scrollbar,
+      textarea::-webkit-scrollbar {
+        width: 0.7rem;
+      }
+
+      body::-webkit-scrollbar-thumb,
+      textarea::-webkit-scrollbar-thumb {
+        background-color: #90f;
+        border-radius: 0.1rem;
+      }
+
+      body::-webkit-scrollbar-thumb:hover,
+      textarea::-webkit-scrollbar-thumb:hover {
+        background-color: #96f;
+      }
+
+      img,
+      svg {
+        view-timeline-name: --image;
+        view-timeline-axis: block;
+
+        animation-timeline: --image;
+        animation-name: show;
+
+        animation-range: entry 0% cover 50%;
+        animation-fill-mode: both;
+      }
+
+      @keyframes show {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+
+      .download-cv > svg path {
+        transition: all 0.5s;
+      }
+
+      .download-cv:hover > svg path:nth-child(2) {
+        d: path("M4 18v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2");
+      }
+
+      .download-cv:hover > svg path:nth-child(3) {
+        d: path("M7 9l5 5l5 -5");
+      }
+
+      .download-cv:hover > svg path:last-child {
+        d: path("M12 2l0 12");
+      }
+    </style>
   </body>
 </html>
-
-<style is:global>
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-Light.woff2") format("woff2"),
-      url("/public/fonts/Aileron-Light.woff") format("woff"),
-      url("/public/fonts/Aileron-Light.otf") format("opentype");
-    font-weight: 300;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-Regular.woff2") format("woff2"),
-      url("/public/fonts/Aileron-Regular.woff") format("woff"),
-      url("/public/fonts/Aileron-Regular.otf") format("opentype");
-    font-weight: 400;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-SemiBold.woff2") format("woff2"),
-      url("/public/fonts/Aileron-SemiBold.woff") format("woff"),
-      url("/public/fonts/Aileron-SemiBold.otf") format("opentype");
-    font-weight: 600;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-Bold.woff2") format("woff2"),
-      url("/public/fonts/Aileron-Bold.woff") format("woff"),
-      url("/public/fonts/Aileron-Bold.otf") format("opentype");
-    font-display: swap;
-    font-weight: 700;
-  }
-
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-Black.woff2") format("woff2"),
-      url("/public/fonts/Aileron-Black.woff") format("woff"),
-      url("/public/fonts/Aileron-Black.otf") format("opentype");
-    font-weight: 800;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Aileron";
-    src: url("/public/fonts/Aileron-Heavy.woff2") format("woff2"),
-      url("/public/fonts/Aileron-Heavy.woff") format("woff"),
-      url("/public/fonts/Aileron-Heavy.otf") format("opentype");
-    font-weight: 900;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Cunia";
-    src: url("/public/fonts/Cunia-Bold.woff2") format("woff2"),
-      url("/public/fonts/Cunia-Bold.woff") format("woff"),
-      url("/public/fonts/Cunia.otf") format("opentype");
-    font-weight: 900;
-    font-display: swap;
-  }
-
-  body {
-    font-family: "Aileron", sans-serif;
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-family: "Cunia", sans-serif;
-  }
-
-  body::-webkit-scrollbar,
-  textarea::-webkit-scrollbar {
-    width: 0.7rem;
-  }
-
-  body::-webkit-scrollbar-thumb,
-  textarea::-webkit-scrollbar-thumb {
-    background-color: #90f;
-    border-radius: 0.1rem;
-  }
-
-  body::-webkit-scrollbar-thumb:hover,
-  textarea::-webkit-scrollbar-thumb:hover {
-    background-color: #96f;
-  }
-
-  img,
-  svg {
-    view-timeline-name: --image;
-    view-timeline-axis: block;
-
-    animation-timeline: --image;
-    animation-name: show;
-
-    animation-range: entry 0% cover 50%;
-    animation-fill-mode: both;
-  }
-
-  @keyframes show {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  .download-cv > svg path {
-    transition: all 0.5s;
-  }
-
-  .download-cv:hover > svg path:nth-child(2) {
-    d: path("M4 18v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2");
-  }
-
-  .download-cv:hover > svg path:nth-child(3) {
-    d: path("M7 9l5 5l5 -5");
-  }
-
-  .download-cv:hover > svg path:last-child {
-    d: path("M12 2l0 12");
-  }
-</style>