Merge pull request #78 from dof-dss/DEPT-371

DEPT-371 Home page social links

src/scss/5_theme/front.scss

@@ -31,6 +31,7 @@
 
     h2 {
       @include responsive-typo-map($sub-section-home-h2);
+      min-width: fit-content;
       margin: 0 7px 0 0;
       font-weight: bold;
       color: #4d4d4d;
@@ -39,19 +40,34 @@
     ul,
     li {
       display: flex;
-      flex-flow: row nowrap;
+      flex-flow: row wrap;
       margin: 0;
       padding: 0;
     }
 
+    li {
+      margin: 2px;
+    }
+
     a {
       display: inline-block;
       width: 2.5em;
       height: 2.5em;
       min-width: 44px;
       min-height: 44px;
-      margin: 0 0 0 .25em;
-      background: #4d4d4d center center / 2em auto no-repeat;
+      margin: 0;
+      background: #4d4d4d center center / 1.75em auto no-repeat;
+      transition: background-color .2s ease-in-out, transform .2s ease-in-out;
+
+      &:focus,
+      &:hover {
+        background-color: var(--brand-primary-color-high-contrast-white);
+      }
+
+      &:focus {
+        @include high-vis-focus(white);
+        transform: scale(1.1);
+      }
 
       &[href*='//twitter.com'] {
         background-image: url('/themes/custom/nicsdru_dept_theme/images/twitter.svg');
@@ -60,10 +76,21 @@
 
       &[href*='//www.facebook.com'] {
         background-image: url('/themes/custom/nicsdru_dept_theme/images/facebook.svg');
+        background-size: 1.6667em auto;
       }
 
       &[href*='//www.flickr.com'] {
         background-image: url('/themes/custom/nicsdru_dept_theme/images/flickr.svg');
+        background-size: 2em auto;
+      }
+
+      &[href*='//www.youtube.com'] {
+        background-image: url('/themes/custom/nicsdru_dept_theme/images/youtube.svg');
+        background-size: 2em auto;
+      }
+
+      &[href*='//linkedin.com'] {
+        background-image: url('/themes/custom/nicsdru_dept_theme/images/linkedin.svg');
       }
     }
   }