added vocabulary to web-project to align with design system

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

@@ -0,0 +1,297 @@
+/* library vars */
+
+/* brand typsetting */
+@font-face {
+    font-family:"Roboto Condensed";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:  url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
+        url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
+        url('../fonts/RobotoCondensed-Regular.otf') format('opentype');
+}
+
+@font-face {
+    font-family:"Roboto Condensed";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:  url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'),
+        url('../fonts/RobotoCondensed-Bold.woff') format('woff'),
+        url('../fonts/RobotoCondensed-Bold.otf') format('opentype');
+}
+
+@font-face {
+    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");
+ }
+
+@font-face {
+    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");
+}
+
+@font-face {
+    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");
+}
+
+@font-face {
+    font-family: "CC Accidenz Commons";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../fonts/CCAccidenzCommons-medium.otf) format("opentype");
+}
+
+
+:root {
+    /* brand colors */
+
+    --vocabulary-brand-color-gold: #FBD43C;
+    --vocabulary-brand-color-green: #008000;
+    --vocabulary-brand-color-tomato: #C74200;
+    --vocabulary-brand-color-turquoise: #05b5da;
+
+    --vocabulary-brand-color-soft-gold: #FEF6D8;
+
+    --vocabulary-brand-color-soft-green: #E0F5E0;
+    --vocabulary-brand-color-dark-green: #005d00;
+
+    --vocabulary-brand-color-soft-turquoise: #DFF6FC;
+
+    --vocabulary-brand-color-soft-tomato: #FEEDE9;
+    --vocabulary-brand-color-dark-tomato: #903101;
+
+    --vocabulary-neutral-color-lighter-gray: #F5F5F5;
+    --vocabulary-neutral-color-dark-gray: #767676;
+
+    /* brand typsetting */
+    --vocabulary-brand-typeset-nav-family: "Roboto Condensed";
+    --vocabulary-brand-typeset-nav-weight: bold;
+    --vocabulary-brand-typeset-nav-color: #767676;
+
+    /* whitespace */
+    --vocabulary-page-edges-space: 5%;
+
+
+
+    /* brand svg sprite sheet capabilities */
+
+    /* note: Be sure you utilize the icons in the way that is most
+    accessible and semantic.
+
+    This system allows for 5 icon implementation strategies:
+
+    1. Replace an empty <span> with an icon utterly
+        <span class="icon icon-name"></span>
+
+    2. Replace a readable element with an equivalent meaning icon
+        <a class="icon-replace icon-name">Mastodon</a>
+
+    3. Attach an icon to the :before of an element, leaving content
+        <a class="icon-attach icon-name">Mastodon</a>
+
+    4. Bypass the use of CSS classes, and put icon in content as an
+    <svg> with <use> fragment identifiers.
+         <svg>
+           <use href="/svg/cc/icons/cc-icons.svg#icon-name"></use>
+         </svg>
+
+    5. Target an element precisely with less extraneous "icon name classes",
+    using mostly CSS. (This could optionally be abstracted further to remove
+    the need for the .icon class entirely.)
+
+        <a class="icon">Mastodon</a>
+
+        a:before {
+            --icon-sprite: var(--icon-name);
+            --icon-sprite- color: white;
+            --icon-sprite-size: .8em;
+
+    */
+
+     /* set default icon sprite */
+     --icon-sprite: url('../svg/cc/icons/cc-icons.svg#cc-logo');
+     --icon-sprite-color: black;
+     --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');
+
+     /* 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');
+
+}
+
+/* establish svg sprite icon defaults */
+.icon {
+    display: inline-block;
+    /* min-width: 30px;
+    min-height: 30px; */
+    height: 1em;
+    width: 1em;
+
+    font-size: var(--icon-sprite-size);
+    background-color: var(--icon-sprite-color);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+
+    -webkit-mask-image: var(--icon-sprite);
+    mask-image: var(--icon-sprite);
+
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+/* customize a specific sprite via matching class on <span>
+with .icon, an element replaced with an icon using .icon-replace,
+or attaching an icon to an element :before using .icon-attach,
+leaving room for semantic and accessible implementation choices  */
+
+.icon.cc-heart, .icon-attach.cc-heart:before {
+    --icon-sprite: var(--cc-heart);
+}
+
+.icon.cc-heart-filled, .icon-attach.cc-heart-filled:before {
+    --icon-sprite: var(--cc-heart-filled);
+}
+
+.icon.cc-quote, .icon-attach.cc-quote:before {
+    --icon-sprite: var(--cc-quote);
+}
+
+.icon.fa-angle-down, .icon-attach.fa-angle-down:before {
+    --icon-sprite: var(--fa-angle-down);
+}
+
+.icon.fa-angle-left, .icon-attach.fa-angle-left:before {
+    --icon-sprite: var(--fa-angle-left);
+}
+
+.icon.fa-angle-right, .icon-attach.fa-angle-rignt:before {
+    --icon-sprite: var(--fa-angle-right);
+}
+
+.icon.fa-angle-up, .icon-attach.fa-angle-up:before {
+    --icon-sprite: var(--fa-angle-up);
+}
+
+.icon.fa-globe, .icon-attach.fa-globe:before {
+    --icon-sprite: var(--fa-globe);
+}
+
+.icon.fa-heart, .icon-attach.fa-heart:before {
+    --icon-sprite: var(--fa-heart);
+}
+
+.icon.fa-info, .icon-attach.fa-info:before {
+    --icon-sprite: var(--fa-info);
+}
+
+.icon.fa-right-angle, .icon-attach.fa-righ-angle:before {
+    --icon-sprite: var(--fa-heart);
+}
+
+.icon.fa-search, .icon-attach.fa-search:before {
+    --icon-sprite: var(--fa-search);
+}
+
+.icon-replace.fa-instagram {
+    --icon-sprite: var(--fa-instagram);
+}
+
+.icon-replace.fa-twitter {
+    --icon-sprite: var(--fa-twitter);
+}
+
+.icon-replace.fa-facebook {
+    --icon-sprite: var(--fa-facebook);
+}
+
+.icon-replace.fa-linkedin {
+    --icon-sprite: var(--fa-linkedin);
+}
+
+.icon-replace.fa-mastodon {
+    --icon-sprite: var(--fa-mastodon);
+}
+
+
+/* attach an icon to an existing element with a :before */
+.icon-attach:before {
+    display: inline-block;
+    content: '';
+    /* min-width: 30px; */
+    /* min-height: 30px; */
+    height: 1em;
+    width: 1em;
+
+    font-size: var(--icon-sprite-size);
+    background-color: var(--icon-sprite-color);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: var(--icon-sprite);
+    mask-image: var(--icon-sprite);
+
+    -webkit-mask-size: contain;
+    mask-size: contain;
+
+    --icon-sprite: var(--cc-logo);
+}
+
+.icon-replace {
+    display: inline-block;
+    content: '';
+    text-indent: -1000px;
+
+    /* min-width: 30px; */
+    /* min-height: 30px; */
+    height: 1em;
+    width: 1em;
+
+    font-size: var(--icon-sprite-size);
+    background-color: var(--icon-sprite-color);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: var(--icon-sprite);
+    mask-image: var(--icon-sprite);
+
+    -webkit-mask-size: contain;
+    mask-size: contain;
+
+    --icon-sprite: var(--cc-logo);
+}
+