Wijzigen voor document Tekenveld

Samenvatting

• Paginaeigenschappen (1 gewijzigd, 0 toegevoegd, 0 verwijderd)
• Objecten (1 gewijzigd, 0 toegevoegd, 0 verwijderd)
  • XWiki.StyleSheetExtension[0]

Details

Paginaeigenschappen

Inhoud

...	...	@@ -1,4 +1,4 @@
1		-Tekenveld op de startpagina van de Kennisbank: een bijna onzichtbaar veld van letters en cijfers achter de inhoud, met een muisspoor, hartslagringen, af en toe een ECG-lijn en een smiley bij een klik op de lege achtergrond. Het is hetzelfde veld als in Ember, in een rustige variant: het vervaagt naar het midden en ligt stil na een minuut zonder muis.
	1	+Tekenveld op de startpagina van de Kennisbank: een bijna onzichtbaar veld van letters en cijfers achter de inhoud, met een muisspoor, hartslagringen, af en toe een rode ECG-lijn en een smiley bij een klik op de lege achtergrond. Vijf snelle klikken op de lege achtergrond geven een explosie; daarna komt het veld in een minuut terug. Rond feestdagen en herdenkingen (Sint-Maarten, Sinterklaas, Kerst, Nieuwjaar, Pasen, Koningsdag, 4 en 5 mei) neemt een seizoensthema het over, met de kalender uit Ember; ?tekenveld=kerst in de adresbalk toont een thema meteen. Het is hetzelfde veld als in Ember, in een rustige variant: het vervaagt naar het midden en ligt stil na een minuut zonder muis.
2	2
3	3	Het object //JavaScriptExtension// op deze pagina is de engine van Ember plus een korte opstart; het object //StyleSheetExtension// zet het canvas achter de inhoud. Beide staan op //onDemand// en worden alleen geladen door [[Startpagina>>doc:Wardenburg.Code.Startpagina]].
4	4

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,10 +1,12 @@
1	1	/* Tekenveld op de startpagina van de Kennisbank (Wardenburg.Code.Tekenveld); alleen geladen op
2	2	de startpagina. Het canvas ligt achter de inhoud; de vlakken eromheen worden doorzichtig. */
3	3
4		-/* Kleuren voor de engine: de tekstkleur en het donkere oranje (brand-warning) uit het kleurthema. */
	4	+/* Kleuren voor de engine: de tekstkleur en het donkere oranje (brand-warning) uit het kleurthema;
	5	+ de hartslaglijn in het rood van het thema (brand-danger). */
5	5	html {
6	6	--text: #202124;
7	7	--brand-red: #e8920c;
	9	+ --glyph-line: #d0021b;
8	8	background: #ffffff;
9	9	}
10	10
...	...	@@ -24,11 +24,18 @@
24	24	inset: 0;
25	25	z-index: -1;
26	26	pointer-events: none;
27		- /* Naar het midden, waar het zoekveld en de tegels staan, vervaagt het veld. */
28		- -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
29		- mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
	29	+ /* Naar het midden, waar het zoekveld en de tegels staan, vervaagt het veld tot 40%: het zwakke
	30	+ grijze veld is daar vrijwel weg, de rode hartslaglijn komt er nog doorheen. */
	31	+ -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(0, 0, 0, .4) 45%, #000 100%);
	32	+ mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(0, 0, 0, .4) 45%, #000 100%);
30	30	}
31	31
	35	+/* Tijdens de explosie (vijf snelle klikken) het hele scherm. */
	36	+canvas.kb-tekenveld.kb-tekenveld--boem {
	37	+ -webkit-mask-image: none;
	38	+ mask-image: none;
	39	+}
	40	+
32	32	/* Leesbaarheid: een zachte witte gloed achter de kop, het zoekveld en elke tegel. */
33	33	.wb-zoek > h1,
34	34	.wb-zoek > p,