285 lines
6.9 KiB
Plaintext
285 lines
6.9 KiB
Plaintext
---
|
|
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/#/%23xc3-space%3A1312.media'>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>
|