<!--
version 0.1
date: 2020 11 27
author jorge@hangar.org
-->
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grafica - hangar.org</title>
<link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
<!-- header icons anf favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://grafica.hangar.org/assets/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://grafica.hangar.org/assets/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://grafica.hangar.org/assets/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://grafica.hangar.org/assets/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://grafica.hangar.org/assets/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://grafica.hangar.org/assets/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://grafica.hangar.org/assets/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://grafica.hangar.org/assets/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://grafica.hangar.org/assets/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://grafica.hangar.org/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://grafica.hangar.org/assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://grafica.hangar.org/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="https://grafica.hangar.org/assets/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://grafica.hangar.org/assets/img/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body class="">
<a name="top"></a>
<div class="grid-container">
<div class="grid-x grid-padding-x full-height">
<div class="cell small-12 flex-container flex-dir-column">
<div class="flex-child-shrink">
<header>
<a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a>
<h2>grafica compilation</h2>
</header>
<p> Theese are the graphics applied in <a href="https://hangar.org">Hangar</a>.</p>
<nav class="menu-fixed-right">
<a href="#top" class="up-arrow"></a>
<small>puja / top / arriba</small>
<ul>
<li>
<a href="#hangar-colors">colors</a>
</li>
<li>
<a href="#hangar-logo">logo</a>
</li>
<li>
<a href="#hangar-logo-claim">logo with claim</a>
</li>
<li>
<a href="#hangar-logo-apps">apps and software mods</a>
</li>
<li>
<a href="#hangar-logo-icon">icon</a>
</li>
<li>
<a href="#hangar-logo-favicon">favicon</a>
</li>
<li>
<a href="#hangar-mail-signature">mail signature</a>
</li>
<li>
<a href="#hangar-static-pages">static pages</a>
</li>
</ul>
</nav>
</div>
<content class="hangar-grafica primary flex-child-auto">
<section>
<a name="hangar-colors"></a>
<a href="#top" class="up-arrow"></a>
<h4>colors</h4>
<ul class="logos">
<li>
<span class="hangar-blue">blau / azul / blue #0000ff rgb(0,0,255)</span>
</li>
<li>
<span class="">negre / negro / black #000000 rgb(0,0,0)</span>
</li>
<li>
<span class="hangar-grey">gris / gris / grey #969696 rgb(150,150,150)</span>
</li>
</ul>
</section>
<section>
<a name="hangar-logo"></a>
<a href="#top" class="up-arrow"></a>
<h4>hangar logo</h4>
<ul class="logos">
<li>
<a href="hangar-logo.svg">
<img src="hangar-logo.svg">
</a>
</li>
<li>
<a href="hangar-logo.jpg">
<img src="hangar-logo.jpg">
</a>
</li>
<li>
<a href="hangar-logo.png">
<img src="hangar-logo.png">
</a>
</li>
<li>
<a href="hangar-logo-invert.svg">
<img src="hangar-logo-invert.svg">
</a>
</li>
<li>
<a href="hangar-logo-invert.png">
<img src="hangar-logo-invert.png">
</a>
</li>
<li>
<a href="hangar-logo-invert.jpg">
<img src="hangar-logo-invert.jpg">
</a>
</li>
<li>
<a href="hangar-logo-400x170.jpg">
<img src="hangar-logo-400x170.jpg">
</a>
<figcaption> logo 400 x 170 px </figcaption>
</li>
<li>
<a href="hangar-logo-400x170.png">
<img src="hangar-logo-400x170.png">
</a>
<figcaption> logo 400 x 170 px </figcaption>
</li>
<li>
<a href="hangar-logo-invert-400x170.jpg">
<img src="hangar-logo-invert-400x170.jpg">
</a>
<figcaption>logo 400 x 170 px </figcaption>
</li>
<li>
<a href="hangar-logo-invert-400x170.png">
<img src="hangar-logo-invert-400x170.png">
</a>
<figcaption>logo 400 x 170 px </figcaption>
</li>
</ul>
</section>
<section>
<a name="hangar-logo-claim"></a>
<a href="#top" class="up-arrow"></a>
<h4>logo with claim</h4>
<ul class="logos">
<li>
<a href="hangar-logo-claim.svg">
<img src="hangar-logo-claim.svg">
</a>
</li>
<li>
<a href="hangar-logo-claim-b.png">
<img src="hangar-logo-claim-b.png">
</a>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-claim-w.png">
<img src="hangar-logo-claim-w.png">
</a>
</li>
<li>
<a href="hangar-logo-claim-blinking-b.gif">
<img src="hangar-logo-claim-blinking-b.gif">
</a>
<figcaption> logo with blink </figcaption>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-claim-blinking-w.gif">
<img src="hangar-logo-claim-blinking-w.gif">
</a>
<figcaption> logo with blink </figcaption>
</li>
<li>
<a href="hangar-logo-claim-blinking-b-wordpress-big.gif">
<img src="hangar-logo-claim-blinking-b-wordpress-big.gif">
</a>
<figcaption> logo with blink for wordpress</figcaption>
</li>
<li>
<a href="hangar-logo-claim-blinking-b-wordpress-400x180px.gif">
<img src="hangar-logo-claim-blinking-b-wordpress-400x180px.gif">
</a>
<figcaption> logo with blink for wordpress</figcaption>
</li>
</ul>
</section>
<section>
<a name="hangar-logo-apps"></a>
<a href="#top" class="up-arrow"></a>
<h4>apps and software mods</h4>
<p>logos made for apps and services that are provided by Hangar.org</p>
<ul class="logos">
<li class="hangar-blue-bg">
<a href="hangar-logo-jitsi-watermark.png">
<img src="hangar-logo-jitisi-watermark.png">
</a>
<figcaption> logo translucent for watermark jitsi meet </figcaption>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-roundcube-editable.svg">
<img src="hangar-logo-roundcube-editable.svg">
</a>
<figcaption>svg egitable text for roundcube</figcaption>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-roundcube.svg">
<img src="hangar-logo-roundcube.svg">
</a>
<figcaption>svg for roundcube</figcaption>
</li>
</ul>
</section>
<section>
<a name="hangar-logo-icon"></a>
<a href="#top" class="up-arrow"></a>
<h4>icon</h4>
<ul class="icons">
<li>
<a href="hangar-logo-icon.svg">
<img src="hangar-logo-icon.svg">
</a>
</li>
<li>
<a href="hangar-logo-icon-512-b.png">
<img src="hangar-logo-icon-512-b.png">
</a>
<figcaption> square icon 512px</figcaption>
</li>
<li>
<a href="hangar-logo-icon-512.png">
<img src="hangar-logo-icon-512.png">
</a>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-icon-512-w.png">
<img src="hangar-logo-icon-512-w.png">
</a>
</li>
</ul>
<a name="hangar-logo-favicon"></a>
<a href="#top" class="up-arrow"></a>
<h4>favicon</h4>
<ul>
<li>
<a href="hangar-logo-favico-b.png">
<img src="hangar-logo-favico-b.png">
</a>
</li>
<li>
<a href="hangar-logo-favico.png">
<img src="hangar-logo-favico.png">
</a>
</li>
<li class="hangar-blue-bg">
<a href="hangar-logo-favico-w.png">
<img src="hangar-logo-favico-w.png">
</a>
</li>
</ul>
<p>The generated favicons for the <abbr title="Hyper Text Language Protocol">HTML</abbr> <a href="https://grafica.hangar.org/assets/favicons/header.txt">header</a>, the <a href="https://grafica.hangar.org/assets/favicons/browserconfig.xml">browserconfig.xml</a> and the <a href="https://grafica.hangar.org/assets/favicons/manifest.json">manifest.json</a> are all included in the <a href="hangar-favicon.ico.zip">hangar favicon zip file</a> [75Kb only]. This was generated with the help of <a href="https://www.favicon-generator.org/">Favicon generator</a></p>
</section>
<section>
<a name="hangar-mail-signature"></a>
<a href="#top" class="up-arrow"></a>
<h4>mail signature</h4>
<p><a href="hangar-firma-mail.txt">This text</a> can be used to put on the mail signature, just copy and paste it into your mail-software preferences. Change the fields indicated below.</p>
<p><a href="hangar-firma-mail.txt">Este texto</a> sirve para que aparezca la firma en los mail, copia y pega en las preferencias de tu programa de correo electrónico. Cambia los campos indicados abajo</p>
<p>
Change fields in capital letters // cambia los campos en mayúsculas<br />
NOMBRE APELLIDO APELLIDO<br />
JOBTITLE<br />
EMAIL<br />
EXT: XX<br />
GPG/GNUPG FINGERPRINT<br />
<pre class="codeblock">
///////////////////////////////
<div>
<name style="font-face:'Helvetica',sans-serif;font-size:1rem;color:#333;font-decoration:none;font-weight:bold;">
NOMBRE APELLIDO APELLIDO
</name>
<br>
<jobtitle>
JOBTITLE
</jobtitle>
<br>
<company>
<a href="http://www.hangar.org" id="logo"
style="background:url('https://grafica.hangar.org/hangar-logo-mail.png') no-repeat left center;display:inline-block;width:110px;height:60px;" >
<name style="display:none;">Hangar.org</name>
</a>
</company>
<br>
<email>
<a href="mailto:EMAIL@hangar.org">
EMAIL@hangar.org
</a>
</email>
<br>
<telephone>
<a href="tel:+34933084041">Tel: +34 93 308 40 41</a>
EXT: XX
</telephone>
<br>
<br>
<address>
<street>
c/ Emilia Coranty 8-16 (Can Ricart)
</street>
<br>
<postalcode>E-08018<postalcode>
<city>Barcelona</city>
</address>
<pre>
gpg key: GPG/GNUPG FINGERPRINT
</pre>
</div>
</pre>
<p>
///////////////////////////////
<div>
<name style="font-face:'Helvetica',sans-serif;font-size:1rem;color:#333;font-decoration:none;font-weight:bold;">
NOMBRE APELLIDO APELLIDO
</name>
<br>
<jobtitle>
JOBTITLE
</jobtitle>
<br>
<company>
<a href="http://www.hangar.org" id="logo"
style="background:url('hangar-logo-mail.png') no-repeat left center;display:inline-block;width:110px;height:60px;" >
<name style="display:none;">Hangar.org</name>
</a>
</company>
<br>
<email>
<a href="mailto:NOMBRE@hangar.org">
NOMBRE@hangar.org
</a>
</email>
<br>
<telephone>
<a href="tel:+34933084041">Tel: +34 93 308 40 41</a>
ext: XX
</telephone>
<br>
<br>
<address>
<street>
c/ Emilia Coranty 8-16 (Can Ricart)
</street>
<br>
<postalcode>E-08018<postalcode>
<city>Barcelona</city>
</address>
<pre>
gpg key: GPG/GNUPG FINGERPRINT
</pre>
</div>
</p>
</section>
<section>
<a name="hangar-static-pages"></a>
<a href="#top" class="up-arrow"></a>
<h4>static pages html</h4>
<p>
You can use pre made static pages for many needs, just copy the <code>index-XXX</code> to the desired location
<ul>
<li>
<a href="index-template.html">index-template.html</a> is an emptied template.
</li>
<li>
<a href="index-offline.html">index-offline.html</a> is a prepared page to announce temporary offline, rename it as <code>index.html</code> and it will work.
</li>
<li>
<a href="index-kitchen-sink.html">index-kitchen-sink.html</a> is where all styles are shown and you can learn the <code>classes</code>to apply them. .
</li>
<li>
<a href="index-live.html">index-live.html</a> is the live hangar with video and kiwiichat.
</li>
<li>
<a href="index-radar.html">index-radar.html</a> is the radar page.
</li>
</p>
</section>
</content>
<footer class="text-center flex-child-shrink">
<p>
another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals."><span class="hangar-logo small icon ">Hangar</span></a> website.
</p>
</footer>
</div>
</div>
</div>
</body>
</html>