style: newTab icon; larger back link

src/components/Back.astro

@@ -5,14 +5,15 @@ export interface Props {
 const { url } = Astro.props;
 ---
 
-<nav><a href={url}>&larr; Back</a></nav>
+<nav><a class="back-link" href={url}>&larr; Back</a></nav>
 
 <style>
   nav {
     margin-bottom: -1rem;
   }
 
-  nav a {
+  nav a.back-link {
+    font-size: var(--font-size-lg);
     text-decoration: none;
   }
 </style>

src/components/Card.astro

@@ -3,16 +3,21 @@ export interface Props {
   title: string;
   body: string;
   href: string;
+  newTab?: boolean;
 }
 
-const { href, title, body } = Astro.props;
+const { href, title, body, newTab = false } = Astro.props;
 ---
 
 <li class="link-card">
-  <a href={href}>
+  <a href={href} target={newTab ? '_blank' : null}>
     <h2>
       {title}
-      <span>&rarr;</span>
+      {
+        newTab
+      ? (<span>&nearr;</span>)
+      : (<span>&rarr; </span>)
+      }
     </h2>
     <p>
       {body}

src/pages/index.astro

@@ -25,11 +25,13 @@ import Footer from "../components/Footer.astro";
     <section class="cards-section">
       <ul role="list" class="cards-section__grid">
         <Card
+          newTab={true}
           href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
           title="CV / Resume"
           body="Download and peruse my skills and experience."
         />
         <Card
+          newTab={true}
           href="https://github.com/ayoayco"
           title="Github"
           body="See my public projects over at Github. ❤️"