---
import Layout from '../../layouts/Layout.astro'
---

<Layout title='Design Resources'>
	<main>
		<article>
			<h1>Resources</h1>
			<p>Thank you for taking a look at this page!</p>
			<h2>Wiki</h2>
			<p>
				A lot of information about H/i/P 22 can be found in <a
					href='https://wiki.hip-berlin.de/index.php'>our dedicated wiki</a
				>. If you want to get involved this is a great place to start!
			</p>
			<h2>Design</h2>
			<p>
				Should you need any additional design resources feel free to join the
				HiP-Design channel of our <a
					href='https://matrix.to/#/#hip-design:milliways.info'>Matrix space</a
				>.
			</p>
			<h2>Font</h2>
			<p>
				We are using <a href='https://www.ibm.com/plex/'>IBM Plex Mono Medium</a
				>.
			</p>
			<section>
				<h2>Logos</h2>
				<div class='grid-2col'>
					<div>
						<h3>Default</h3>
						<div class='thumbnail'>
							<img
								src='/design-resources/logo/colored.svg'
								alt='Default Logo of HiP 2022 Berlin'
							/>
						</div>
						<div class='buttons'>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/colored.svg'
								download>Download SVG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/colored.png'
								download>Download PNG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/colored.jpg'
								download>Download JPG</a
							>
						</div>
					</div>
					<div>
						<h3>Single Color</h3>
						<div class='thumbnail'>
							<img
								src='/design-resources/logo/monocolor.svg'
								alt='Single colored Logo of HiP 2022 Berlin'
							/>
						</div>
						<div class='buttons'>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/monocolor.svg'
								download>Download SVG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/monocolor.png'
								download>Download PNG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/monocolor.jpg'
								download>Download JPG</a
							>
						</div>
					</div>
					<div>
						<h3>One Line</h3>
						<div class='thumbnail'>
							<img
								src='/design-resources/logo/oneliner.svg'
								alt='Single line Logo of HiP 2022 Berlin'
							/>
						</div>
						<div class='buttons'>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/oneliner.svg'
								download>Download SVG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/oneliner.png'
								download>Download PNG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/oneliner.jpg'
								download>Download JPG</a
							>
						</div>
					</div>
					<div>
						<h3>Slashes only</h3>
						<div class='thumbnail'>
							<img
								src='/design-resources/logo/slashes.svg'
								alt='Slashes only Logo of HiP 2022 Berlin'
							/>
						</div>
						<div class='buttons'>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/slashes.svg'
								download>Download SVG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/slashes.png'
								download>Download PNG</a
							>
							<a
								class='gradient-border fill'
								href='/design-resources/logo/slashes.jpg'
								download>Download JPG</a
							>
						</div>
					</div>
				</div>
			</section>
			<section>
				<h2>Color Palette</h2>
				<div class='grid-3col'>
					<div class='color-block'>
						<div class='sample' style='background: #FFFFFF'></div>
						<h3>WHT</h3>
						<span>for: Headlines</span><br />
						<div class='values'>
							HEX: #FFFFFF <br />
							RGB (255,255,255) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #7A7879'></div>
						<h3>GRY</h3>
						<span>for: Body text</span><br />
						<div class='values'>
							HEX: #7A7879 <br />
							RGB (122,120,121) <br />
						</div>
					</div>
					<div class='color-block'>
						<div
							class='sample'
							style='background: #000000; border: 1px solid var(--text-color)'
						>
						</div>
						<h3>BLK</h3>
						<span>for: Backgrounds, Text bright bg</span><br />
						<div class='values'>
							HEX: #000000 <br />
							RGB (0,0,0) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #FED61E'></div>
						<h3>YLW</h3>
						<div class='values'>
							HEX: #FED61E <br />
							RGB (254,214,30) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #44B4E9'></div>
						<h3>LBL</h3>
						<div class='values'>
							HEX: #44B4E9 <br />
							RGB (68,180,233) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #008317'></div>
						<h3>GRN</h3>
						<div class='values'>
							HEX: #008317 <br />
							RGB (0,131,23) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #002E5C'></div>
						<h3>DBL</h3>
						<div class='values'>
							HEX: #002E5C <br />
							RGB (0,46,92) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #003A3E'></div>
						<h3>DTR</h3>
						<div class='values'>
							HEX: #003A3E <br />
							RGB (0,58,26) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #6C2400'></div>
						<h3>BRN</h3>
						<div class='values'>
							HEX: #6C2400 <br />
							RGB (108,36,0) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: #FF9900'></div>
						<h3>ONG</h3>
						<div class='values'>
							HEX: #FF9900 <br />
							RGB (255,153,0) <br />
						</div>
					</div>
					<div class='color-block'>
						<div class='sample' style='background: var(--gradient)'></div>
						<h3>Gradient</h3>
						<div class='values'>
							linear-gradient( 95.7deg, #44b4e9 -2.12%, #008317 41.14%, #fed61e
							64.72%, #ff9900 77.58%, #6c2400 96.25% );
						</div>
					</div>
				</div>
			</section>
		</article>
	</main>
</Layout>

<style lang='scss'>
	.grid-2col {
		display: grid;
		gap: 2rem;
		@media screen and (min-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.grid-3col {
		display: grid;
		@media screen and (min-width: 1024px) {
			grid-template-columns: repeat(3, 1fr);
		}
		gap: 2rem;
	}
	.thumbnail {
		height: 8rem;
		display: flex;
		justify-content: center;
		margin-bottom: 1rem;

		img {
			max-height: 100%;
			max-width: 100%;
			border: 2px solid var(--text-color);
			border-radius: 1rem;
		}
	}
	.buttons {
		display: grid;
		gap: 1rem;
		text-align: center;
	}
	.fill {
		width: 100%;
	}
	.color-block {
		.sample {
			min-height: 2rem;
			width: 100%;
			border-radius: 0.5rem;
		}
	}
</style>