language width is fixed for small devices

cc_legal_tools/static/cc-legal-tools/base.css

@@ -7,6 +7,18 @@
 .bidi-right main ul, .bidi-right main ol {
   margin: 0 2em 2em 0;
 }
+/*for device having width <=400px*/
+@media (max-width: 400px) {
+  #languages-dropdown {
+    width: 20vw;
+  }
+}
+@media (max-width: 280px) {
+  #languages-dropdown {
+    width: 16vw;
+  }
+}
+
 
 
 /* Ancilliary menu */

cc_legal_tools/static/wp-content/themes/vocabulary-theme/vocabulary/css/library-vars.css

@@ -248,6 +248,312 @@ leaving room for semantic and accessible implementation choices  */
 .icon-replace.fa-mastodon {
     --icon-sprite: var(--fa-mastodon);
 }
+/* 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: "Accidenz Commons";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../fonts/AccidenzCommons.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');
+
+     /* 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-quote: url('./../svg/font-awesome/icons/fa-icons.svg#fa-quote');
+     --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.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-quote, .icon-attach.fa-quote:before {
+    --icon-sprite: var(--fa-quote);
+}
+
+.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);
+}
+
+@media (max-width:500px) {
+    .icon-attach:before{
+        height: 2.6vw;
+        width: 2.6vw;
+    }
+}
+@media (min-width:500px) {
+    .icon-attach:before{
+        height: 1em;
+        width: 1em;
+    }
+}
+/* attach an icon to an existing element with a :before */
+.icon-attach:before {
+    display: inline-block;
+    content: '';
+    /* min-width: 30px; */
+    /* min-height: 30px; */
+
+
+    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);
+}
 
 
 /* attach an icon to an existing element with a :before */

cc_legal_tools/static/wp-content/themes/vocabulary-theme/vocabulary/css/vocabulary.css

@@ -85,13 +85,23 @@ body > header {
 .masthead h1 {
     margin: 0;
 }
-
+@media (max-width:500px) {
+    .masthead .identity-logo {
+        height: 15vw;
+        width: 70vw;
+    }
+}
+@media (min-width:500px) {
+    .masthead .identity-logo{
+    height: 50px;
+    width: 191px;
+    }
+}
 .masthead .identity-logo {
     display: inline-block;
     text-indent: -1000px;
     vertical-align: bottom;
-    height: 50px;
-    width: 191px;
+
 
 
     /* allows for color manipulation of svg */
@@ -256,6 +266,7 @@ button.expand-menu {
 }
 
 .ancilliary-menu {
+
     position: absolute;
     top: 0;
     /* right: var(--vocabulary-page-edges-space); */
@@ -267,7 +278,20 @@ button.expand-menu {
     font-size: .8em;
     /* font-size: 1em; */
 }
-
+@media (max-width:500px) {
+    .ancilliary-menu{
+        font-size: 2.6vw;
+    }
+    .ancilliary-menu ul li {
+        margin-left: 3vw;
+    }
+
+}
+@media (min-width:500px) {
+    .ancilliary-menu ul li {
+        margin-left: 10px;
+    }
+}
 .ancilliary-menu ul {
     display: flex;
     margin: 0;
@@ -276,9 +300,7 @@ button.expand-menu {
     list-style: none;
 }
 
-.ancilliary-menu ul li {
-    margin-left: 10px;
-}
+
 .ancilliary-menu ul li a {
     /* generalize this */
     display: inline-block;