From 8a6fd18e20f056f431b99bea91374e5e90a7a48e Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 28 Feb 2022 08:16:15 -0800
Subject: [PATCH] port banner from svelte.dev

---
 .../kit.svelte.dev/src/routes/__layout.svelte | 47 +++++++++++++++++--
 sites/kit.svelte.dev/static/stopwar.svg       |  1 +
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 sites/kit.svelte.dev/static/stopwar.svg

diff --git a/sites/kit.svelte.dev/src/routes/__layout.svelte b/sites/kit.svelte.dev/src/routes/__layout.svelte
index 4efd7d1d4b1d..588358043b19 100644
--- a/sites/kit.svelte.dev/src/routes/__layout.svelte
+++ b/sites/kit.svelte.dev/src/routes/__layout.svelte
@@ -5,6 +5,10 @@
 	import { Icon, Icons, Nav, NavItem, PreloadingIndicator, SkipLink } from '@sveltejs/site-kit';
 	import Search from '$lib/search/Search.svelte';
 	import SearchBox from '$lib/search/SearchBox.svelte';
+
+	let h = 0;
+	let w = 0;
+	$: browser && document.documentElement.style.setProperty('--ukr-footer-height', `${h}px`);
 </script>
 
 <Icons />
@@ -14,7 +18,7 @@
 {/if}
 
 <SkipLink href="#main" />
-<Nav {page} logo="/images/svelte-kit-horizontal.svg">
+<Nav {page} logo="/stopwar.svg">
 	<svelte:fragment slot="nav-center">
 		{#if browser}
 			<!-- the <Nav> component renders this content inside a <ul>, so
@@ -43,8 +47,19 @@
 		</NavItem>
 	</svelte:fragment>
 </Nav>
-
-<main id="main">
+	<a target="_blank" rel="noopener noreferrer" href="https://www.stopputin.net/"
+		><div class="ukr" bind:clientHeight={h} bind:clientWidth={w}>
+			{#if w < 830}
+				<strong>We stand with Ukraine.</strong>
+				Donate →
+			{:else}
+				<strong>We stand with Ukraine.</strong>
+				Petition your leaders. Show your support.
+			{/if}
+		</div></a
+	>
+
+<main id="main" style="padding-bottom: {h}px;">
 	<slot />
 
 	{#if browser}
@@ -57,6 +72,7 @@
 		position: relative;
 		margin: 0 auto;
 		padding-top: var(--nav-h);
+		overflow: scroll;
 		overflow-x: hidden;
 	}
 
@@ -119,4 +135,29 @@
 	:global(body) {
 		font-size: 1.6rem !important;
 	}
+
+	.ukr {
+		background-color: #0066cc;
+		color: white;
+		position: fixed;
+		bottom: 0;
+		width: 100vw;
+		text-align: center;
+		padding: 0.75em;
+		z-index: 999;
+	}
+	:global(.examples-container, .repl-outer, .tutorial-outer) {
+		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
+	}
+	:global(.toggle) {
+		bottom: var(--ukr-footer-height) !important;
+	}
+	@media (max-width: 830px) {
+		:global(aside) {
+			z-index: 9999 !important;
+		}
+	}
+	.ukr strong {
+		color: #ffcc00;
+	}
 </style>
diff --git a/sites/kit.svelte.dev/static/stopwar.svg b/sites/kit.svelte.dev/static/stopwar.svg
new file mode 100644
index 000000000000..3785fa311afd
--- /dev/null
+++ b/sites/kit.svelte.dev/static/stopwar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 358.464 235.952"><defs><style>.a{fill:#ff3e00;}.b{fill:#fff;}.c{fill:#1273ff;}.d{fill:#ffd815;}</style><symbol id="a" viewBox="0 0 93.224 112"><path class="a" d="M87.269,14.819C76.869-.066,56.328-4.478,41.477,4.984L15.4,21.608A29.921,29.921,0,0,0,1.876,41.651,31.514,31.514,0,0,0,4.984,61.882,30.006,30.006,0,0,0,.507,73.065,31.892,31.892,0,0,0,5.955,97.181c10.4,14.887,30.942,19.3,45.791,9.835L77.829,90.392A29.915,29.915,0,0,0,91.347,70.349a31.522,31.522,0,0,0-3.1-20.232,30.019,30.019,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/><path class="b" d="M38.929,98.582a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968A5.844,5.844,0,0,0,28,83.122a6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L62.382,68.281a5.43,5.43,0,0,0,2.451-3.631,5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.755,5.755,0,0,0-1.6.7l-9.953,6.345a19.06,19.06,0,0,1-5.3,2.326,20.719,20.719,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,22.915,32.37L49,15.747a19.03,19.03,0,0,1,5.3-2.329,20.72,20.72,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5,18.453,18.453,0,0,1-.624,2.435l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.241,6.241,0,0,0-6.7-2.485,5.748,5.748,0,0,0-1.6.7L30.842,43.719a5.421,5.421,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328,20.718,20.718,0,0,1,22.236,8.243,19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L44.229,96.253a19.017,19.017,0,0,1-5.3,2.329"/></symbol></defs><path class="c" d="M324.237,118.694c-59.509-36.573-119.018,36.573-178.526,0V61.45c59.508,36.573,119.017-36.573,178.526,0Z"/><path class="d" d="M324.237,175.74c-59.509-36.573-119.018,36.573-178.526,0V118.5c59.508,36.573,119.017-36.573,178.526,0Z"/><use width="93.224" height="112" transform="translate(34.228 29.267) scale(1.584)" xlink:href="#a"/></svg>