Over deze website

Januari 2019

De eind januari doorgevoerde aanpassingen zijn voor normale bezoekers van de website niet zichtbaar, maar moeten het zoekmachines eenvoudiger maken om de website te indexeren.
Om dit mogelijk te maken worden alle artikelen nu voorzien van gestructureerde informatie over het artikel. Dit gebeurt door middel van JSON-LD. Om te controleren of er geen fouten in de data staan is de data gecontroleerd met de Tool voor gestructureerde gegevenstests van Google. Voor de structuur wordt gebruik gemaakt van de indeling zoals beschreven op Schema.org. Een voorbeeld:

 { "@context": "http://schema.org",
 "@type": "Article",
 "mainEntityOfPage": 
 { "@type": "WebSite",
 "url": "https://www.scvr.nl",
 "headline": "CVR Magazine",
 "image": 
 { "@type": "ImageObject",
 "url": "https://www.scvr.nl/icon-196x196.png"
 },
 "potentialAction": 
 { "@type": "SearchAction",
 "target": "https://www.scvr.nl/?q={search_term_string}",
 "query-input": "required name=search_term_string"
 }
 },
 "headline": "CVR Magazine - Visuele tocht door De ontdekking van de hemel",
 "image": "https://www.scvr.nl/images/cvrmagazine/0112.jpg",
 "author": 
 { "@type": "Organization",
 "name": "CVR Magazine"
 },
 "publisher": 
 { "@type": "Organization",
 "name": "CVR Magazine",
 "logo": 
 { "@type": "ImageObject",
 "url": "https://www.scvr.nl/icon-196x196.png"
 }
 },
 "wordcount": "8367",
 "url": "https://www.scvr.nl/?id=0112",
 "datePublished": "2019-01-27 20:28:56",
 "dateCreated": "2006-04-10 19:34:00",
 "dateModified": "2019-01-28 16:59:33",
 "description": "In 1992 kwam De ontdekking van de hemel uit..."
 }
 

Daarnaast beschikt de website nu ook over een sitemap. Ook deze pagina is bedoeld voor zoekmachines en geeft een overizcht van de webpagina's die op de website aangeboden worden.

Februari 2019

club verhuist

In het begin (zo ongeveer 15 jaar geleden) werden de artikelen van CVR Magazine vastgelegd in een XML-bestand op de website. Met de verhuizing van de site naar hostingpartij Protagonist zijn alle artikelen verhuisd naar een MySQL-server. Alleen de pagina's van de Club zelf bleven bijgehouden worden in een XML-bestand. Hier is nu een einde aan gekomen en ook de pagina's van de club (introductie, lid worden, de sociëteit, disclaimer, deze pagina etc.) zijn verhuisd naar de database.

De leeszaal

De opmaak van de nieuwspagina is aangepast. De nieuwe lay-out is geïnspireerd op de website Linda.nl en geeft afbeeldingen meer de ruimte:

Mediatheek

De mediatheek is uitgebreid met de categorieën boeken en (muziek)albums. Om het eenvoudiger te maken om te zoeken op bijvoorbeeld de schrijver van een boek zijn er nieuwe vierkante kaarten ontwikkeld. Deze vierkante vorm krijg je door de hoogte gelijk te stellen aan de breedte (die 100% van de kolom is). Dit wordt met CSS gerealiseerd door:

vierkant {
 width: 100%;
 background-size: cover;
}
vierkant:after {
 content: "";
 display: block;
 padding-bottom: 100%;
}

Verder zijn de teksten bij de items in de Mediatheek uit de kaarten gehaald en eronder geplaatst. Dit geeft een rustiger beeld.

Maart 2019

Kaarten

Het gebruik van de vierkante kaarten is uitgebreid naar alle categorieën zoals films, series en documentaires. Om ervoor te zorgen dat elk kaart voorzien is van een afbeelding wordt er een willekeurige afbeelding opgezocht wanneer er voor deze kaart geen specifieke afbeelding is aangewezen. Het opzoeken van een de willekeurige afbeelding gebeurt met een SQL statement wat er als volgt uit ziet:

SELECT afbeelding FROM tabel ORDER BY RAND() LIMIT 1

Door deze aanpak verdwijnt de oorspronkelijke openingspagina van de Mediatheek naar de achtergrond en daarom is de tip verhuisd naar de nieuwe startpagina van de de Mediatheek, tenminste voor de categorieën waarop het betrekking heeft (films, series en documantaires) Aangezien CVR Webradio een heel andere lay-out heeft dan de rest van de Mediatheek is de link naar deze pagina verhuist van de tab in de Mediatheek naar het hoofdmenu.

