added modes met style queries

samples.html

@@ -239,6 +239,79 @@ <h3>Schetsen</h3>
     </details>
 
 
+    <!--modes (style queries)-->
+    <details id="sessie-modes">
+      <summary aria-label="meer over container style queries"><h2>Modes (style queries)</h2>
+        <p><strong>Container style queries</strong> in combinatie met <strong>:has()</strong> en <strong>custom properties</strong> zouden weleens heel fijn kunnen worden. Voor nu alleen in Chromium :(</p>
+      </summary>
+
+      <div class="details-content">
+
+        <h3>Oefenen</h3>
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/OJGNKJz">Modes met :has()</a> (CodePen)
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/poByXmx">Modes met :has()</a> (CodePen)
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/NWmNQWz">Modes met style queries</a> (CodePen)
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/NWmNQWz">Modes met style queries</a> (CodePen)
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/bGJpXBj">Modes met style queries met named containers</a> (CodePen)
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/gOyrVrX">Modes met style queries met named containers</a> (CodePen)
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/yLrOmxL">Modes met style queries met and/or</a> (CodePen)
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/gOyrVgv">Modes met style queries met and/or</a> (CodePen)
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            Meetypen: <a href="https://codepen.io/shooft/pen/XWQKWjP">Modes met style queries voor color themes</a> (CodePen)
+          </li>
+          <li>
+            Uitwerking: <a href="https://codepen.io/shooft/pen/jORqgdg">Modes met style queries voor color themes</a> (CodePen)
+          </li>
+        </ul>
+
+
+        <h3>Links</h3>
+        <ul>
+          <li><a href="https://www.matuzo.at/blog/2023/100daysof-day80">Intro container style queries</a> van Manuel Matuzović</li>
+          <li><a href="https://ishadeed.com/article/css-container-style-queries/#introducing-style-queries">All About CSS Style Queries</a> van Ahmad Shadeed</li>
+        </ul>
+
+        <ul>
+          <li><a href="https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/">The Space Toggle Hack voor Modes </a> van Lea Verou (hacky en lelijk)</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>
+
+
     <!--Filters & Masks-->
     <details id="sessie-filters-and-masks">
       <summary aria-label="meer over filters & masks"><h2>Filters & Masks</h2>