From bc9e038ab19130e9f825bfcab8270001dd7e3f17 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 18 Oct 2022 14:42:19 +0200
Subject: [PATCH] style: newTab icon; larger back link

---
 src/components/Back.astro |  5 +++--
 src/components/Card.astro | 11 ++++++++---
 src/pages/index.astro     |  2 ++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Back.astro b/src/components/Back.astro
index addc1ba..4a8281c 100644
--- a/src/components/Back.astro
+++ b/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>
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 33a0497..0453b66 100644
--- a/src/components/Card.astro
+++ b/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}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4cc901a..9b987ca 100644
--- a/src/pages/index.astro
+++ b/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. ❤️"