Kleuren

De gebruikte kleuren op de website waren tot nu toe gebaseerd op het kleurenpallet dat in 2014 door Google bij de introductie van Material Design werd gepresenteerd. Deze kleuren werden echter redelijk door elkaar gebruikt. Inmiddels is er een poging gedaan om de kleuren terug te brengen tot een beperkte set. Deze set is gebaseerd op de kleuren van Martini Racing. De gebruikte kleuren zijn:

:root {
 --rood: #790920; // rgb(121,9,32)
 --wit: #fff; // rgb(255,255,255)
 --blauw: #005; // rgb(0,0,85)
 --lichtblauw: #00a0de; // rgb(0,160,222)
 --grijs: #424346; // rgb(67,67,70)
 --lichtgrijs: #D2D2DC; // rgb(210,210,220);
 --heellichtgrijs: #F0F0FA; // 240,240,250;
}

.rood {background-color: var(--rood) !important}
.wit {background-color: var(--wit) !important}
.blauw {background-color: var(--blauw) !important}
.lichtblauw {background-color: var(--lichtblauw) !important}
.grijs {background-color: var(--grijs) !important}
.lichtgrijs {background-color: var(--lichtgrijs) !important}

Sacher TorteDe kleuren hebben elk een andere functie. Zo wordt de kleur rood gebruikt om aandacht te trekken en is gebaseerd op de rode kleur die Hotel Sacher uit Wenen gebruikt in haar uitingen. De kleur blauw is voor tekst die iets meer aandacht nodig heeft zoals bijvoorbeeld hyperlinks. De kleur lichtblauw wordt alleen gebruikt voor randen of lijnen. Het donkergrijs is gebaseerd op de kleur Rijks zwart grijs welke ook op de wanden van het Rijksmuseum wordt gebruikt. Dit donkergrijs op de website gebruikt als kleur voor gewone tekst en als achtergrond om afbeeldingen meer te laten spreken. Wit tenslotte is bedoeld voor de achtergrond of als kleur voor tekst met een donkere achtergrond. Het is mogelijk dat er afgeweken wordt van de voornoemde kleuren, maar dan wordt er wel geprobeerd om dicht in de buurt te blijven, bijvoorbeeld door te kiezen voor een lichtere variant door de kleur doorzichtig te maken. De achtergrond van onderstaande tekst is bijvoorbeeld een lichte vorm (#0052) van het originele blauw (#005f) waarbij de laatste positie van de verkorte hexdecimale kleurcode staat voor de mate transparantie.

Voorpagina CVR Magazine

Op de pagina van de Club werden de meest actuele artikelen in CVR Magazine getoond door middel van een zogenaamde slider. Het was al lang een wens om deze slider ook te tonen op de openingspagina van CVR Magazine. Dit is nu gerealiseerd. De slider is gebaseerd op de slider die onderdeel uitmaakt van het Materializecss framework. Het geheel wordt gestuurd door middel van javascipt/jquery:

1. De hoogte van het venster wordt bepaald en als deze groter is dan 500 pixels dan wordt de slider 90% van de hoogte van het venster.

   var hoogte = Math.max(500, $(window).height() * 0.9);

   Hierdoor zie je altijd dat er onderaan de slider nog andere artikelen getoond worden.
   Openingspagina op een mobiele telefoon
2. De menubalk (nav) wordt gedeeltelijk doorzichtig gemaakt. Hiertoe wordt eerst de class "white" weggehaald en vervolgens de achtergrond voorzien van een vulling die lineair verloopt van wit (rgb(255,255,255)) naar wit met een transparantie van 50% (rgba(255,255,255,0.5)). Hierdoor zie je de slider door de menubalk heen.

   var Opa = 0.5;
   var rgbaOpa = 'linear-gradient(rgb(255,255,255), rgba(255,255,255,'+Opa+'))';
   $('nav').removeClass("white").css("background", rgbaOpa);
   

3. Om te zorgen dat de menubalk weer ondoorzichtig wordt wanneer je voorbij de slider scrollt wordt de achtergrond bij het schrollen aangepast.

   $(window).scroll(function(){
    var rgbaOpa = Opa + ((1-Opa) * $(window).scrollTop() / (hoogte / 1.75));
    var rgbaCol = 'linear-gradient(rgba(255,255,255,1), rgba(255,255,255'+','+rgbaOpa+'))';
    $('nav').css('background', rgbaCol);
   });
   

De slider is te zien op alle tabbladen (Nieuw, Trending en Willekeurig). Alleen op het tabblad "Willekeurig" komen de artikelen, die getoond worden in de slider, niet als kaart onder de slider terug. Om te voorkomen dat er twee keer uitvraag wordt gedaan op de database wordt in PHP dezelfde lijst twee keer gebruikt:

$sql = "SELECT * FROM Tabel ORDER BY RAND() LIMIT 30";
$resultaat = mysqli_query($link, $sql);

$rijen = array();
while ($rij = mysqli_fetch_assoc($resultaat)) array_push($rijen, $rij);

$t = 0;
foreach ($rijen as $item) {
 if ($t++ > $limit) break;
 // Vul slide van slider
}

$t = 0;
foreach ($rijen as $item) {
 if ($t++ <= $limit) continue;
 // Geef kaart weer
}

Mei 2019

Vensterbrede afbeeldingen

Wanneer een artikel op de mobiele telefoon bekeken werd dan werden de afbeeldingen getoond met dezelfde marges als de tekst, maar marges zijn voor afbeeldingen niet nodig en hierdoor worden ze te klein afgebeeld. Om volledige breedte van het venster te kunnen gebruiken moest de padding van de element (div), waarin het artikel staat, aangepast worden. De padding is de marge binnen een element. Deze was tot nu toe 4% van de breedte van het element. Wanneer je echter (bijvoorbeeld) een afbeelding in een element breder wil maken dan de tekst, kun je niet met percentages werken omdat deze percentages verwijzen naar het element waarop ze betrekking hebben. Vandaar dat bij weergave op mobiele telefoons nu gekozen is voor een vaste padding van 1,5em (1,5 keer de grootte van de tekst) voor het element "Content". Hierdoor worden de marges van de afbeelding -1,5em. Vervolgens moet de breedte (width) van de afbeelding net zo breed gemaakt worden als het venster. Een breedte van 100% is niet voldoende omdat de afbeelding dan net zo breed worden als de tekst. Daarom moet de breedte door middel van een berekening bepaald worden. Dit doe je door de "calc" functie oftewel:

width: calc(100% + (2 * 1.5em));

Juni

Mediatheek

Wanneer je item (film, serie, documantaire of boek) opende in de mediatheek dan kreeg je een grijze pagina te zien met een trailer (indien beschikbaar), een afbeelding van de omslag/hoes en een korte beschrijving. Hier zijn een paar elementen aan toegevoegd. Om te beginnen is er een knop toegevoegd waarmee je direct de film of serie kunt starten wanneer deze beschikbaar is op Netflix of NPO Start.

.playbutton {
 display: inline-block;
 position: relative;
 border-radius: 50px;
 padding: 18px 24px 18px 3em;
 color: rgb(var(--wit));
 background-color: rgb(var(--lichtblauw));
 line-height: 1em;
 transition: all .1s ease-in;
}
.playbutton:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 10px -10px rgba(0,0,0,.7), 0 20px 30px -10px rgba(0,0,0,.5);
}

