Document UI configuration possibilities

[acka47]

How to configure for example header content, colours, fonts

[sebilasse]

See my PR for a beginning, I think CSS Variables, here variables.js is an easy way to go.
Live at https://redaktor.github.io/vocab/

[kaimertens]

The following customizations can be made:

1. Changing the Logo, under src/components/header.js
2. Upload a new Logo under src/images
3. Changing the Fonts, upload under src/fonts, import and CSS-Changes at src/components/layout.js
4. Changing the Colors, take a look at src/styles/variables.js

[kaimertens]

Note to 4.:

There are no colors in the templates. We only use variables (src/styles/variables.js).
We use the following default colors / variables:

skoHubWhite: 'rgb(255, 255, 255)',
skoHubDarkGreen: 'rgb(15, 85, 75)',
skoHubMiddleGreen: 'rgb(20, 150, 140)',
skoHubLightGreen: 'rgb(40, 200, 175)',
skoHubThinGreen: 'rgb(55, 250, 210)',
skoHubBlackGreen: 'rgb(5, 30, 30)',
skoHubAction: 'rgb(230, 0, 125)',
skoHubNotice: 'rgb(250, 180, 50)',
skoHubDarkGrey: 'rgb(155, 155, 155)',
skoHubMiddleGrey: 'rgb(200, 200, 200)',
skoHubLightGrey: 'rgb(235, 235, 235)',

To change a color, the RGB values can be adjusted. HEX codes are also possible. The names of variables should only be changed if you use "search and replace" to adapt the names also in the templates.

[kaimertens]

Note to 3.:

We use fonts that are self-hosted.

If you want to change a font, please upload the new font to the src/fonts folder. You can get fonts from Google Fonts (download / free of charge).

Then you have to adjust the CSS at src/components/layout.js. First: Change the import-path at line 18 and following. Secondly: Change @font-face at line 80 an following. Third: Change the font-family in the body-tag, at line 125 an following. That's all.

[kaimertens]

Note to 1./2.:

The logo consists of two parts. The first is a graphics file. And the second is simply text.

If you dont want to use the text, just delete <span class="skohubTitle">SkoHub Vocabs</span> in src/components/header.js. Then the graphic logo remains.

If you dont want to use the graphics file, just delete the -Tag in n src/components/header.js. Then only the text remains.

If you want to change the graphics file, you can upload a new file to src/images. Then you need to change the path in src/components/header.js at line 8 "import skohubsvg from ...". The new logo doesn't scale correctly? Please check the proportions in line 28 (width and height). That's all.

[kaimertens]

@acka47 can you please add this documentation to the README.md file? I don't want to intervene in your structure and I don't know if you might want to adjust the wording. Thank you!

[acka47]

@sroertgen Can you please take this?

[sroertgen]

@acka47

I will document this in the README.

Then we can integrate this into #185 to make it configurable via the config file.