37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
# Workflow Check arculati csomag
|
|
|
|
Az **A jel** a webes arculat fő eleme: gyártási folyamat, ellenőrzési pontok és sikeres lezárás. A **B jel** a mobilalkalmazás ikonja.
|
|
|
|
## Színek
|
|
|
|
| Név | HEX | Használat |
|
|
|---|---:|---|
|
|
| Deep Navy | `#0B1F3A` | oldalsáv, fő szöveg, elsődleges felület |
|
|
| Process Blue | `#123C69` | gombok, linkek, köztes állapot |
|
|
| Check Blue | `#38BDF8` | aktív elem, pipa, fókusz |
|
|
| Light Blue | `#BAE6FD` | aktív menü, táblázatfejléc |
|
|
| White | `#FFFFFF` | tartalom és kontraszt |
|
|
|
|
## Webes bekötés
|
|
|
|
Másold az `assets` és `css` könyvtárat a webprojekt `wwwroot` mappájába, majd a layout `<head>` részében:
|
|
|
|
```html
|
|
<link rel="icon" href="~/assets/favicon/favicon.ico" sizes="any">
|
|
<link rel="icon" href="~/assets/favicon/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="~/assets/favicon/apple-touch-icon.png">
|
|
<link rel="stylesheet" href="~/css/workflow-check.css" asp-append-version="true">
|
|
```
|
|
|
|
A `workflow-check.css` a többi fájlt importálja, ezért ezt kell utolsó saját CSS-ként betölteni. A csomag Bootstrap 5 és DataTables felülírásokat is tartalmaz.
|
|
|
|
## Fájlhasználat
|
|
|
|
- `workflow-check-logo.svg`: világos hátterű fejléc, belépőoldal, dokumentum.
|
|
- `workflow-check-logo-dark.svg`: sötét oldalsáv vagy sötét fejléc.
|
|
- `workflow-check-symbol.svg`: kompakt webes jel.
|
|
- `workflow-check-app-icon.svg/png`: mobilalkalmazás forrásikon.
|
|
- `favicon.*`: böngésző és kezdőképernyő ikonok.
|
|
|
|
Az SVG a szerkeszthető mester. A PNG és ICO változatokat ebből kell származtatni.
|