De achtergrond het middelste gedeelte van de omslag/hoes wordt achter de trailer getoond. Deze afbeelding vervaagt na 500px naar het grijs van de rest van de achtergrond.
De omslag/hoes is voorzien van een schaduw en een rand aan de linker- en bovenkant. Deze rand is 1 pixel groot en heeft de kleur wit en een doorzichtigheid van 10%.

 border-radius: 0.5em;
 border-top: 1px solid rgba(var(--wit),0.1);
 border-left: 1px solid rgba(var(--wit),0.1);

Ten slotte is het kader van de review aangepast. Deze viel een beetje uit de toon en is nu wat subtieler omdat dit kader bestaat uit een lichtblauwe rand en de kleur van de achtergrond overneemt.

 padding: 0.6em 1em;
 background-color: inherit !important;
 border: 1px solid rgba(var(--lichtblauw), 0.8);
 border-radius: 0.5em;

Juli 2019

Extra uitleg

Soms is er meer over een onderwerp te vertellen, maar is deze informatie niet noodzakelijk voor de strekking voor het artikel zelf. Deze informatie wordt dan vaak om de leesbaarheid te bevorderen weggelaten en dat is zonde. Vandaar dat er nieuwe optie is toegevoegd waardoor deze extra informatie zichtbaar gemaakt kan worden wanneer de lezer dat wil. Telkens wanneer je een icoon met een "i" zichtbaar wordt, dan kan meer informatie zichtbaar gemaakt worden door erop te klikken, zoals hieronder te zien is: Deze knop werkt met behulp van JavaScript en jQuery:

