safari bugje - transition of summary before and after - PE for now

cmda-minor-web · Mar 23, 2024 · f48fa95 · f48fa95
1 parent 7cc28ba
commit f48fa95
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/samples.html b/samples.html
@@ -36,7 +36,8 @@ <h1>Code samples and pointers for the final assignment</h1>
 
     <!--High-def colors-->
     <details id="sessie-colors">
-      <summary aria-label="meer over high-def colors"><h2>High-def colors</h2>
+      <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>
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -528,6 +528,8 @@ details[open] summary {
   width:auto;
 }
 
+
+
 summary * {
   grid-column-start:2;
 }
@@ -550,8 +552,10 @@ summary::after {
   aspect-ratio: 1;
   justify-self:start;
   align-self:center;
+  position:relative;
+  display:block;
 
-  translate:-50% 0;
+  translate:calc(-50% + .5px) 0;
 }
 
 summary::before {
@@ -574,7 +578,9 @@ summary::after {
 
 @media (prefers-reduced-motion:no-preference) {
   summary::before {
-    transition:scale .5s, rotate .4s .2s;
+    transition:
+      scale .5s, 
+      rotate .4s .2s;
   }
 
   summary::after {