added favicon, mobile optimizations, google verification

adammehaney · adammehaney · commit 89f66fac8473 · 2024-04-15T04:01:18.000-06:00
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -1,11 +1,17 @@
 ---
 import GithubLogo from '/src/images/github-mark-white.svg'
+import Favicon from '/src/images/favicon.svg'
 ---
 
 <header>
-    <div>
-        <h1>Binary Search Tree</h1>
-        <h2>Visualizer</h2>
+    <div class="title">
+        <div>
+            <img src={Favicon.src} alt="Logo">
+        </div>
+        <div>
+            <h1>Binary Search Tree</h1>
+            <h2>Visualizer</h2>
+        </div>
     </div>
     <div>
         <a href="https://github.com/adammehaney/Binary-Search-Tree-Visualizer" target="_blank"><img src={GithubLogo.src} alt="Github Logo" width="30px" height="30px"></a>
@@ -19,4 +25,30 @@ import GithubLogo from '/src/images/github-mark-white.svg'
         justify-content: space-between;
         align-items: center;
     }
+    .title {
+        display: flex;
+        flex-direction: row;
+        align-items: end;
+        gap: 20px;
+    }
+    .title div img {
+        height: 4em;
+    }
+    @media screen and (max-width: 600px) {
+        .title {
+            flex-direction: column;
+            align-items: start;
+        }
+        header {
+            flex-direction: column;
+            align-items: start;
+            gap: 20px;
+        }
+        h1 {
+            font-size: 2rem;
+        }
+        h2 {
+            font-size: 1.5rem;
+        }
+    }
 </style>
diff --git a/src/images/favicon.svg b/src/images/favicon.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       style="fill:#fca311;fill-opacity:1;stroke:#fca311;stroke-width:1.04767;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
+       d="M 16,9.5931235 7.6186241,22.24766"
+       id="path6" />
+    <path
+       style="fill:#fca311;fill-opacity:1;stroke:#fca311;stroke-width:1.04767;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
+       d="M 16,9.5931235 24.381375,22.12395"
+       id="path6-1" />
+  </g>
+  <g
+     id="layer2">
+    <circle
+       style="fill:#fca311;fill-opacity:1;fill-rule:nonzero;stroke:#f8f5fd;stroke-width:8.69568;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1"
+       id="path1"
+       cy="6.5709543"
+       cx="16"
+       r="1.9332607" />
+    <circle
+       style="fill:#fca311;fill-opacity:1;fill-rule:nonzero;stroke:#f8f5fd;stroke-width:8.69568;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1"
+       id="circle5"
+       cx="24.381376"
+       cy="25.429047"
+       r="1.9332607" />
+    <circle
+       style="fill:#fca311;fill-opacity:1;fill-rule:nonzero;stroke:#f8f5fd;stroke-width:8.69568;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1"
+       id="circle6"
+       cx="7.6186237"
+       cy="25.429047"
+       r="1.9332607" />
+  </g>
+</svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import '@fontsource-variable/manrope';
+import Favicon from '/src/images/favicon.svg'
 
 interface Props {
 	title: string;
@@ -14,11 +15,12 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Easily visualize, randomly generate, add to, remove from a binary search tree. See preorder, inorder, and postorder lists of your binary search tree." />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg" href={Favicon.src} />
 		<meta name="generator" content={Astro.generator} />
 		<meta name="keywords" content="Binary Search Tree BST Balanced Set Search Insert Delete Adam Mehaney Predecessor Successor Inorder Data Structure Algorithm Visualization Online Learning Tutorial Open Source">
 		<title>{title}</title>
 		<script src="../typescript/BST.ts"></script>
+		<meta name="google-site-verification" content="XQkIf1w-ZpNZNAPfaG-X9BhPLxMQeYv-75eDrQ_dmGE" />
 	</head>
 	<body>
 		<slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -61,8 +61,8 @@ import { Icon } from 'astro-icon/components'
 
 <style>
 	main div {
-		display: flex;
-		flex-direction: column;
+		display: grid;
+		grid-template-columns: 6fr 6fr;
 		gap: 20px;
 	}
 	form div {
@@ -109,4 +109,10 @@ import { Icon } from 'astro-icon/components'
         background: linear-gradient(90deg, var(--primary), var(--secondary));
         cursor: pointer;
     }
+	@media screen and (max-width: 708px) {
+		main div {
+			display: flex;
+			flex-direction: column;
+		}
+	}
 </style>