$('.vraag').on('click', function() {
 id = $(this).text();
 var e = document.getElementById(id);
 if(e.style.display == 'block') e.style.display = 'none';
 else e.style.display = 'block';
 });

Wanneer op een hyperlink met de class "vraag" wordt geklikt dan wordt gezocht naar een element dat een id heeft die overeenkomst met de tekst in de hyperlink. Vervolgens wordt gekeken of dit element zichtbaar is. Is dit niet het geval dan wordt deze zichtbaar gemaakt. Is het element wel zichtbaar dan wordt het weer onzichtbaar gemaakt.

Augustus 2019

De digitale assistent

Deze website is in de afgelopen jaren flink gegroeid. Het aantal artikelen in CVR Magazine groeit gestaag, de onderwerpen zijn divers en ook de andere secties (zoals bijvoorbeeld de mediatheek) groeien dagelijks. Daardoor werd het tijd om een bezoeker te helpen om zijn of haar weg te vinden op de site. Hiervoor is de digitale assistent bedacht. Deze assistent kun je open met een knop die rechtsonder op elke pagina staat. Op deze plek stond voorheen een knop waarmee je naar boven kunt scrollen. Deze is er nog steeds, maar wordt nu pas zichtbaar wanneer je 1.500px naar beneden ben gescrollt. Dit wordt gedaan met javascript:

$(window).scroll(function () {
 if ($(this).scrollTop() > 1500) {$('.scroll-top').fadeIn() ;} 
 else {$('.scroll-top').fadeOut();}
});

Het idee was om iets soortgelijks te maken aan de Assistent van Google, maar dan zonder spraakherkenning en volgens een script.
De lay-out is gebaseerd op Whatsapp en bestaat uit tekstballonnen, waarbij de blauwe ballonnen van de assistent (css: ballon ik) zijn en de lichtgrijze ballonnen (css: ballon jij) geven de mogelijke antwoorden van de bezoeker weer. De CSS voor de ballonnen zijn als volgt:

.assistant .ballon {
 padding: 1em;
 margin: 0 0 0.5em 0;
 border-radius: 0.6em;
 background-color: rgb(var(--wit));
 color: rgb(var(--grijs));
 width: 90%;
 display: block;
 opacity: 0;
}

.assistant .ballon.ik {
 background-color: rgb(var(--lichtblauw));
 color: rgb(var(--wit));
 position: relative;
}

.assistant .ballon.ik:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-left: 0.8em solid transparent;
 border-right: 0.8em solid rgb(var(--lichtblauw));
 border-top: 0.8em solid rgb(var(--lichtblauw));
 border-bottom: 0.8em solid transparent;
 top: 0;
 left: -1.1em;
}

.assistant .ballon.jij {
 margin-left: auto;
 margin-right: 0;
 position: relative;
 background-color: rgb(var(--heellichtgrijs));
}

.assistant .ballon.jij:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-right: 0.8em solid transparent;
 border-left: 0.8em solid rgb(var(--heellichtgrijs));
 border-top: 0.8em solid rgb(var(--heellichtgrijs));
 border-bottom: 0.8em solid transparent;
 top: 0;
 right: -1.1em;
}

Om ervoor te zorgen dat een verzameling ballonnen pas zichtbaar worden wanneer dit nodig is wordt het volgende javascript gebruikt:

function ass_ballon(id, elem) {
 var page = $("html, body");
 page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
 page.stop();
 });
 if (elem) {
 var t = 0;
 var idP = $(elem).parents('.vervolg').attr('id');
 $('.vervolg').each(function(){ 
 if ($(this).attr('id') == idP) {t = 1;}
 if (t == 2) {$(this).css('display', 'none')};
 t = 2; 
 })
 }
 $(id).css('display', 'block');
 $(id + " .ballon").each(function(i){
 var el = $(this);
 el.css('opacity', 0);
 if (el.css('opacity') == 0) {
 setTimeout(function(){
 el.animate({opacity: 1}, {duration: 1800, queue: false});
 },i*2000);
 }
 page.animate({scrollTop: el.offset().top - 250}, 2200, 'easeOutQuad');
 });
 }

Dit script zoekt naar een DIV met de "id" die is opgegeven bij de functie. Als eerste wordt deze DIV zichtbaar gemaakt. Vervolgens wordt elke "ballon" binnen deze DIV zichtbaar gemaakt en scroll je naar deze ballon.

