From 71a053662c9e6989a45a74a185a2a15c97d87784 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge@mailbox.tu-dresden.de>
Date: Mon, 14 Mar 2022 10:57:06 +0100
Subject: [PATCH] Links in new tab

---
 components/REPL/REPLHistory.tsx |  2 +-
 pages/index.tsx                 | 15 +++++++--------
 styles/Home.module.css          |  9 ++++++---
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/components/REPL/REPLHistory.tsx b/components/REPL/REPLHistory.tsx
index 2fc7c03..d7112e8 100644
--- a/components/REPL/REPLHistory.tsx
+++ b/components/REPL/REPLHistory.tsx
@@ -38,7 +38,7 @@ const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
             const linkHref = line.substring(idxSep+1, idxEnd);
 
             result.push(line.substring(0, idxStart));
-            result.push(<Link href={linkHref}><a className={styles.link}>{linkText}</a></Link>);
+            result.push(<Link href={linkHref}><a className={styles.link} target={linkHref.startsWith("https://c0ntroller.de") || linkHref.startsWith("/") ? "_self" : "_blank"}>{linkText}</a></Link>);
             
             line = line.substring(idxEnd+1);
             idxStart = line.indexOf("#{");
diff --git a/pages/index.tsx b/pages/index.tsx
index 2d70933..1b68b86 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,5 @@
 import type { NextPage } from "next";
 import Head from "next/head";
-import Link from "next/link";
 import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
 import { useRef, useState } from "react";
 import ProjectModal from "../components/ProjectModal";
@@ -29,24 +28,24 @@ const Home: NextPage = () => {
         <div className={styles.container}>
             <div className={styles.header}>
                 <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
-                <Link href="https://github.com/C0ntroller/c0ntroller.de"><a>Source</a></Link>
+                <a href="https://github.com/C0ntroller/c0ntroller.de" target="_blank">Source</a>
                 <span className={styles.divider}>|</span>
-                <Link href="https://github.com/C0ntroller/c0ntroller.de/issues/new"><a>Bug?</a></Link>
+                <a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank">Bug?</a>
                 <span className={styles.divider}>|</span>
-                <Link href="https://github.com/C0ntroller" passHref><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <a href="https://github.com/C0ntroller" target="_blank"><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></a>
                 <span className={styles.divider}>|</span>
-                <Link href="https://www.instagram.com/c0ntroller/" passHref><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <a href="https://www.instagram.com/c0ntroller/" target="_blank"><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></a>
                 <span className={styles.divider}>|</span>
-                <Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <a href="https://steamcommunity.com/id/c0ntroller/" target="_blank"><GameController color="var(--repl-color)" className={styles.iconLink} /></a>
                 <span className={styles.divider}>|</span>
-                <Link href="https://discordapp.com/users/224208617820127233" passHref>
+                <a href="https://discordapp.com/users/224208617820127233" target="_blank">
                     <span className={styles.tooltip} style={{ cursor: "pointer" }}>
                         <DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
                         <span className={styles.tooltiptext}>
                             C0ntroller_Z#3883
                         </span>
                     </span>
-                </Link><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
+                </a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
             </div>
             <REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/>
         </div>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index a09b40a..e83e428 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -3,7 +3,7 @@
     flex-direction: column;
     height: 100vh;
     margin: 0;
-    padding: 10px;
+    padding: 2px 10px 10px 10px;
 }
 
 .header {
@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    align-items: center;
 }
 
 .header * {
@@ -24,7 +25,7 @@
 .header a {
     color: var(--repl-color);
     text-decoration: underline;
-    font-size: 80%;
+    font-size: 0.9em;
 }
 
 .header a:hover {
@@ -34,7 +35,7 @@
 .header .divider {
     color: var(--repl-color);
     margin: 0 5px;
-    font-size: 80%;
+    font-size: 1.1em;
 }
 
 .header .spacer {
@@ -43,6 +44,8 @@
 
 .iconLink {
     cursor: pointer;
+    font-size: 1.6em;
+    padding-top: 0.3em;
 }
 
 .tooltip {