feat: more variables for code display

Author: peterpeterparker

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.scss

@@ -10,7 +10,9 @@ div.deckgo-code-container {
   overflow-y: auto;
   width: 100%;
 
-  margin-bottom: var(--margin-bottom, 64px);
+  color: var(--code-color, inherit);
+
+  margin-bottom: var(--code-margin-bottom, 64px);
 
   transform-origin: bottom left;
   transition: all .2s ease-in-out;
@@ -20,6 +22,8 @@ div.deckgo-code-container {
     white-space: pre-wrap;
     overflow-y: scroll;
 
+    font-size: var(--code-font-size);
+
     div:empty {
       min-height: 1rem;
     }
@@ -31,6 +35,10 @@ div.deckgo-code-container {
   }
 }
 
+::slotted([slot="title"]) {
+  transition: opacity 0.5s ease-in;
+}
+
 @media print {
   div.deckgo-slide {
     height: 100%;

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -86,6 +86,11 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
         container.style.setProperty('--zoom-code', zoom ? '2' : '1');
       }
 
+      const title: HTMLElement = this.el.querySelector('[slot=\'title\']');
+      if (title) {
+        title.style.setProperty('opacity', zoom ? '0' : '1');
+      }
+
       resolve();
     });
   }