Contactformulier

Met de komst van de digitale assistent is ook het contactformulier aangepast, zodat deze naadloos op de assistent aansluit. Ook "weet" de assistent nu vanaf welk artikel je komt en vraagt daarom eerst of je wilt reageren op dat artikel of dat je iets anders wilt doen.

April 2020

Mediatheek

De Mediatheek heeft in de afgelopen jaren vele gedaanteverwisselingen doorgemaakt. Dit komt omdat deze sectie heel hard gegroeid is tot meer dan 1.250 objecten zoals films, boeken, documentaires en muziekalbums. In het begin was het niet nodig om in deze objecten te filteren, maar met zoveel objecten is dat wel zo makkelijk.

Wanneer je wilt filteren (lees zoeken) dan moet je wel iets te filteren hebben. Ik dacht daarbij aan filteren op:

• Beoordeling
• Speelduur/afleveringen
• Datum van uitgifte
• Wel of geen recensie geschreven
• Schrijver
• Regisseur
• Artiest
• Acteur
• Genre

Vooral bij de laatste categorieën kan het voorkomen dat een object er meer dan één heeft. Een film heeft doorgaans maar één regisseur en een boek maar één schrijver (uitzonderingen daargelaten), maar in een film spelen (weer uitzonderingen daargelaten) meer dan één acteurs en vaak kun je een film of boek indelen in meer dan één genre. Dit vroeg in de database om een aanpassing omdat tot nu toe er maar één schrijver, regisseur, artiest, acteur of genre aan een object gekoppeld kon worden. Gelukkig hebben we een relationele database en kunnen we tabellen aan elkaar koppelen. Om te beginnen moesten we beginnen om te bepalen hoeveel tabellen we nodig hebben. Dit proces heet datanormalisatie. Zoals gezegd heeft een film meerdere acteurs. Maar een persoon kan zowel acteur als regisseur zijn, denk aan Woody Allen en Clint Eastwood. Aan een film kun je dus meerdere personen koppelen die verschillende rollen kunnen vervullen. Schematisch ziet dat er als volgt uit: Toen de tabellen ingericht waren moest er op de website gefilterd kunnen worden. Hiervoor was een apart scherm nodig en om te zorgen dat alles lekker verloopt wordt dit scherm geheel via javascript gestuurd. Hiermee ben je veel flexibeler om hetgeen getoond wordt dynamisch aan te passen. Het scherm werd een standaard modal uit de bilbiotheek van Materializecss.com met de aanpassing dat het scherm 100% van het beeld beslaat. Hier werd rechtsboven een sluitknop aan toegevoegd en onderaan twee knoppen. De eerste om de geplaatste filters op te heffen en de tweede om het resultaten te tonen. De laatste knop sluit eigenlijk alleen het scherm waardoor de resultaten (die ondertussen op de achtergrond geladen zijn) laat zien.

augustus 2020

Kleuren

In maart 2019 zijn de kleuren in de huisstijl aangepast aan de kleuren zoals Martini Racing deze gebruikt op haar raceauto's. Van deze kleuren is echter de kleur lichtblauw niet echt passend bij de stijl van CVR Magazine. Vandaar dat besloten is om de kleur lichtblauw te vervangen door een goudkleur. De verzameling kleuren is nu:

.rood {background-color: var(--rood) !important}
.wit {background-color: var(--wit) !important}
.blauw {background-color: var(--blauw) !important}
.geel {background-color: var(--geel) !important}
.groen {background-color: var(--groen) !important}
.grijs {background-color: var(--grijs) !important}
.lichtgrijs {background-color: var(--lichtgrijs) !important}
.heellichtgrijs {background-color: rgb(var(--heellichtgrijs)) !important}

Januari 2021

Films op de landingspagina

De landingspagina is uitgebreid. Naast de meest actuele artikelen worden ook de films uit de mediatheek getoond die de komende twee dagen op TV te zien zijn en daaronder staat een korte uitleg over de website.

Afbeelding op volle breedte

Alle afbeeldingen vensterbreed weergeven zoals in mei 2019 werd geïntroduceerd is weer van de baan. De manier waarop dat gebeurde had niet altijd het juiste effect. Afbeeldingen landscape formaat werden te groot en sommige afbeeldingen horen nu eenmaal niet vensterbreed weergegeven te worden. Daarom wordt het alleen nog selectief toegepast en dan bij elke venstergrootte. De manier waarop dit gerealiseerd wordt is ook aangepast. Eerst werd alleen de margin links en rechts aangepast met een negatieve waarde, waarna de breedte van de afbeelding werd gesteld op 100% plus twee keer de marge van de tekst. Dit lukt niet altijd. Daarom wordt nu de volgende techniek gebruikt:

