Css - svennijhuis/Blok-tech GitHub Wiki

Structuur

Ik heb in het css bestand gebruik gemaakt van een structuur.

Ik heb dit geprobeerd te doen met hoofdkopjes:

/****************************/
/**** Font - size ***/
/****************************/

Subkopjes

/**** Input file button ***/

Light - dark mode

Om de website gebruiksvriendelijk te houden maken we gebruik van light en dark mode.

Dit doen we om gebruik te maken van :Root

:root {
   --color-background: #F8F4F1;
   --color-first: #000;
   --color-second: #fff;
   --color-button: #fa9ef7;
   --color-button-hover: #E5CAFD;
   --color-input: #F5F5F5;
}

@media (prefers-color-scheme: dark) {
  :root {
     --color-background: #000;
     --color-first: #fff;
     --color-second: #000;
     --color-button: #fa9ef7;
     --color-button-hover: #E5CAFD;
     --color-input: #F5F5F5;
  }
}

Font Family

Ik heb gebruik gemaakt van de font Newsreader dit font laad ik in via Google Fonts. Ik maak gebruik van Google Fonts, omdat het gratis is en makkelijk te verwerken is in je applicatie.

Om het te gebruiken heb je deze gegevens nodig: Zet je in je head

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

Zet je in je css

 * {
     font-family: 'Newsreader', serif;
   }

inladen

Mijn css wordt ingeladen in de head. De css wordt zo ingeladen:

  <link rel="stylesheet" href="./css/style.css">