hide download cv button

Author: literallysofia

src/assets/portrait-original.jpg

@@ -46,10 +46,7 @@ const sectionId = generateId(title);
 ---
 
 <section id={sectionId} class="target timeline" aria-labelledby={`${sectionId}-heading`}>
-  <div class="timeline-header">
-    <h2 id={`${sectionId}-heading`} class="heading">{title}</h2>
-    <slot name="action" />
-  </div>
+  <h2 id={`${sectionId}-heading`} class="heading">{title}</h2>
 
   <ol class="card-list" role="list">
     {jobs.map((job, index) => (

src/components/Timeline.astro

@@ -166,5 +166,4 @@ const showGate = isProtected && !!sitePassword && (!isDev || forceEnableGate);
   @import '../styles/theme-toggle.css';
   @import '../styles/404.css';
   @import '../styles/password-gate.css';
-  @import '../styles/download-cv.css';
 </style>

src/layouts/Layout.astro

@@ -9,7 +9,6 @@ import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 import Header from '../components/Header.astro';
 import Timeline from '../components/Timeline.astro';
-import DownloadCV from '../components/DownloadCV.astro';
 import Footer from '../components/Footer.astro';
 
 const experienceCollection = await getCollection('experience');
@@ -22,9 +21,7 @@ const experience = experienceCollection[0];
     <Timeline
       title={experience.data.title}
       jobs={experience.data.jobs}
-    >
-      <DownloadCV slot="action" />
-    </Timeline>
+    />
   </main>
   <Footer />
 </Layout>

src/pages/work.astro

@@ -47,11 +47,6 @@
   /* Animation */
   opacity: 0;
   scale: 0.9;
-  transition:
-    opacity var(--duration-fast) var(--timing-smooth),
-    scale var(--duration-fast) var(--timing-smooth),
-    overlay var(--duration-fast) var(--timing-smooth) allow-discrete,
-    display var(--duration-fast) var(--timing-smooth) allow-discrete;
 }
 
 .download-cv-dialog[open] {
@@ -73,12 +68,7 @@
 
 .download-cv-dialog::backdrop {
   background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
   opacity: 0;
-  transition:
-    opacity var(--duration-fast) var(--timing-smooth),
-    overlay var(--duration-fast) var(--timing-smooth) allow-discrete,
-    display var(--duration-fast) var(--timing-smooth) allow-discrete;
 }
 
 .download-cv-dialog[open]::backdrop {
@@ -91,6 +81,23 @@
   }
 }
 
+@supports (overlay: auto) {
+  .download-cv-dialog {
+    transition:
+      opacity var(--duration-fast) var(--timing-smooth),
+      scale var(--duration-fast) var(--timing-smooth),
+      overlay var(--duration-fast) var(--timing-smooth) allow-discrete,
+      display var(--duration-fast) var(--timing-smooth) allow-discrete;
+  }
+
+  .download-cv-dialog::backdrop {
+    transition:
+      opacity var(--duration-fast) var(--timing-smooth),
+      overlay var(--duration-fast) var(--timing-smooth) allow-discrete,
+      display var(--duration-fast) var(--timing-smooth) allow-discrete;
+  }
+}
+
 /* ================================================
    CLOSE BUTTON
    ================================================ */
@@ -135,7 +142,7 @@
 }
 
 .download-cv-dialog .password-gate-error.visible {
-  height: 1.4em;
+  height: 1.6em;
   margin-top: 0.5em;
 }