189 lines
8.3 KiB
HTML
189 lines
8.3 KiB
HTML
|
<!--
|
||
|
|
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>kitchen sink - 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="assets/img/ms-icon-144x144.png">
|
||
|
|
<meta name="theme-color" content="#ffffff">
|
||
|
|
<!--end header icons anf favicons -->
|
||
|
|
|
||
|
|
</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">
|
||
|
|
<header class="primary flex-child-shrink text-center ">
|
||
|
|
<h1>
|
||
|
|
<a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<nav class="menu-fixed-right">
|
||
|
|
<a href="#top" class="up-arrow"></a>
|
||
|
|
<small>puja / top / arriba</small>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="#height-auto">auto expand height</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#headers">headers clases</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#hangar-logo">hangar logo</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#hangar-blue">hangar color</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#hide-content">hide content</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<p>
|
||
|
|
this header height shrinks using <code> class="flex-child-shrink"</code>
|
||
|
|
<br>
|
||
|
|
and is centered with <code> class="text-center"</code>
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="height-auto"></a>
|
||
|
|
<section>
|
||
|
|
<p>
|
||
|
|
this content height expands to full height with
|
||
|
|
<code> class="flex-child-auto"</code>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="headers"></a>
|
||
|
|
<section>
|
||
|
|
<h1>h1 header</h1>
|
||
|
|
<h2>h2 header</h2>
|
||
|
|
<h3>h3 header</h3>
|
||
|
|
<h4>h4 header</h4>
|
||
|
|
<h5>h5 header</h5>
|
||
|
|
<h6>h6 header</h6>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="hangar-logo"></a>
|
||
|
|
<section>
|
||
|
|
<p>
|
||
|
|
<span class="hangar-logo">Hangar</span>
|
||
|
|
you can show the logo using <code>class="hangar-logo"</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span class="hangar-logo small">Hangar</span>
|
||
|
|
smaller size adding class <code>class="hangar-logo small"</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span class="hangar-logo icon">Hangar</span>
|
||
|
|
to see the icon add the class <code>class="hangar-logo icon"</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span class="hangar-logo small icon">Hangar</span>
|
||
|
|
combine the classes <code>class="hangar-logo small icon"</code>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="hangar-blue"></a>
|
||
|
|
<section>
|
||
|
|
<p class="hangar-blue">
|
||
|
|
this content is colored blue <code>#0000FF</code> using <code> class="hangar-blue"</code>
|
||
|
|
<br>
|
||
|
|
as well as the background of <span class="hangar-blue-invert">any element</span>, for example a transparent image <span class="hangar-logo small hangar-blue-bg">Hangar</span> using <code> class="hangar-blue-bg"</code>
|
||
|
|
<br>
|
||
|
|
for the text we are using <code>class="hangar-blue-invert"</code> <span class="hangar-blue-invert">so colors are inverted</span> and you can enhace the out put in many elements like <code class="hangar-blue-invert"><code class="hangar-blue-invert"></code></code>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="hide-content"></a>
|
||
|
|
<section>
|
||
|
|
<p>
|
||
|
|
you can not see the content inside the <code> class="hide"</code> ... <span class="hide">hidden text on browser</span> so you are missing some words.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
<content class="primary flex-child-auto">
|
||
|
|
<a name="hangar-card"></a>
|
||
|
|
<section class="grid-x grid-padding-x grid-margin-x small-up-4">
|
||
|
|
<div class="cell card">
|
||
|
|
<div class="card-divider">
|
||
|
|
This is a header
|
||
|
|
</div>
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="assets/img/hangar-logo.svg" class="small">
|
||
|
|
</div>
|
||
|
|
<div class="card-section">
|
||
|
|
<h4>This is a card.</h4>
|
||
|
|
<p>It has an easy to override visual style, and is appropriately subdued.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cell card">
|
||
|
|
<div class="card-divider">
|
||
|
|
This is a header
|
||
|
|
</div>
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="assets/img/hangar-logo.svg" class="small">
|
||
|
|
</div>
|
||
|
|
<div class="card-section">
|
||
|
|
<h4>This is a card.</h4>
|
||
|
|
<p>It has an easy to override visual style, and is appropriately subdued.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cell card">
|
||
|
|
<div class="card-divider">
|
||
|
|
This is a header
|
||
|
|
</div>
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="assets/img/hangar-logo.svg" class="small">
|
||
|
|
</div>
|
||
|
|
<div class="card-section">
|
||
|
|
<h4>This is a card.</h4>
|
||
|
|
<p>It has an easy to override visual style, and is appropriately subdued.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</content>
|
||
|
|
|
||
|
|
<footer class="flex-child-shrink text-center ">
|
||
|
|
<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>
|