more more stuff into shared site-kit

7 years ago · f3375a9a19
parent 3c64e9d668
commit f3375a9a19
6 changed files with 185 additions and 171 deletions
--- a/site/src/routes/_components/Example.svelte
+++ b/site/src/routes/_components/Example.svelte
@ -0,0 +1,52 @@
 <script>
 	import { Section } from '@sveltejs/site-kit';
 	import IntersectionObserver from '../../components/IntersectionObserver.svelte';
 	import ReplWidget from '../../components/Repl/ReplWidget.svelte';
 	export let id;
 </script>
 <style>
 	.example {
 		width: 100%;
 	}
 	.example :global(a) {
 		color: inherit;
 	}
 	.example > :global(p) {
 		margin: 4.4rem 2.4rem 2.4rem 0;
 	}
 	.repl-container {
 		width: 100%;
 		height: 420px;
 		border-radius: var(--border-r);
 		overflow: hidden;
 	}
 	@media (min-width: 920px) {
 		.example {
 			display: grid;
 			grid-template-columns: 1fr 3fr;
 			grid-gap: 0.5em;
 			align-items: start;
 		}
 	}
 </style>
 <Section>
 	<div class="example">
 		<slot></slot>
 		<div class="repl-container">
 			<IntersectionObserver once let:intersecting top={400}>
 				{#if intersecting}
 					<!-- <Lazy this={loadReplWidget} example={id}/> -->
 					<ReplWidget example={id}/>
 				{/if}
 			</IntersectionObserver>
 		</div>
 	</div>
 </Section>
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@ -1,8 +1,8 @@
 <script>
 	import { page, preloading } from '@sapper/app';
-	import { Icons } from '@sveltejs/site-kit';
+	import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
-	import Nav from '../components/TopNav.svelte';
+	// import Nav from '../components/TopNav.svelte';
 	export let segment;
 </script>
@ -14,7 +14,23 @@
 {/if}
 {#if $page.path !== '/repl/embed'}
-	<Nav {segment}/>
+	<Nav {segment} {page} logo="svelte-logo-horizontal.svg">
 		<NavItem segment="tutorial">Tutorial</NavItem>
 		<NavItem segment="docs">API</NavItem>
 		<NavItem segment="examples">Examples</NavItem>
 		<NavItem segment="repl">REPL</NavItem>
 		<NavItem segment="blog">Blog</NavItem>
 		<NavItem external="https://sapper.svelte.technology">Sapper</NavItem>
 		<NavItem external="https://discord.gg/yy75DKs" title="Discord Chat">
 			<Icon name="message-square"/>
 		</NavItem>
 		<NavItem external="https://github.com/sveltejs/svelte" title="GitHub Repo">
 			<Icon name="github"/>
 		</NavItem>
 	</Nav>
 {/if}
 <main>
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@ -1,13 +1,11 @@
 <script>
-	import Blurb from './_components/Blurb.svelte';
+	import { Blurb, Hero, Section } from '@sveltejs/site-kit';
 	// import Blurb from './_components/Blurb.svelte';
 	import Example from './_components/Example.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte';
 	import IntersectionObserver from '../components/IntersectionObserver.svelte';
 	// import Lazy from '../components/Lazy.svelte';
 	import ReplWidget from '../components/Repl/ReplWidget.svelte';
 	import contributors from './_contributors.js';
 	let sy = 0;
 	// TODO this causes a Sapper CSS bug...
 	// function loadReplWidget() {
 	// 	console.log('lazy loading');
@ -16,77 +14,18 @@
 </script>
 <style>
 	.container {
 		position: relative;
 		margin: 10rem auto;
 		padding: 0 var(--side-nav);
 		max-width: 120rem;
 	}
 	.container h3 { color: var(--text) }
 	.container ul { list-style: none }
 	/* max line-length ~60 chars */
 	li:not(.box) > p {
 		max-width: var(--linemax)
 	}
 	/* darken text for accesibility */
 	/* TODO does this belong elsewhere? */
 	:global(.back-light) {
 		--text: hsl(36, 3%, 44%);
 	}
 	.hero {
 		margin: 10rem auto;
 	}
 	.hero h3, .logotype {
 		position: relative;
 		left: 1.6rem;
 	}
 	.hero h3 {
 		font-size: 2rem;
 	}
 	.logotype {
 		height: 4rem;
 	}
 	.logo {
 		position: absolute;
 		top: -4rem;
 		right: 0rem;
 		width: 52rem;
 		will-change: transform;
 		display: none;
 	}
 	.examples {
 		background: var(--second);
 		color: white;
 		overflow: hidden;
 	}
 	.example {
 		width: 100%;
 	}
 	.example a {
 		color: inherit;
 	}
 	.example > p {
 		margin: 4.4rem 2.4rem 2.4rem 0;
 	}
 	.repl-container {
 		width: 100%;
 		height: 420px;
 		border-radius: var(--border-r);
 		overflow: hidden;
 	}
 	.contributor {
 		width: 2.4em;
 		height: 2.4em;
@ -98,45 +37,6 @@
 		margin: 0 0.5em 0.5em 0;
 		border: 2px solid var(--second);
 	}
 	@media (min-width: 640px) {
 		.logotype {
 			height: 6rem;
 		}
 		.hero h3 {
 			font-size: var(--h3);
 		}
 	}
 	@media (min-width: 800px) {
 		.logo {
 			display: block;
 		}
 		.hero {
 			margin: 15rem auto;
 		}
 		.hero h3, .logotype {
 			left: 3rem;
 		}
 	}
 	@media (min-width: 920px) {
 		.example {
 			display: grid;
 			grid-template-columns: 1fr 3fr;
 			grid-gap: 0.5em;
 			align-items: start;
 		}
 	}
 	@media (min-width: 1200px) {
 		.logo {
 			right: calc(50vw - 60rem);
 		}
 	}
 </style>
 <svelte:head>
@ -147,78 +47,83 @@
 	<meta name="Description" content="Cybernetically enhanced web apps">
 </svelte:head>
-<svelte:window bind:scrollY={sy}/>
+<Hero
 	title="Svelte"
 	tagline="Cybernetically enhanced web apps"
 	outline="svelte-logo-outline.svg"
 	logotype="svelte-logotype.svg"
 />
-<img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .2}px)">
+<Blurb>
 	<a href="blog/write-less-code" slot="one">
 		<h2>Write less code</h2>
 		<p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
