is het niet handig om de svg een class te geven en deze in global css te plaatsen? Alle svg hebben de zelfde styling, het is maar 1 ding, maar deze herhalen we wel ver elke svg.
Er hoeft geen main om de nav heen. Deze main is onnodig [+] de background color moeten we op de body zeten. Bij alle pagina's is de background color het zelfde en over de hele pagina.
Hier worden linkjes buttens genoemd in de component lijs. Dit is niet handig omdat het geen buttons zijn. Het is makkelijker om iets te noemen wat het is dat wat het moet zijn.
[+] We herhalen de zelfde linkjes. We kunnen beter 1 link hebben en deze in de navigationbar inladen, en pas op de navigationbar de routing, link text & link icon aangeven
Ik zou de header en main boven en onder elkaar doen en er een div omheen. Ik denk dat dit logischer is omdat we de nav in de header plaatsen en de websitecontent in de main. Dit is nu een div met de class main-content, zo ik zou het logisch vinden om dit dan de main te maken.
Ik snap dat je de 2 div's wilt vermijden in de dom. Maar ik denk dat het duidelijker is als we het andersom doen.
De alt function werkt niet op een svg. er zijn andere opties om dit te doen, maar de vraag is moeten wij dit doen? Ik zeg nee, de icon geeft geen extra informatie naast de tekst die in de link staat. Nu word het home icon genoemd, maar de screen reader leest het dan voor als link > home icon home en/of link > Current Tournament Icon Current Tournament . Daarom zou ik zegen dat we het leeg laten en de screen reader het niet voorleest, dat is het enige wat word voorgelezen is de link teksten.
de a href zit nu strak om zijn content heen. Is het niet handiger om dit iets groter te maken zodat het makkelijker aanklikbaar is, zeker op een tablet? Dit kan je gemakkelijk met twee regels CSS doen. Ik zou gebruik maken van de breete en aspact ratio, dan gaat het her zo uit zien:
a{
display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;<--volgensmijdoetditnietsomdatdisplayflexhetallaatcentreerttext-decoration: none;font-family: var(--secondary-font-family);font-size: 0.8rem;font-weight: 500;color: var(--primary-font-color)/* Hier is de code die ik toevoeg */width: 100%;aspect-ratio: 1;}