grafica-hangar-org/README.md

# grafica-hangar-org

elementos gráficos aplicables a Hangar mostrados en https://grafica.hangar.org# using the static templates maintenance mode.

## instructions as 2020 04 20 by jorge

to use the static page for Hangar:

copy/move the content into the main site directory
  - css-static-template (directory as is)
  - index-template.html
  - index-offline.html

for **Hangar** case: the page is ready, 

for other edit the `index-template.html` with desidered content

then:
 - rename the original `index.html` or `index.php` to `index.html.YYYYMMDD` or `index.php.YYYYMMDD` (ex index.html.20200414)
 - rename `index-offline.html` to `index.html`

step back / roll back:
 - rename index.html to index-offline.html
 - rename index.html.YYYYMMDD to index.html or index.php.YYYYMMDD to index.php

## styles variables and colors

the global variables and colors are

```
:root{
  --color-hangar: rgb(0,0,255);
  --color-hangar-light: rgb(180,180,255);
  --color-body: rgb(20,20,20);
  --color-secondary: rgb(90,90,90) ;
  --color-background: rgb(250,250,250);
  --color-body-invert: rgb(200,200,200);
  --color-background-invert: rgb(10,10,10);
  --color-black: rgb(0,0,0);
  --color-white: rgb(255,255,255);
  --color-grey-dark: rgb(110,110,110);
  --color-grey-light: rgb(230,230,230);
  --color-error: rgb(230,50,50);
  --global-padding: 1rem;
  --global-margin: 1rem;
  --global-border: 0.05rem solid var(--color-grey-light);
  --global-radius: 1rem;
  --font-hangar: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
  --logo-hangar: url('https://grafica.hangar.org/assets/img/hangar-logo.svg');
}

```

they can be calles like this:
```
  a {
    color: var(--color-hangar);
  }

  a:hover {
    color: var(--color-white);
    background-color: var(--color-hangar);
  }
```