design resources initial
This commit is contained in:
Leif Niemczik
parent
f7570a1bf7
commit
b96b35be87
|
|
@ -121,6 +121,15 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.gradient-bg {
|
.gradient-bg {
|
||||||
background: var(--gradient);
|
background: var(--gradient);
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
|
|
@ -133,6 +142,7 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
border-radius: 1.5rem;
|
border-radius: 1.5rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
|
transition: border-radius 0.2s ease-in-out;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -143,6 +153,9 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
&:is(button):hover {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ import Layout from '../layouts/Layout.astro'
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
font-size: 2.4rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,245 @@ import Layout from '../../layouts/Layout.astro'
|
||||||
</p>
|
</p>
|
||||||
<section>
|
<section>
|
||||||
<h2>Logos</h2>
|
<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>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue