hotfix: fix mermaid.js diagrams, closes #4640

assets/styles/layouts/_api-overrides.scss

@@ -2,7 +2,7 @@
 @import "tools/fonts";
 
 // Fonts
-$rubik: 'Rubik', sans-serif;
+$proxima: 'Proxima Nova', sans-serif;
 $code: 'IBM Plex Mono', monospace;;
 
 // Font weights
@@ -44,7 +44,7 @@ $bold: 700;
 //////////////////////////////// InfluxDB Header ///////////////////////////////
 
 #influx-header {
-  font-family: $rubik;
+  font-family: $proxima;
   padding: 10px ;
   display: flex;
   align-items: center;
@@ -98,7 +98,7 @@ $bold: 700;
 .cjtbAK {
   h1,h2,h3,h4,h5,h6,
   p,li,th,td {
-    font-family: $rubik !important;
+    font-family: $proxima !important;
   }
 }
 
@@ -125,7 +125,7 @@ $bold: 700;
   color: $g20-white;
   border: none;
   border-radius: 3px;
-  font-family: $rubik;
+  font-family: $proxima;
   font-size: .85rem;
   font-weight: $medium;
   transition: background-color .2s;
@@ -203,7 +203,7 @@ $bold: 700;
 
 // List item text
 .SmuWE, .gcUzvG, .bbViyS, .sc-hrWEMg label {
-  font-family: $rubik !important;
+  font-family: $proxima !important;
 }
 
 .fyUykq {
@@ -230,7 +230,7 @@ $bold: 700;
 .dtUibw, .fLUKgj {
   background-color: $g2-kevlar;
   h3,h4,h5,h6 {
-    font-family: $rubik !important;
+    font-family: $proxima !important;
     font-weight: $medium !important;
   }
 }
@@ -259,7 +259,7 @@ $bold: 700;
 .hOczRB,
 .fRsrDc,
 .hPskZd {
-  font-family: $rubik;
+  font-family: $proxima;
   font-weight: $medium;
   letter-spacing: .04em;
   border-radius: 3px;
@@ -273,14 +273,14 @@ $bold: 700;
 // Content type block
 .gzAoUb {
   background-color: $g2-kevlar;
-  font-family: $rubik;
+  font-family: $proxima;
 }
 .iENVAs { font-family: $code; }
-.dpMbau { font-family: $rubik; }
+.dpMbau { font-family: $proxima; }
 
 // Code controls
 .fCJmC {
-  font-family: $rubik;
+  font-family: $proxima;
   span { border-radius: 3px; }
 }
 

assets/styles/layouts/article/_diagrams.scss

@@ -3,11 +3,11 @@
   color: $article-bg;
   margin: 3rem 0;
   transition: opacity .5s;
-
+  font-family: $proxima;
 
   .arrowheadPath, .arrowMarkerPath { fill: $diagram-arrow !important; }
   .edgePath .path, .flowchart-link { stroke: $diagram-arrow !important; }
-  .label { color: $article-text !important; }
+  .label, .nodeLabel { color: $article-text !important; }
   .cluster-label .nodeLabel {
     color: $article-code !important;
   }
@@ -41,4 +41,8 @@
       stroke: none !important;
     }
   }
+
+  &[data-processed="true"] {
+    opacity: 1;
+  }
 }

assets/styles/layouts/article/_keybinding.scss

@@ -1,8 +1,8 @@
-$osxFont: -apple-system, BlinkMacSystemFont, $rubik, 'Helvetica Neue', Arial, sans-serif;
+$osxFont: -apple-system, BlinkMacSystemFont, $proxima, 'Helvetica Neue', Arial, sans-serif;
 
 .keybinding {
-  font-family: $rubik;
-  code { font-family: $rubik; }
+  font-family: $proxima;
+  code { font-family: $proxima; }
   &.osx code {font-family: $osxFont;}
   code.osx {font-family: $osxFont;}
 }

assets/styles/layouts/article/_svgs.scss

@@ -12,7 +12,7 @@ svg {
     max-width: 425px;
     .st0 {stroke: $article-text;}
     .st1 {fill: $article-text;}
-    .st2 {font-family: $rubik; font-weight: $medium}
+    .st2 {font-family: $proxima; font-weight: $medium}
   }
 
   //////////////////////////////// Join Diagram ////////////////////////////////

layouts/partials/footer/javascript.html

@@ -35,13 +35,9 @@
 <script>
   mermaid.initialize({
     startOnLoad:true,
-    mermaid: {
-      callback:function(id) {
-        $('.mermaid').css('opacity', 1);
-      }
-    },
+    
     themeVariables: {
-      fontFamily: "Rubik",
+      fontFamily: "Proxima Nova",
       fontSize: '18px',
     }
   })