Milliways/www.hip-berlin.de
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

design resources initial

Browse source
This commit is contained in:
Leif Niemczik 2022-11-18 14:48:47 +01:00
parent f7570a1bf7
commit b96b35be87
3 changed files with 252 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/layouts/Layout.astro
View file

@ -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;

2
src/pages/index.astro
View file

@ -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;

238
src/pages/resources/index.astro
View file

@ -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>