64 lines
1.5 KiB
Markdown
64 lines
1.5 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
|
|
|
|
### 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/
|