add (nonfunctional) download button

src/lib/components/nav-item.svelte

@@ -37,13 +37,9 @@
 
 <style lang="less">
   li {
-    @separator: 1px solid @color-dark;
+    .selectable();
 
-    font-weight: @font-w-semibold;
-    margin: 0;
-    padding: @padding-md;
-    text-align: center;
-    transition: background-color 0.2s;
+    @separator: 1px solid @color-dark;
 
     &.selected {
       background-color: darken(@color-light, 20%);

src/lib/components/preview.svelte

@@ -20,6 +20,7 @@
     <p>processing...</p>
   {:then result}
     <iframe title="résumé preview" srcdoc={result}></iframe>
+    <button>download</button>
   {:catch err}
     <p style:color="red">error: {err}!</p>
   {/await}
@@ -29,8 +30,30 @@
   main {
     .container();
 
+    display: flex;
+    flex-flow: column nowrap;
+    gap: @padding-lg-y;
     grid-area: preview;
 
+    button {
+      .selectable();
+
+      background-color: lighten(@color-dark, 10%);
+      border: 1px solid @color-dark;
+      border-radius: @border-r-xl;
+      color: @color-light;
+      font-weight: @font-w-semibold;
+      padding: @padding-md;
+
+      &:focus {
+        background-color: lighten(@color-dark, 20%);
+      }
+
+      &:hover {
+        background-color: lighten(@color-dark, 15%);
+      }
+    }
+
     iframe {
       .container-content();
     }
@@ -42,5 +65,9 @@
         display: none;
       }
     }
+
+    @media screen and (min-width: @sizes[lg]) {
+      gap: @padding-xl-y;
+    }
   }
 </style>

src/styles.less

@@ -60,3 +60,12 @@
     font-size: unset;
   }
 }
+
+// shared interactivity mixins
+.selectable() {
+  font-weight: @font-w-semibold;
+  margin: 0;
+  padding: @padding-md;
+  text-align: center;
+  transition: background-color 0.2s;
+}