Merge pull request #857 from creativecommons/vocab-c950913

Update Vocabulary to c950913

Author: TimidRobot

assets/static/vocabulary/css/library-vars.css

@@ -2,7 +2,7 @@
 
 /* brand typsetting */
 @font-face {
-    font-family:"Roboto Condensed";
+    font-family:'Roboto Condensed';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -12,7 +12,7 @@
 }
 
 @font-face {
-    font-family:"Roboto Condensed";
+    font-family:'Roboto Condensed';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
@@ -22,41 +22,41 @@
 }
 
 @font-face {
-    font-family: "Source Sans Pro";
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url(../fonts/SourceSansPro-Regular.woff2) format("woff2"),
-        url(../fonts/SourceSansPro-Regular.woff) format("woff"),
-        url(../fonts/SourceSansPro-Regular.otf) format("opentype");
+    src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
+        url('../fonts/SourceSansPro-Regular.woff') format('woff'),
+        url('../fonts/SourceSansPro-Regular.otf') format('opentype');
  }
 
 @font-face {
-    font-family: "Source Sans Pro";
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
-    src: url(../fonts/SourceSansPro-SemiBold.woff2) format("woff2"),
-        url(../fonts/SourceSansPro-SemiBold.woff) format("woff"),
-        url(../fonts/SourceSansPro-SemiBold.otf) format("opentype");
+    src: url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
+        url('../fonts/SourceSansPro-SemiBold.woff') format('woff'),
+        url('../fonts/SourceSansPro-SemiBold.otf') format('opentype');
 }
 
 @font-face {
-    font-family: "Source Sans Pro";
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
-    src: url(../fonts/SourceSansPro-Bold.woff2) format("woff2"),
-        url(../fonts/SourceSansPro-Bold.woff) format("woff"),
-            url(../fonts/SourceSansPro-Bold.otf) format("opentype");
+    src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
+        url('../fonts/SourceSansPro-Bold.woff') format('woff'),
+            url('../fonts/SourceSansPro-Bold.otf') format('opentype');
 }
 
 @font-face {
-    font-family: "CC Accidenz Commons";
+    font-family: 'CC Accidenz Commons';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url(../fonts/CCAccidenzCommons-medium.otf) format("opentype");
+    src: url('../fonts/CCAccidenzCommons-medium.otf') format('opentype');
 }
 
 
@@ -82,7 +82,7 @@
     --vocabulary-neutral-color-dark-gray: #767676;
 
     /* brand typsetting */
-    --vocabulary-brand-typeset-nav-family: "Roboto Condensed";
+    --vocabulary-brand-typeset-nav-family: 'Roboto Condensed';
     --vocabulary-brand-typeset-nav-weight: bold;
     --vocabulary-brand-typeset-nav-color: #767676;
 
@@ -121,8 +121,9 @@
 
         a:before {
             --icon-sprite: var(--icon-name);
-            --icon-sprite- color: white;
+            --icon-sprite-color: white;
             --icon-sprite-size: .8em;
+        }
 
     */
 
@@ -132,27 +133,28 @@
      --icon-sprite-size: 1em;
 
      /* cc sprite names */
-     --cc-logo: url('./../svg/cc/icons/cc-icons.svg#cc-logo');
-     --cc-heart: url('./../svg/cc/icons/cc-icons.svg#cc-heart');
-     --cc-heart-filled: url('./../svg/cc/icons/cc-icons.svg#cc-heart-filled');
-     --cc-quote: url('./../svg/cc/icons/cc-icons.svg#cc-quote');
+     --cc-logo: url('../svg/cc/icons/cc-icons.svg#cc-logo');
+     --cc-heart: url('../svg/cc/icons/cc-icons.svg#cc-heart');
+     --cc-heart-filled: url('../svg/cc/icons/cc-icons.svg#cc-heart-filled');
+     --cc-quote: url('../svg/cc/icons/cc-icons.svg#cc-quote');
 
      /* font awesome sprite names */