.full-width {
 width: 100vw;
 position: relative;
 display: block;
 left: 50%;
 right: 50%;
 margin: 3rem -50vw 2rem -50vw;
}

April 2021

Menubalk

In de menubalk stond al een tijdje "CVR Magazine" of de naam van de pagina waar je was. Deze titel was links uitgelijnd. Dit is aangepast. Vanaf nu staat de titel in hoofdletters (uppercase) en gecentreerd op de pagina. De letters staan iets verder uit elkaar dan normaal. Daarnaast is de slider verdwenen en vervangen door één kaart waarin het meest actuele artikel prominent getoond wordt. De slider is alleen nog te zien op de pagina met willekeurige artikelen, maar dan ook gestileerd als kaart zodat alle pagina's visueel gelijk zijn.

De leeszaal

De kaarten in de leeszaal zijn al een tijdje vierkant. Om wat meer dynamiek in de pagina te krijgen is de grootte van de kaarten afwisselend geworden. De eerste kaart is 6 kolommen breed, terwijl een normale kaart 3 kolommen breed is. Verder is elke 7e kaart 9 kolommen breed. Op een mobiele telefoon werken vierkante kaarten minder goed, vandaar dat daar de hoogte geen 100% van de breedte is, maar 56% (16:9 verhouding).

Melkglas

Het menu dat vanaf links inschuift is aangepast. Nu is de achtergrond doorzichtig en hetgeen erachter zit wordt wazig weergegeven alsof het melkglas is. Dit effect wordt bereikt door twee elementen aan de CSS van het menu toe te voegen:

background: transparent;
backdrop-filter: blur(24px);

Ook de afbeelding van het kasteel onderaan de pagina is wazig gemaakt met CSS zodat het lijkt alsof deze afbeelding meer op de achtergrond staat:

filter: blur(2px);

Mei 2021

Nieuwe tijdlijn

Er was al een tijdje een nieuwe verticale tijdlijn die een opsomming die chronologische gebeurtenissen met elkaar verbond. Deze tijdlijn wordt gemaakt in CSS met de class "tijdlijn" en wordt toegepast op het UL-tag.

.tijdlijn {
 margin: 24px 0;
 padding: 10px 0;
 list-style: none;
 position: relative;
} 
 
.tijdlijn:before {
 content: '';
 position: absolute;
 top: 0px;
 bottom: 0px;
 width: 0px;
 border-left: 1px dotted rgba(var(--rood), 1);
 left: -75px;
 margin-left: 0;
}
 
.tijdlijn > li {
 margin: 0 0 32px 0;
}

Deze tijdlijn werkt vooral bij lijsten waarbij er per lijst-item weinig regels tekst zijn. Daarom is er nu een tweede tijdlijn ontworpen die beter past bij lijst-items die langer zijn. Omdat dit bij kleinere schermen niet werkt (te druk) wordt deze opmaak alleen getoond bij schermen vanaf 1.000 pixel breed.

@media only screen and (min-width: 1000px) {
.tijdlijn2 {
 margin: 24px 0 24px 0;
 list-style: none;
 position: relative;
} 

.tijdlijn2 > li, span.data-tag {
 display: block;
 position: relative;
 margin: 4em 0;
 padding: 16px;
 padding-left: 40px;
 position: relative;
 color: rgb(var(--grijs));
 border: none;
 border-radius: 5px;
 box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);
}

.tijdlijn2 h3, span.data-tag h3 {
 border-bottom: 1px dotted rgb(var(--lichtgrijs));
 padding: 0 0 0.3em 0;
}

.tijdlijn2 > li:before {
 width: 2.4em;
 height: 2.4em;
 position: absolute;
 content: " ";
 background: rgb(var(--wit));
 border-radius: 50%;
 top: 1em;
 left: -3.2em;
 border: solid 0.4em rgb(var(--rood));
 box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
 z-index: 2;
}

.tijdlijn2 > li:after {
 width: 1px;
 height: 33%;
 min-height: 7em;
 position: absolute;
 content: " ";
 border-radius: 2px;
 top: -1em;
 left: -1.95em;
 z-index: 1;
 background: linear-gradient(rgba(var(--rood),0), rgb(var(--rood)) 4em, rgba(var(--rood),0));
}
}

