high def color section added

samples.html

@@ -34,6 +34,80 @@
       <h1>Code samples and pointers for the final assignment</h1>
     </header>
 
+    <!--high-def colors-->
+    <details id="sessie-colors">
+      <summary aria-label="meer over high-def colors"><h2>High-def colors</h2>
+        <p><strong>High-end schermen</strong> kunnen mooiere kleuren weergeven dan RGB kan definiëren. Gelukkig biedt CSS nu allerhande opties om die <strong>mooie kleuren</strong> wel te benutten.</p>
+      </summary>
+
+      <div class="details-content">
+
+        <h3>Samples</h3>
+        <ul>
+          <li><a href="https://codepen.io/shooft/live/RwOagqp">sRGB vs display-P3 kleuren</a> (CodePen)</li>
+          <li><a href="https://codepen.io/shooft/live/qBwZjwb">HSL vs okLCH kleuren</a> (CodePen)</li>
+          <li><a href="https://codepen.io/shooft/live/VwNaWVK">sRGB vs okLCH gradients</a> (CodePen)</li>
+        </ul>
+
+        <h3>Oefenen</h3>
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/OJGNgeQ">sRGB, display-p3, okLCH en meer</a>
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/QWPNgYB">sRGB, display-p3, okLCH en meer</a>
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/NWmNvKB">mooie gradients</a>
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/KKYzqjb">mooie gradients</a>
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/rNbezMa">color-mix()</a>
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/RwOaZwZ">color-mix()</a>
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/BaEKdYG">relative color syntax</a>
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/mdgPMMx">relative color syntax</a>
+          </li>
+        </ul>
+
+
+        <h3>Links</h3>
+        <ul>
+          <li><a href="https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide">High Definition CSS Color Guide</a> van Adam Argyle (developer.chrome.com)</li>
+          <li><a href="https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/">Display-P3 colors</a> van Nikita Vasilyev (WebKit)</li>
+          <li><a href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/">LCH: what, why, and how?</a> (van Lea Verou)</li>
+          <li><a href="https://oklch.com/">OKLCH Color Picker & Converter</a> van Evil Martians</li>
+          <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method#shorter">hue-interpolation-method</a> (MDN)</li>
+        </ul>
+
+        <ul>
+          <li><a href="https://developer.chrome.com/docs/css-ui/css-color-mix">color-mix()</a> van Adam Argyle (developer.chrome.com)</li>
+          <li><a href="https://developer.chrome.com/blog/css-relative-color-syntax">relative color syntax</a> van Adam Argyle (developer.chrome.com)</li>
+        </ul>
+
+        <h3>Schetsen</h3>
+        <p>Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:</p>
+        <p><img src="img/schets-worst-mes-pan.jpg" alt="worst, mes en pan in wording"></p>
+
+      </div>
+    </details>
+
     <!--:has()-->
     <details id="sessie-has">
       <summary aria-label="meer over :has()"><h2>:has()</h2>