-     --fa-angle-down: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-down');
-     --fa-angle-left: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-left');
-     --fa-angle-right: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-right');
-     --fa-angle-up: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-up');
-     --fa-globe: url('./../svg/font-awesome/icons/fa-icons.svg#fa-globe');
-     --fa-heart: url('./../svg/font-awesome/icons/fa-icons.svg#fa-heart');
-     --fa-info: url('./../svg/font-awesome/icons/fa-icons.svg#fa-info');
-     --fa-right-angle: url('./../svg/font-awesome/icons/fa-icons.svg#fa-right-angle');
-     --fa-search: url('./../svg/font-awesome/icons/fa-icons.svg#fa-search');
-
-     --fa-instagram: url('./../svg/font-awesome/icons/fa-icons.svg#fa-instagram');
-     --fa-twitter: url('./../svg/font-awesome/icons/fa-icons.svg#fa-twitter');
-     --fa-facebook: url('./../svg/font-awesome/icons/fa-icons.svg#fa-facebook');
-     --fa-linkedin: url('./../svg/font-awesome/icons/fa-icons.svg#fa-linkedin');
-     --fa-mastodon: url('./../svg/font-awesome/icons/fa-icons.svg#fa-mastodon');
+     --fa-angle-down: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-down');
+     --fa-angle-left: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-left');
+     --fa-angle-right: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-right');
+     --fa-angle-up: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-up');
+     --fa-globe: url('../svg/font-awesome/icons/fa-icons.svg#fa-globe');
+     --fa-heart: url('../svg/font-awesome/icons/fa-icons.svg#fa-heart');
+     --fa-info: url('../svg/font-awesome/icons/fa-icons.svg#fa-info');
+     --fa-right-angle: url('../svg/font-awesome/icons/fa-icons.svg#fa-right-angle');
+     --fa-search: url('../svg/font-awesome/icons/fa-icons.svg#fa-search');
+     --fa-close: url('../svg/font-awesome/icons/fa-icons.svg#fa-close');
+
+     --fa-bluesky: url('../svg/font-awesome/icons/fa-icons.svg#fa-bluesky');
+     --fa-facebook: url('../svg/font-awesome/icons/fa-icons.svg#fa-facebook');
+     --fa-instagram: url('../svg/font-awesome/icons/fa-icons.svg#fa-instagram');
+     --fa-linkedin: url('../svg/font-awesome/icons/fa-icons.svg#fa-linkedin');
+     --fa-mastodon: url('../svg/font-awesome/icons/fa-icons.svg#fa-mastodon');
 
 }
 
@@ -201,7 +203,7 @@ leaving room for semantic and accessible implementation choices  */
     --icon-sprite: var(--fa-angle-left);
 }
 
-.icon.fa-angle-right, .icon-attach.fa-angle-rignt:before {
+.icon.fa-angle-right, .icon-attach.fa-angle-right:before {
     --icon-sprite: var(--fa-angle-right);
 }
 
@@ -221,26 +223,30 @@ leaving room for semantic and accessible implementation choices  */
     --icon-sprite: var(--fa-info);
 }
 
-.icon.fa-right-angle, .icon-attach.fa-righ-angle:before {
-    --icon-sprite: var(--fa-heart);
+.icon.fa-right-angle, .icon-attach.fa-right-angle:before {
+    --icon-sprite: var(--fa-right-angle);
 }
 
 .icon.fa-search, .icon-attach.fa-search:before {
     --icon-sprite: var(--fa-search);
 }
 
-.icon-replace.fa-instagram {
-    --icon-sprite: var(--fa-instagram);
+.icon.fa-close, .icon-attach.fa-close:before {
+    --icon-sprite: var(--fa-close);
 }
 
-.icon-replace.fa-twitter {
-    --icon-sprite: var(--fa-twitter);
+.icon-replace.fa-bluesky {
+    --icon-sprite: var(--fa-bluesky);
 }
 
 .icon-replace.fa-facebook {
     --icon-sprite: var(--fa-facebook);
 }
 
+.icon-replace.fa-instagram {
+    --icon-sprite: var(--fa-instagram);
+}
+
 .icon-replace.fa-linkedin {
     --icon-sprite: var(--fa-linkedin);
 }
@@ -249,6 +255,10 @@ leaving room for semantic and accessible implementation choices  */
     --icon-sprite: var(--fa-mastodon);
 }
 
+.icon-replace.fa-close {
+    --icon-sprite: var(--fa-close);
+}
+
 
 /* attach an icon to an existing element with a :before */
 .icon-attach:before {