app.css « src - coinos-ui.git - coinos ui — legacy coinos.io web app (SvelteKit)

index : coinos-ui.git

coinos ui — legacy coinos.io web app (SvelteKit)

coinos

about summary refs log tree commit diff stats

path: root/src/app.css

blob: 3c760dad3da5df36f5fb4632bd44d4d9c219d56d (plain) (blame)

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: 'PublicSans';
	src: url('/fonts/Public_Sans/static/PublicSans-Regular.ttf') format('truetype');
}

html {
	font-family: PublicSans, sans-serif;
}

::selection {
	color: black;
	background: #eaf2ff;
}

:fullscreen {
	background-color: white;
}

ght .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */ .highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */ .highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */ .highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */ .highlight .bp { color: #038 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #369 } /* Name.Variable.Class */ .highlight .vg { color: #D70 } /* Name.Variable.Global */ .highlight .vi { color: #33B } /* Name.Variable.Instance */ .highlight .vm { color: #369 } /* Name.Variable.Magic */ .highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */

<script>
	import { goto } from '$app/navigation';
	import { scroll } from '$lib/utils';
	import { Icon, LocaleSelector } from '$comp';
	import { user } from '$lib/store';
  import { _ } from 'svelte-i18n';

	export let howItWorks;
	export let faq;
	export let about;

	let showMobileMenu = false;
	const mobileMenuButtonClick = (section) => {
		showMobileMenu = false;
		scroll(section);
	};
</script>

<header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90">
	<nav class="block xl:flex flex-wrap justify-between items-center">
		<a href="/" class="hidden md:block">
			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
		</a>
		<Icon icon="logo" style="block md:hidden ml-5 w-48" />

    <LocaleSelector />

		<!-- desktop nav -->
		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
			<button on:click={() => scroll(about)}>{$_('about')}</button>
			{#if !$user}
				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
					>{$_('startInSeconds')}
				</button>
				<button
					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
					on:click={() => goto('/login')}
				>
					{$_('signIn')}
				</button>
			{:else}
				<button
					class="border rounded-full px-6 py-2 font-bold"
					on:click={() => goto(`/${$user.username}/dashboard`)}
					>Account
				</button>
				<button
					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
					on:click={() => goto('/logout')}
				>
					Sign out
				</button>
			{/if}
		</div>

		<!-- mobile nav -->
		<button
			class="block md:hidden absolute top-[34.5px] right-10 z"
			on:click={() => (showMobileMenu = !showMobileMenu)}
			><Icon icon={!showMobileMenu ? 'menu' : 'close'} />
		</button>

		<div
			class="block md:hidden absolute top-0 {showMobileMenu
				? 'right-0'
				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
		>
			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
					>{$_('howItWorks')}</button
				>
				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('FAQ')}</button>
				<button on:click={() => mobileMenuButtonClick(about)} class="block">{$_('about')}</button>
				{#if !$user}
					<button
						class="border rounded-full px-6 py-2 font-bold block"
						on:click={() => goto('/register')}
						>{$_('startInSeconds')}
					</button>
					<button
						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
						on:click={() => goto('/login')}
					>
            {$_('startInSeconds')}
					</button>
				{:else}
					<button
						class="border rounded-full px-6 py-2 font-bold block"
						on:click={() => goto(`/${$user.username}/dashboard`)}
						>Account
					</button>
					<button
						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
						on:click={() => goto('/logout')}
					>
						Sign out
					</button>
				{/if}
			</div>
>>>>>>> master
		</div>
	</nav>
</header>

<style>
	.z {
		z-index: 100;
	}
</style>