Fix contact form, add print styles

darbymanning · May 30, 2024 · ed47648 · ed47648
1 parent a4c634a
commit ed47648
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 16 deletions.
diff --git a/src/app.css b/src/app.css
@@ -59,6 +59,28 @@
       scale: 1;
     }
   }
+
+  @media print {
+    @page {
+      size: 210mm 297mm;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    :root {
+      font-size: 9pt;
+    }
+
+    [data-scroll] {
+      transform: none !important;
+    }
+
+    [data-scroll-css-progress]:not([class*="print:\!opacity-"]) {
+      opacity: 100% !important;
+    }
+  }
 }
 
 @layer components {
@@ -80,7 +102,7 @@
 
   .heading-1,
   .prose h1 {
-    @apply text-4xl md:text-6xl font-mono leading-snug;
+    @apply text-4xl md:text-6xl font-mono leading-snug md:leading-snug print:text-5xl print:leading-snug;
   }
 
   .heading-2,

diff --git a/src/components/contact.svelte b/src/components/contact.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { enhance } from "$app/forms"
+  import { applyAction, enhance } from "$app/forms"
   import { page } from "$app/stores"
   import { slide } from "svelte/transition"
 
@@ -8,6 +8,7 @@
 
 {#snippet input({ label, type = "text" })}
   {@const id = label.toLowerCase()}
+  <!-- eslint-disable-next-line svelte/valid-compile -->
   {@const value = $page.form?.[id] || ""}
 
   <label for={id} class="relative">
@@ -21,7 +22,7 @@
   {/if}
 {/snippet}
 
-<section class="p-10" id="contact">
+<section class="p-10 grid gap-2 print:hidden" id="contact">
   <h1 class="heading-1" data-scroll data-scroll-speed="0.12">Contact</h1>
   {#if $page.form?.sent}
     <p transition:slide data-scroll data-scroll-speed="0.12">Thank you for your message.</p>
@@ -41,9 +42,10 @@
         use:enhance={() => {
           submitting = true
 
-          return async ({ update }) => {
+          return async ({ result }) => {
             submitting = false
-            update()
+
+            await applyAction(result)
           }
         }}
       >

diff --git a/src/components/projects.svelte b/src/components/projects.svelte
@@ -19,7 +19,7 @@
   </a>
 {/snippet}
 
-<section class="p-10 grid gap-20 relative" id="projects">
+<section class="print:hidden p-10 grid gap-20 relative" id="projects">
   <h1
     data-scroll
     data-scroll-speed="0.01"

diff --git a/src/components/resume.svelte b/src/components/resume.svelte
@@ -32,11 +32,14 @@
   {/if}
 {/snippet}
 
-<section class="grid md:grid-cols-[2fr_1fr] grid-rows-[auto_1fr]" id="resume">
+<section
+  class="grid print:grid-cols-[2fr_1fr] md:grid-cols-[2fr_1fr] grid-rows-[auto_1fr]"
+  id="resume"
+>
   <header
     data-scroll
     data-scroll-speed="0.2"
-    class="grid gap-4 font-mono p-10 h-[50vh] max-h-[600px] content-end col-span-full"
+    class="grid gap-4 font-mono p-10 print:h-[20vh] h-[50vh] max-h-[600px] content-end col-span-full"
   >
     <h1
       data-scroll
@@ -54,10 +57,9 @@
     </span>
     <ul
       data-scroll
-      data-scroll-css-progress
       data-scroll-speed="0.1"
       data-scroll-offset="0,20%"
-      class="flex items-center space-x-4 opacity-[calc(1_-_var(--progress))]"
+      class="print:hidden flex items-center space-x-4"
     >
       {#each links as link, index}
         {@const delay = 600 + index * 50}
@@ -125,14 +127,14 @@
   </aside>
 
   <figure
-    class="absolute pointer-events-none -z-10 right-0 -translate-y-16 animate-[fade-in_1s_600ms_ease-out_forwards] opacity-0"
+    class="absolute pointer-events-none -z-10 right-0 -translate-y-16 animate-[fade-in_1s_600ms_ease-out_forwards] opacity-0 print:translate-x-[10%] print:-translate-y-[20%]"
   >
     <img
       fetchpriority="high"
       data-scroll
       data-scroll-speed="0.05"
       data-scroll-css-progress
-      class="rounded-full size-[80vw] max-h-[700px] max-w-[700px] opacity-[calc(0.5_-_var(--progress))]"
+      class="print:!opacity-30 rounded-full size-[80vw] max-h-[700px] max-w-[700px] opacity-[calc(0.5_-_var(--progress))] print:size-[65vw]"
       src="me.jpg"
       alt="A truly beautiful man"
     />

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -40,7 +40,7 @@
 </svelte:head>
 
 <nav
-  class="border-b gap-4 border-gray-400/15 sticky top-0 bg-black/50 backdrop-blur-xl z-10 min-h-24 items-center flex"
+  class="print:hidden border-b gap-4 border-gray-400/15 sticky top-0 bg-black/50 backdrop-blur-xl z-10 min-h-24 items-center flex"
 >
   <div
     class="p-10 py-6 max-w-7xl mx-auto w-full flex justify-between flex-wrap items-center gap-y-4"
@@ -74,9 +74,9 @@
 
 <main class="max-w-7xl mx-auto relative grid gap-10 md:gap-40">
   {@render children()}
-  <Seperator />
+  <Seperator class="print:hidden" />
   <Contact />
-  <footer class="p-10 text-center grid gap-10">
+  <footer class="print:hidden p-10 text-center grid gap-10">
     <Seperator />
     <span class="text-gray-500">
       <figure class="text-4xl">👋</figure>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <Resume {...data} />
-<Seperator />
+<Seperator class="print:hidden" />
 <Projects {...data} />