-<section class="hero container">
+		<span class="learn-more">learn more</span>
-	<img alt="Svelte logotype" class="logotype" src="svelte-logotype.svg">
+	</a>
 	<h3>Cybernetically enhanced web apps</h3>
 </section>
-<Blurb/>
+	<a href="blog/virtual-dom-is-pure-overhead" slot="two">
 		<h2>No virtual DOM</h2>
 		<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
-<div class="examples">
+		<span class="learn-more">learn more</span>
-	<section class="container example">
+	</a>
 		<p>Svelte components are built on top of HTML. Just add data.</p>
-		<div class="repl-container">
+	<a href="blog/svelte-3-rethinking-reactivity" slot="three">
-			<IntersectionObserver once let:intersecting top={400}>
+		<h2>Truly reactive</h2>
-				{#if intersecting}
+		<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
 					<!-- <Lazy this={loadReplWidget} example="hello-world"/> -->
 					<ReplWidget example="hello-world"/>
 				{/if}
 			</IntersectionObserver>
 		</div>
 	</section>
-	<section class="container example">
+		<span class="learn-more">learn more</span>
-		<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a>.</p>
+	</a>
-		<div class="repl-container">
+	<div class="description" slot="what">
-			<IntersectionObserver once let:intersecting top={400}>
+		<p>Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
 				{#if intersecting}
 					<!-- <Lazy this={loadReplWidget} example="nested-components"/> -->
 					<ReplWidget example="nested-components"/>
 				{/if}
 			</IntersectionObserver>
 		</div>
 	</section>
-	<section class="container example">
+		<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
 		<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
-		<div class="repl-container">
+		<p><a href="blog/svelte-3-rethinking-reactivity">Read the introductory blog post</a> to learn more.</p>
 			<IntersectionObserver once let:intersecting top={400}>
 				{#if intersecting}
 					<!-- <Lazy this={loadReplWidget} example="reactive-assignments"/> -->
 					<ReplWidget example="reactive-assignments"/>
 				{/if}
 			</IntersectionObserver>
 	</div>
 	</section>
-	<section class="container example">
+	<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0" slot="how">
-		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
+		<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
 npx degit sveltejs/template my-svelte-project
 cd my-svelte-project
-		<div class="repl-container">
+npm install
-			<IntersectionObserver once let:intersecting top={400}>
+npm run dev & open http://localhost:5000
-				{#if intersecting}
+		</pre>
-					<!-- <Lazy this={loadReplWidget} example="svg-transitions"/> -->
+
-					<ReplWidget example="svg-transitions"/>
+		<p style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
-				{/if}
+
-			</IntersectionObserver>
+		<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
 	</div>
-	</section>
+</Blurb>
 <div class="examples">
 	<Example id="hello-world">
 		<p>Svelte components are built on top of HTML. Just add data.</p>
 	</Example>
 	<Example id="nested-components">
 		<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a>.</p>
 	</Example>
 	<Example id="reactive-assignments">
 		<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
 	</Example>
 	<Example id="svg-transitions">
 		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 	</Example>
 </div>
-<section class="container">
+<Section>
 	<h3>Who's using Svelte?</h3>
 	<WhosUsingSvelte/>
-</section>
+</Section>
-<section class="container">
+<Section>
 	<h3>Contributors</h3>
 	<p>Svelte is free and open source software, made possible by the work of dozens of volunteers. <a href="https://github.com/sveltejs/svelte">Join us!</a></p>
@ -230,4 +135,4 @@
 			href="https://github.com/{contributor}"
 		>{contributor}</a>
 	{/each}
-</section>
+</Section>
--- a/site/static/svelte-logo-mask.svg
+++ b/site/static/svelte-logo-mask.svg
@ -1,5 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-	<path fill="black" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+	 viewBox="0 0 98.2 118" style="enable-background:new 0 0 98.2 118;" xml:space="preserve">
 <path d="M91.9,15.6C81-0.1,59.3-4.7,43.7,5.3L16.2,22.8C8.7,27.5,3.5,35.2,2,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
 	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4L82,95.3c7.5-4.7,12.7-12.4,14.2-21.1
 	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.2,22.9,91.9,15.6 M41,103.9c-8.9,2.3-18.2-1.2-23.4-8.7
 	c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1
 	c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7l27.4-17.5c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6
 	c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L48,68.3c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7
 	c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.4-17.5c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7
 	c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1
 	c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.5,46.1c-1.4,0.9-2.3,2.2-2.6,3.8
 	c-0.3,1.6,0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
 	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.4,17.5C44.9,102.5,43,103.3,41,103.9"/>
 </svg>
--- a/site/static/svelte-logo-outline.svg
+++ b/site/static/svelte-logo-outline.svg
@ -1,5 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-	<path fill="none" stroke="#ff3e00" stroke-width=".25" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	<path fill="none" stroke="#ff3e00" stroke-width=".25" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+	 viewBox="0 0 98.4 118.3" style="enable-background:new 0 0 98.4 118.3;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;stroke:#FF3E00;stroke-width:0.25;}
 </style>
 <path class="st0" d="M92,15.7C81.1,0.1,59.5-4.6,43.8,5.4L16.3,22.9C8.8,27.6,3.6,35.3,2.1,44c-1.3,7.3-0.2,14.8,3.3,21.3
 	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
 	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.4,32.2,97.3,23.1,92,15.7"/>
 <path class="st0" d="M41.1,104c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
 	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7l27.4-17.5
 	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
 	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.4-17.5
 	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6L83,42.4l-1.4-1
 	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.6,46.2
 	C31.2,47,30.3,48.4,30,50c-0.3,1.6,0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7
 	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.4,17.5
 	C45,102.6,43.1,103.5,41.1,104"/>
 </svg>
--- a/site/static/svelte-logo.svg
+++ b/site/static/svelte-logo.svg
@ -1,5 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-	<path fill="#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	<path fill="white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+	 viewBox="0 0 98.1 118" style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FF3E00;}
 	.st1{fill:#FFFFFF;}
 </style>
 <path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
 	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
 	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"/>
 <path class="st1" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
 	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
 	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
 	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
 	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
 	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
 	c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
 	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"/>
 </svg>