add chevrons

Felderburg · Jan 21, 2022 · d8ff3e5 · d8ff3e5
1 parent 4cc58c9
commit d8ff3e5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="Svelte demo app" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="/chevron-icon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>

diff --git a/src/lib/assets/starfleet-chevron-science-grey.png b/src/lib/assets/starfleet-chevron-science-grey.png
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -1,11 +1,15 @@
 <script>
   import '../app.css';
   import Banner from '$lib/banner/Banner.svelte';
+  import Chevron from '$lib/assets/starfleet-chevron-science-grey.png';
 </script>
 
 <Banner />
 <div>
-  <h1>Visual Glossary Educational Repository</h1>
+  <h1>
+    <span>Visual Glossary Educational Repository</span>
+    <img src={Chevron} alt='Starfleet science chevron' />
+  </h1>
   <slot />
 </div>
 
@@ -17,10 +21,21 @@
     height: 100%;
   }
   h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     text-align: center;
     text-transform: uppercase;
     font-size: 1.5rem;
     color: white;
     margin: 0 0 var(--gutter);
+    position: relative;
+    padding-right: 0.5rem;
+  }
+
+  img {
+    height: 2rem;
+    width: 1.25rem;
+    margin-left: 0.5rem;
   }
 </style>
diff --git a/static/chevron-icon.png b/static/chevron-icon.png