Deze opmaak, maar dan zonder de markering links van een lijst-item wordt nu ook toegepast op artikelen die bestaan uit meerdere opzichzelfstaande lemma's.

Animatie in kaarten

De kaarten van de artikelen zijn kleiner geworden. Ze laten nu alleen de afbeelding en titel zien. Dit was al in de mobiele versie zo, maar nu ook op grote schermen. Wanneer je er met de muis over een kaart gaat wordt de subtekst zichtbaar doordat de afbeelding naar boven schuift. Deze animatie wordt volledig met CSS gedaan:

.card {
 height: 17.7rem;
}
 
.card .CardContainer {
 position: relative;
 top: 0rem;
 transition: top 0.8s cubic-bezier(0.25, 0.1, 0.52, 1) 0s;
}
 
.card:hover .CardContainer {
 top: -7.2rem;
}

.card .sub-text {
 opacity: 0;
 transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.52, 1) 0.2s;
 }
 
.card:hover .sub-text {
 opacity: 1;
}

Augustus 2021

Typografie

Toen Material Design door Google werd geïntroduceerd in 2014, werd dit ook op scvr.nl de norm en dit gold ook voor de . Als basislettertype werd Roboto gekozen. Dit lettertype gebruikte Google namelijk ook als haar standaard-lettertype voor android, apps en websites. Roboto is echter een lettertype. Dit in tegenstelling tot de letters in het logo van de Club Vin Rouge, dat is gemaakt met het lettertype Garamond dat schreven heeft. Oorspronkelijk was het idee om Garamond ook te gebruiken voor de titel van een pagina en de koppen in de teksten. Dit werkte echter om verschillende redenen niet. Vandaar dat er gekozen is voor een alternatief lettertype en dit werd gevonden op de website van Aston Martin. Hier gebruikt men het lettertype Optima voor al haar teksten (inclusief het beeldmerk). Helaas is dit lettertype (net als Garamond) een commercieel lettertype en daarom is uitgeweken naar het lettertype Tenor Sans, dat er nagenoeg hetzelfde uitziet als Optima. Om de website wat meer een eigen stijl te geven hebben we nu afscheid genomen van Roboto en dit lettertype vervangen voor Source Sans Pro dat is ontwikkeld door Adobe. Source Sans Pro is net iets anders dan Roboto en geeft de site een meer eigen karakter. Tegelijkertijd met de introductie van Source Sans is ook de typografie aangepast op de volgende punten:

1. Een artikel bevat nu een H1 tag waarin de titel van het artikel vermeld staat. Voorheen was werd de title via een DIV opgemaakt. Door het gebruik van een H1 is het artikel ook beter te "lezen" voor zoekmachines.
2. De regelafstand van de basistekst is iets groter geworden (1.6em)
3. Er is een beetje witruimte aangebracht tussen de letters (0.02em)
4. De headers (H2, H3 en H4) zijn kleiner geworden en zijn nu uitgevoerd in Tenor Sans in plaats van het standaard lettertype.

December 2021

Een nieuwe lijst

Het is altijd weer een uitdaging om een opsomming aantrekkelijk te presenteren. Zo werden de restaurants op de pagina Top restaurants in de omgeving van Mierlo tot voor kort weergegeven in een tabel waarbij verticaal de restaurants en horizontaal per jaar het aantal michelinsterren werden getoond. Dit ging een aantal jaar goed, maar nu er data van negen jaar of meer getoond moet worden, passen al deze kolommen niet meer naast elkaar op één scherm. Er moest dus iets nieuws komen. En dat is onderstaande lijst geworden. De opmaak is geheel met CSS gemaakt en met de HTML-elementen ul en li. Om te beginnen wordt de Undefined-List (ul) opgemaakt:

ul.list3 {
 margin: 20px auto;
 padding: 20px;
}

Daarna de kaart zelf die in een List-Item (li) zit. Speciaal hieraan is dat deze kaart een maximale breedte (max-width) heeft om ruimte te maken voor de lijn die er omheen slingert.

ul.list3 > li {
 position: relative;
 width: 560px;
 max-width: calc(100% - 85px);
 min-width: 250px;
 padding: 1em 1.4em;
 border: none;
 border-radius: 5px;
 box-shadow: 
 0 0px 0px 0 rgb(0 0 0 / 14%), 
 0 8px 17px 0 rgb(0 0 0 / 20%), 
 0 6px 20px 0 rgb(0 0 0 / 19%);
 z-index: 1;
}

