browser stuff

index.html

@@ -35,16 +35,11 @@ <h1 lang="en">Minor Web Design & Development</h1>
       <h2>Introductie</h2>
       <p>De minor Web Design & Development is voor <strong>ontwerpers die coden</strong> én <strong>developers die ontwerpen</strong>. In de minor leer je interactieve toepassingen <strong>ontwerpen en bouwen met HTML, CSS en JavaScript</strong>.</p>
 
-      <p>In <strong>vijf vakken en twee projecten</strong> leer je alles over het web → browsers,
-        toegankelijkheid, <abbr title="application programming interface">API</abbr>’s, <abbr title="JavaScript Object Notation">JSON</abbr>, <span lang="en">rapid prototyping</span>, <abbr title="cascading style sheets">CSS</abbr>, <span lang="en">real-time</span>, experiment, <span lang="en">debuggen</span>, <abbr title="progressive enhancement">PE</abbr>, <span lang="en">responsive</span>, ontwerpen in de browser, microinteracties, documenteren …</p>
+      <p>In <strong>vijf vakken en twee projecten</strong> leer je alles over het web: browsers, toegankelijkheid, <abbr title="application programming interface">API</abbr>’s, <span lang="en">rapid prototyping</span>, <abbr title="JavaScript Object Notation">JSON</abbr>, <span lang="en">real-time</span>, experiment, <span lang="en">debuggen</span>, <abbr title="progressive enhancement">PE</abbr>, <span lang="en">responsive</span>, ontwerpen in de browser, <abbr title="cascading style sheets">CSS</abbr>, microinteracties, documenteren …</p>
 
-      <p>In de minor werken we in het studio-model. We hebben een eigen vaste ruimte waar je werkt en
-        aan lessen en colleges deelneemt. De werklast is full-time. <strong>Je werkt 40 uur per week in de
-          studio</strong>.</p>
+      <p>In de minor werken we in het studio-model. We hebben een eigen vaste ruimte waar je werkt en aan lessen en colleges deelneemt. De werklast is full-time. <strong>Je werkt 40 uur per week in de studio</strong>.</p>
 
-      <p>De minor is dé webdev en design minor van <a href="https://www.cmd-amsterdam.nl"><abbr
-            title="Communication and Multimedia Design">CMD</abbr></a> van de <a href="http://www.hva.nl">Hogeschool van
-          Amsterdam</a>.</p>
+      <p>De minor is dé webdev en design minor van <a href="https://www.cmd-amsterdam.nl"><abbr title="Communication and Multimedia Design">CMD</abbr></a> van de <a href="http://www.hva.nl">Hogeschool van Amsterdam</a>.</p>
 
       <aside>semester 2</aside>
     </section>
@@ -64,7 +59,7 @@ <h3>CSS to the Rescue</h3>
 
           <picture>
             <source 
-              srcset="images/css-maijla.webp, images/css-maijla-2x.webp 2x" 
+              srcset="images/css-maijla.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -87,7 +82,7 @@ <h3>Human Centred Design</h3>
 
           <picture>
             <source 
-              srcset="images/hcd-roshnie.webp, images/hcd-roshnie-2x.webp 2x" 
+              srcset="images/hcd-roshnie.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -110,7 +105,7 @@ <h3>Progressive Web App</h3>
 
           <picture>
             <source 
-              srcset="images/pwa-nina.webp, images/pwa-nina-2x.webp 2x" 
+              srcset="images/pwa-nina.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -133,7 +128,7 @@ <h3>Meesterproef</h3>
 
           <picture>
             <source 
-              srcset="images/mp-giovanni-en-first.webp, images/mp-giovanni-en-first.webp 2x" 
+              srcset="images/mp-giovanni-en-first.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -156,7 +151,7 @@ <h3>Web Apps from Scratch</h3>
 
           <picture>
             <source 
-              srcset="images/wafs-maijla.webp, images/wafs-maijla.webp 2x" 
+              srcset="images/wafs-maijla.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -179,7 +174,7 @@ <h3>CSS to the Rescue</h3>
 
           <picture>
             <source
-              srcset="images/css-ine.webp, images/css-ine.webp 2x"
+              srcset="images/css-ine.webp"
               type="image/webp"
               width="400"
               height="300"
@@ -203,7 +198,7 @@ <h3>Real-time Web</h3>
 
           <picture>
             <source 
-              srcset="images/rtw-melvin.webp, images/rtw-melvin.webp 2x" 
+              srcset="images/rtw-melvin.webp" 
               type="image/webp"
               width="400"
               height="300"
@@ -226,7 +221,7 @@ <h3>CSS to the Rescue</h3>
 
           <picture>
             <source 
-              srcset="images/css-stefan.webp, images/css-stefan.webp 2x"
+              srcset="images/css-stefan.webp"
               type="image/webp"
               width="400"
               height="300"
@@ -249,7 +244,7 @@ <h3>Browser Technologies</h3>
 
           <picture>
             <source 
-              srcset="images/bt-maijla.webp, images/bt-maijla.webp 2x"
+              srcset="images/bt-maijla.webp"
               type="image/webp"
               width="400"
               height="300"
@@ -271,7 +266,7 @@ <h3>Browser Technologies</h3>
             <a href="#ccs-maijla" aria-label="naar het CSS werk van Maijla.">
               <picture>
                 <source
-                  srcset="images/bt-maijla.webp"
+                  srcset="images/css-maijla.webp"
                   type="image/webp"
                   width="60"
                   height="45"

