From b96b35be87744272edd0c19b8d1be4d44299608f Mon Sep 17 00:00:00 2001
From: Leif Niemczik <leif.niem@gmail.com>
Date: Fri, 18 Nov 2022 14:48:47 +0100
Subject: [PATCH] design resources initial

---
 src/layouts/Layout.astro        |  13 ++
 src/pages/index.astro           |   2 +-
 src/pages/resources/index.astro | 238 ++++++++++++++++++++++++++++++++
 3 files changed, 252 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 56a9698..765f48c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -121,6 +121,15 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 					opacity: 0.75;
 				}
 			}
+			button {
+				appearance: none;
+				border: none;
+				color: inherit;
+				font-family: inherit;
+				font-size: inherit;
+				font-weight: 500;
+				cursor: pointer;
+			}
 			.gradient-bg {
 				background: var(--gradient);
 				padding: 1.5rem;
@@ -133,6 +142,7 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 				background: var(--background);
 				border-radius: 1.5rem;
 				padding: 1.5rem;
+				transition: border-radius 0.2s ease-in-out;
 
 				&::before {
 					position: absolute;
@@ -143,6 +153,9 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 					border-radius: inherit;
 					content: '';
 				}
+				&:is(button):hover {
+					border-radius: 0.5rem;
+				}
 			}
 			footer {
 				font-size: 0.75rem;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bc3d610..98eaed8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -55,7 +55,7 @@ import Layout from '../layouts/Layout.astro'
 		h2 {
 			font-size: 2rem;
 			@media screen and (min-width: 768px) {
-				font-size: 2.4rem;
+				font-size: 2.2rem;
 			}
 			line-height: 1.2;
 			margin: 0;
diff --git a/src/pages/resources/index.astro b/src/pages/resources/index.astro
index b234931..41549ab 100644
--- a/src/pages/resources/index.astro
+++ b/src/pages/resources/index.astro
@@ -13,7 +13,245 @@ import Layout from '../../layouts/Layout.astro'
 			</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: #FFFFFF <br />
+							RGB (255,255,255) <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>LBL</h3>
+						<div class='values'>
+							HEX: #FED61E <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #44B4E9'></div>
+						<h3>CYN</h3>
+						<div class='values'>
+							HEX: #44B4E9 <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #008317'></div>
+						<h3>GRN</h3>
+						<div class='values'>
+							HEX: #008317 <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #002E5C'></div>
+						<h3>DBL</h3>
+						<div class='values'>
+							HEX: #002E5C <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #003A3E'></div>
+						<h3>DTR</h3>
+						<div class='values'>
+							HEX: #003A3E <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #6C2400'></div>
+						<h3>BRN</h3>
+						<div class='values'>
+							HEX: #6C2400 <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+					<div class='color-block'>
+						<div class='sample' style='background: #FF9900'></div>
+						<h3>ONG</h3>
+						<div class='values'>
+							HEX: #FF9900 <br />
+							RGB (,,) <br />
+						</div>
+					</div>
+				</div>
 			</section>
 		</article>
 	</main>
 </Layout>
+
+<style lang='scss'>
+	.grid-2col {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 2rem;
+	}
+	.grid-3col {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 2rem;
+	}
+	.thumbnail {
+		height: 8rem;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1rem;
+
+		img {
+			max-height: 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>