75 lines
2.1 KiB
Markdown
75 lines
2.1 KiB
Markdown
---
|
|
author: Michael Boelen
|
|
categories:
|
|
- website
|
|
date: 2023-05-20T23:19:44+02:00
|
|
description: "Dit is de NLUUG stijlgids voor de website en bevat de structuur en kleuren van onze huisstijl."
|
|
slug:
|
|
tags:
|
|
- kleuren
|
|
- stijl
|
|
- website
|
|
title: "Stijlgids"
|
|
---
|
|
|
|
# Stijlgids NLUUG-website
|
|
|
|
## Kleuren
|
|
|
|
We gebruiken zoveel mogelijk de kleurstelling zoals die ooit in de oude website werd toegepast.
|
|
|
|
* Donkerblauw: #1D3160
|
|
* Extra donkere versie van donkerblauw: #17274d
|
|
* Groen (voor call-to-action): #138808
|
|
* Donkergroen voor call-to-action (hover): #0F6D06
|
|
* Paars: #6A2060;
|
|
* Lichtpaars (uitgangspunt 6A2060): #EBBCE5
|
|
|
|
Nog te benoemen:
|
|
|
|
* #99AFE2
|
|
* #E3E9F7
|
|
|
|
## Headings
|
|
|
|
Binnen de website maken we vooral gebruik van H1, H2, H3, H4.
|
|
|
|
### H1
|
|
|
|
Komt maximaal eenmalig voor per pagina
|
|
|
|
### H2
|
|
|
|
De hoofdsecties van een pagina worden voorzien van H2. Op een doorsnee pagina is het gebruikelijk om meerdere H2-headings te zien.
|
|
|
|
### H3 en H4
|
|
|
|
Waar de content wat langer is kan het gebruik van H3 en zelfs H4 worden toegepast.
|
|
|
|
## Afbeeldingen
|
|
|
|
Op onze website gebruiken we een aantal verschillende type afbeeldingen:
|
|
|
|
* Foto's van personen
|
|
* Iconen
|
|
* Logo
|
|
* Ondersteunende afbeeldingen
|
|
|
|
### Iconen
|
|
|
|
Waar mogelijk gebruiken we iconen in het SVG-formaat. Deze zijn compact en relatief eenvoudig te voorzien van kleuren in de huisstijl.
|
|
|
|
Om de iconen te kleuren maken we gebruik van een CSS-filter. Aangezien hierbij het niet mogelijk om deze direct te kleuren aan de hand van de hex-waarde, worden deze omgezet.
|
|
|
|
Tool: https://isotropic.co/tool/hex-color-to-css-filter/
|
|
|
|
### Ondersteunende afbeeldingen
|
|
|
|
Ten behoeve van de zichtbaarheid heeft de website ook ondersteunende afbeeldingen. Deze vaak niet direct zichtbaar, maar worden gebruikt op o.a. social media. Bij het delen van een URL die op onze website uitkomt, zal aan de hand van de meta-tags hier de juiste informatie bij geplaatst worden. Zo worden een ondersteunende afbeelding toegevoegd die dynamisch wordt gegenereerd.
|
|
|
|
Tools:
|
|
* [Controle OpenGraph](https://www.opengraph.xyz/)
|
|
* [Genereren van achtergronden](https://angrytools.com/gradient/image/)
|
|
|
|
|