Vervolgens moet de kaart om en om links en rechts ruimte laten zodat daar de lijn kan lopen.

ul.list3 > li:nth-child(odd) {
 margin: 50px 0 100px 50px;
}

ul.list3 > li:nth-child(even) {
 margin: 50px 50px 100px 50px;
}

Nu is het tijd om de slingerlijn te maken die links begint, dan onder de kaart naar rechts gaat en dan rechts langs de volgende kaart loopt.

ul.list3 > li::before {
 content: "";
 position: absolute;
 width: calc(50% + 50px);
 border: solid rgb(var(--lichtgrijs));
 z-index: -1;
}

ul.list3 > li:nth-child(odd)::before {
 left: -50px;
 top: -50px;
 bottom: -55px;
 border-width: 5px 0 5px 5px;
 border-radius: 50px 0 0 50px;
}

ul.list3 > li:nth-child(even)::before {
 right: -50px;
 top: -50px;
 bottom: -55px;
 border-width: 5px 5px 5px 0;
 border-radius: 0 50px 50px 0;
}

ul.list3 > li:first-child::before {
 border-top: 0;
 border-top-left-radius: 0;
}

ul.list3 > li:last-child:nth-child(odd)::before {
 border-bottom: 0;
 border-bottom-left-radius: 0;
}

ul.list3 > li:last-child:nth-child(even)::before {
 border-bottom: 0;
 border-bottom-right-radius: 0;
}

Tot slot nog om en om links en rechts een circel om per kaart een markering per kaart te plaatsen ter hoogte van de kop (h3).

ul.list3 > li h3::before {
 content: "";
 position: absolute;
 width: 24px;
 height: 24px;
 background: rgb(var(--wit));
 border-radius: 24px;
 border: 5px solid rgb(var(--rood));
}

ul.list3 > li:nth-child(odd) h3::before {
 left: -60px;
}

ul.list3 > li:nth-child(even) h3::before {
 right: -60px;
}

ul.list3 > li:nth-child(even) h3 {
 text-align: right;
}

onclick="window.print();return false;"

@media print {
 @page { 
 size: auto;
 margin: 20mm 10mm 10mm 10mm; 
 } 
 .NietAfdrukken, header, footer, .fixed-action-btn, .footer, .video-container, .video-container + .bijschrift {
 display: none !important;
 }
.locaties h3 {
 page-break-before: always;
 }
}

.video-container + .bijschrift { display: none; }

var viewport = '.ShowOnScroll';
$(document).ready(function(){
 $(viewport).css({'opacity': '0', 'top': '100px', 'position': 'relative'});
 showImages(viewport);
});

$(window).scroll(function() {
 showImages(viewport);
});
 
function showImages(el) {
 var windowHeight = $(window).height();
 $(el).each(function(){
 var thisPos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (topOfWindow + windowHeight - 100 > thisPos ) {
 $(this).css({
 'opacity': '1', 
 'top': '0', 
 'transition': 'opacity 0.8s ease-out, top 0.8s ease-in-out'
 });
 }
 });
}

.CardContainerGroot::before {
 content: "";
 width: 100%;
 position: absolute;
 bottom: 0;
 height: 12vh;
 background: linear-gradient(
 to bottom,
 rgba(var(--heellichtgrijs),0.000) 0%,
 rgba(var(--heellichtgrijs),0.013) 5.50%,
 rgba(var(--heellichtgrijs),0.049) 11.4%,
 rgba(var(--heellichtgrijs),0.104) 17.4%,
 rgba(var(--heellichtgrijs),0.175) 23.7%,
 rgba(var(--heellichtgrijs),0.259) 30.1%,
 rgba(var(--heellichtgrijs),0.352) 36.8%,
 rgba(var(--heellichtgrijs),0.450) 43.6%,
 rgba(var(--heellichtgrijs),0.550) 50.5%,
 rgba(var(--heellichtgrijs),0.648) 57.5%,
 rgba(var(--heellichtgrijs),0.741) 64.5%,
 rgba(var(--heellichtgrijs),0.825) 71.6%,
 rgba(var(--heellichtgrijs),0.896) 78.8%,
 rgba(var(--heellichtgrijs),0.951) 85.9%,
 rgba(var(--heellichtgrijs),0.987) 93.0%,
 rgba(var(--heellichtgrijs),1.000) 100%);
 display: block;
 left: 0;
 z-index: 3;
 }