jekyll(css): add experimental note

_includes/head.html

@@ -80,12 +80,15 @@
   by older browsers, and we don't optimize for those.
   {%- endcomment -%}
   <link rel="preload" as="font" href="https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Book.woff2"    type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Regular.woff2" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" as="font" href="/fonts/glyphicons-halflings-regular.woff2"       type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" as="font" href="/fonts/fontawesome-webfont.woff2?v=4.7.0"        type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/assets/fontawesome/webfonts/fa-brands-400.woff2"        type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/assets/fontawesome/webfonts/fa-regular-400.woff2"       type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/assets/fontawesome/webfonts/fa-solid-900.woff2"         type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/assets/fontawesome/webfonts/fa-v4compatibility.woff2"   type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Book.woff2"            type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Regular.woff2"         type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/glyphicons-halflings-regular.woff2"               type="font/woff2" crossorigin="anonymous">
 
-  <link rel="stylesheet" href="/css/font-awesome.min.css">
+  <link rel="stylesheet" href="/assets/fontawesome/css/all.min.css">
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/style.css" id="pagestyle">
 

_scss/_notes.scss

@@ -32,9 +32,12 @@ The available classes are:
     font-weight: 700;
     margin-top:  0;
 
+    // https://fontawesome.com/docs/web/setup/upgrade/pseudo-elements
     &::before {
-      font-family: FontAwesome;
-      content:     "#{$icon} \00a0";
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      font: var(--fa-font-solid);
+      content: "#{$icon} \00a0";
     }
   }
 
@@ -53,7 +56,7 @@ blockquote {
   body.night & {
     // DARK THEME
 
-    &:not(.important):not(.warning):not(.restricted) {
+    &:not(.important):not(.warning):not(.restricted):not(.experimental) {
       @include notification(
         $bg-color: $dark-palette-blue-200,
         $header-color: $white-0,
@@ -88,12 +91,21 @@ blockquote {
         $icon: "\f135"
       );
     }
+
+    &.experimental {
+      @include notification(
+        $bg-color: $dark-palette-blue-200,
+        $header-color: $white-0,
+        $body-text-color: $white-0,
+        $icon: "\f492"
+      );
+    }
   }
 
   body:not(.night) & {
     // LIGHT THEME
 
-    &:not(.important):not(.warning):not(.restricted) {
+    &:not(.important):not(.warning):not(.restricted):not(.experimental) {
       @include notification(
         $bg-color: $light-palette-blue-100,
         $header-color: $light-palette-blue-500,
@@ -128,6 +140,15 @@ blockquote {
         $icon: "\f135"
       );
     }
+
+    &.experimental {
+      @include notification(
+        $bg-color: $light-palette-blue-100,
+        $header-color: $light-palette-blue-500,
+        $body-text-color: inherit,
+        $icon: "\f492"
+      );
+    }
   }
 }