reviews/index.html

@@ -37,7 +37,7 @@ <h1 lang="en">Minor Web Design & Development</h1>
     <main>
       <section>
         <h2>
-          <strong>Vragen</strong>, <strong>opmerkingen</strong> en <strong>feedback van studenten</strong> over de minor (uit de jaarlijkse anonieme evaluatie).
+          <strong>Vragen</strong>, <strong>opmerkingen</strong> en <strong>feedback van studenten</strong> over de minor (uit de  anonieme evaluaties).
         </h2>
         <aside>semester 2</aside>
       </section>

static/styles/getinspired.css

@@ -91,7 +91,7 @@ section.agenda article div h4 {
   max-width: 20rem;
   margin:0;
 
-  font-size:clamp(1.25em, 6vw, 1.5em);
+  font-size:clamp(1.33em, 6vw, 1.5em);
   font-weight:300;
   line-height:1.2;
   text-wrap:balance;
@@ -107,6 +107,7 @@ section.agenda article div p {
 
 /* an activity - p - date, time and co - history */
 section.agenda article div p s {
+  display:block;
   opacity: .33;
   text-decoration-color:var(--wdd-accent);
 }
@@ -143,9 +144,9 @@ section.agenda article img {
     drop-shadow(-.3em -.3em var(--wdd-lime));
 
   filter:
-    drop-shadow(0 .4em .2em color-mix(in oklch, var(--wdd-blue), transparent 25%))
-    drop-shadow(.3em -.3em .2em color-mix(in oklch, var(--wdd-yellow), transparent 25%))
-    drop-shadow(-.3em -.3em .2em color-mix(in oklch, var(--wdd-lime), transparent 25%));
+    drop-shadow(0 .4em .2em color-mix(in oklab, var(--wdd-blue), transparent 25%))
+    drop-shadow(.3em -.3em .2em color-mix(in oklab, var(--wdd-yellow), transparent 25%))
+    drop-shadow(-.3em -.3em .2em color-mix(in oklab, var(--wdd-lime), transparent 25%));
 }
 
 @media (width > 27.5em) {
@@ -165,13 +166,17 @@ section.agenda article img {
     left:0;
   }
 
-  @media (any-pointer: fine) {
-    section.agenda article div p:nth-of-type(2) *:not(s):before {
-      filter: grayscale(1) contrast(.75);
-      transition:.2s;
-    }
+  section.agenda article div p:nth-of-type(2) s *:before {
+    filter: grayscale(1) contrast(.75);
   }
 
+  /* @media (any-pointer: fine) { */
+    /* section.agenda article div p:nth-of-type(2) *:not(s):before { */
+      /* filter: grayscale(1) contrast(.75); */
+      /* transition:.2s; */
+    /* } */
+  /* } */
+
   section.agenda article div p:nth-of-type(2) .date:before {
     content:"📆 ";
   }
@@ -189,8 +194,8 @@ section.agenda article img {
   }
 
   /* hover */
-  section.agenda article:hover div p:nth-of-type(2) *:before,
-  section.agenda article:focus-within div p:nth-of-type(2) *:before {
-    filter:unset;
-  }
+  /* section.agenda article:hover div p:nth-of-type(2) *:before, */
+  /* section.agenda article:focus-within div p:nth-of-type(2) *:before { */
+    /* filter:unset; */
+  /* } */
 }

static/styles/home.css

@@ -83,9 +83,21 @@
   padding:0 .25em .125em;
   font-size:1em;
   line-height:1.25em;
-  backdrop-filter: brightness(1.5) blur(1rem) contrast(.85);
+
+  background-color: var(--bg-body-trans);
+}
+
+@supports (backdrop-filter:blur(5px)) or (-webkit-backdrop-filter:blur(5px)) {
+  #impression > ul li h3,
+  #impression > ul li p {
+    background-color: transparent;
+    -webkit-backdrop-filter: brightness(1.5) blur(1rem) contrast(.85);
+    backdrop-filter: brightness(1.5) blur(1rem) contrast(.85);
+  }
 }
 
+
+
 @media screen and (prefers-color-scheme:dark) {
   #impression > ul li h3,
   #impression > ul li p {

static/styles/style.css

@@ -546,6 +546,8 @@ section:nth-of-type(1) aside {
 /* 3D translucent effect */
 @media (width > 75em) and (prefers-reduced-motion:no-preference) {
   section:nth-of-type(1) {
+    max-width:28em;
+
     transform: 
       perspective(32em) 
       translateX(-4em)

static/styles/sub.css

@@ -5,6 +5,8 @@ section:nth-of-type(1) {
 
 @media (width > 75em) and (prefers-reduced-motion:no-preference) {
   section:nth-of-type(1) {
+    max-width:28em;
+
     transform: 
       perspective(28em)  
       translateX(-2em) 

voorkennis/index.html

@@ -37,7 +37,7 @@ <h1 lang="en">Minor Web Design & Development</h1>
     <main>
       <section>
         <h2>
-          Lees hier wat je als start moet <strong><a href="#kunnen-kennen">kunnen en kennen</a></strong> voor de minor
+          Lees hier wat je als start moet <strong><a href="#kunnen-kennen">kunnen en kennen</a></strong>
           en hoe je je optimaal kunt <strong><a href="#voorbereiden">voorbereiden</a></strong>.
         </h2>
         <aside>semester 2</aside>