Add Ukraine flag in support of Ukraine and its people (#167)

mstrow · Feb 27, 2022 · d189785 · d189785
1 parent f4716b0
commit d189785
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/layout/Navbar/Navbar.scss b/src/layout/Navbar/Navbar.scss
@@ -14,7 +14,6 @@
 	block-size: 58px;
 	padding: 12px 18px;
 	background-color: var(--fds-solid-background-base);
-	overflow: hidden;
 	user-select: none;
 }
 
@@ -78,6 +77,17 @@
 	}
 }
 
+.support-ukraine{
+	display:flex;
+	width: 30px;
+	height: 20px;
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDgwMCI+DQo8cGF0aCBmaWxsPSIjM2E3NWM0IiBkPSJtMCwwaDEyMDB2ODAwaC0xMjAweiIvPg0KPHBhdGggZmlsbD0iI2Y5ZGQxNiIgZD0ibTAsNDAwaDEyMDB2NDAwaC0xMjAweiIvPg0KPC9zdmc+DQo=);
+	background-color: initial;
+	border-radius: 4px;
+	margin: 7px 5px;
+	box-sizing: border-box;
+}
+
 .buttons {
 	z-index: 1;
 	display: flex;

diff --git a/src/layout/Navbar/Navbar.svelte b/src/layout/Navbar/Navbar.svelte
@@ -3,7 +3,7 @@
 	import type { NavbarItem } from "$data/links";
 
 	import { externalLink, TreeView } from "$lib";
-	import { ListItem } from "fluent-svelte";
+	import { ListItem, Tooltip } from "fluent-svelte";
 	import Navigation from "@fluentui/svg-icons/icons/navigation_24_regular.svg?raw";
 
 	export let items: NavbarItem[] = [];
@@ -88,6 +88,9 @@
 		{/if}
 	</nav>
 	<div class="buttons">
+		<Tooltip text="#supportukraine" placement="bottom" delay={200} offset={0}>
+			<span class="support-ukraine" aria-label="Ukraine flag in support of Ukraine and its people, #supportukraine"></span>
+		</Tooltip>
 		{#if innerWidth > 648}
 			{#each buttons as { icon, href, label }}
 				<a