Merge pull request #217 from guardian/doml/header-bar-transitions

Add View Transitions
guardian · Apr 15, 2024 · 2c1f58b · 2c1f58b
2 parents 32fa1d5 + 71e4f42
commit 2c1f58b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 56 deletions.
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -42,13 +42,11 @@ const { path } = Astro.props;
       padding-bottom: 8px;
       text-decoration: none;
 
-      &.active {
+      &.active,
+      &:hover,
+      :focus {
         padding-top: 2px;
         border-top: 3px solid;
-      }
-
-      &:focus,
-      &:hover {
         color: gold;
       }
     }

diff --git a/src/layouts/page.astro b/src/layouts/page.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions";
 import Nav from "../components/Nav.astro";
 import Footer from "../components/Footer.astro";
 import Social from "../components/Social.astro";
@@ -28,6 +29,8 @@ const { body, heading } = font;
       href="https://assets.guim.co.uk/static/frontend/fonts/font-faces.css"
       rel="stylesheet"
     />
+
+    <ViewTransitions />
   </head>
 
   <body>
@@ -46,57 +49,56 @@ const { body, heading } = font;
     </div>
 
     <Bubbles client:load />
-  </body>
-</html>
+    <style lang="scss" is:global define:vars={{ body, heading }}>
+      body {
+        font-family: var(--body);
+        margin: 0 auto;
+        min-height: 100vh;
+        background-color: #111;
+        color: #ccc;
+        box-sizing: border-box;
+        width: 100vw;
+        max-width: 1300px;
+        position: relative;
+        overflow-x: hidden;
+        padding: 0.5rem;
+
+        @media (min-width: 740px) {
+          & {
+            padding: 1rem;
+          }
+        }
+      }
+
+      h1,
+      h2,
+      h3 {
+        font-family: var(--heading);
+      }
 
-<style lang="scss" is:global define:vars={{ body, heading }}>
-  body {
-    font-family: var(--body);
-    margin: 0 auto;
-    min-height: 100vh;
-    background-color: #111;
-    color: #ccc;
-    box-sizing: border-box;
-    width: 100vw;
-    max-width: 1300px;
-    position: relative;
-    overflow-x: hidden;
-    padding: 0.5rem;
-
-    @media (min-width: 740px) {
-      & {
+      header {
         padding: 1rem;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
       }
-    }
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-family: var(--heading);
-  }
-
-  header {
-    padding: 1rem;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .frame {
-    border: 1px solid #444;
-  }
-
-  main {
-    & > h1,
-    & > h2,
-    & > h3,
-    & > p {
-      padding: 0 1rem;
-    }
-
-    & > ul {
-      padding-left: 2rem;
-    }
-  }
-</style>
+
+      .frame {
+        border: 1px solid #444;
+      }
+
+      main {
+        & > h1,
+        & > h2,
+        & > h3,
+        & > p {
+          padding: 0 1rem;
+        }
+
+        & > ul {
+          padding-left: 2rem;
+        }
+      }
+    </style>
+  </body>
+</html>