Fix icon sizing and focus-visible handling in footer

Author: webstackdev

_TODO.md

@@ -255,3 +255,5 @@ This article has different approaches to [print pagination](https://www.customjs
 - We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag lik "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag and add the name to the tags: frontmatter key in the index.mdx
 
 - Need an article on OpenStack
+
+- Add links to the privacy policy page to go to preferences and my-data

src/components/Footer/footer.module.css

@@ -4,113 +4,22 @@
   }
 }
 
-.footerSocialList {
-  display: grid;
-  gap: 0.75rem 1rem;
-}
-
-@media (width >= 64em) {
-  .footerSocialList {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.footerSocialIcon :global([data-icon]) {
-  height: 2rem;
-  width: 2rem;
-}
-
-.footerSocialLink :global([data-icon]) {
-  fill: var(--color-content);
-  stroke: var(--color-content);
-}
-
-.footerSocialLink {
-  text-decoration: none;
-}
-
-.footerSocialPlatform {
-  text-decoration-color: var(--color-primary);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 4px;
-}
-
-.footerSocialLink:hover .footerSocialPlatform,
-.footerSocialLink:focus-visible .footerSocialPlatform {
-  text-decoration-color: var(--color-secondary);
-}
-
-.footerSocialLink:hover :global([data-icon]),
-.footerSocialLink:focus-visible :global([data-icon]) {
-  fill: var(--color-secondary);
-  stroke: var(--color-secondary);
-}
-
-.footerSocialBlurbText {
-  color: var(--color-content);
-  text-decoration: none;
-}
-
-.footerSocialLink:hover .footerSocialBlurbText,
-.footerSocialLink:focus-visible .footerSocialBlurbText {
-  color: var(--color-content);
-}
-
-.footerSocialLink :global([data-icon='x'] path) {
-  stroke: none;
-}
-
-.footerSocialLink :global([data-icon='x'] .xTile) {
-  fill: var(--color-content);
-}
-
-.footerSocialLink :global([data-icon='x'] .xGlyph) {
-  fill: var(--color-content-inverse);
-}
-
-.footerSocialLink:hover :global([data-icon='x'] .xTile),
-.footerSocialLink:focus-visible :global([data-icon='x'] .xTile) {
-  fill: var(--color-secondary);
-}
-
-.footerSocialBlurb {
-  margin-top: 0.25rem;
-}
-
-.footerBottomGrid {
-  display: grid;
-  gap: 0.75rem 1rem;
-  grid-template-columns: 1fr 1fr;
-}
-
 .footerBottomPrimary {
   grid-column: 1;
   grid-row: 1;
 }
 
 .footerBottomSecondary {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
   grid-column: 2;
   grid-row: 1;
 }
 
 .footerBottomActions {
-  align-items: center;
-  display: flex;
-  gap: 1rem;
   grid-column: 1 / -1;
   grid-row: 2;
-  justify-content: center;
 }
 
 @media (width >= 64em) {
-  .footerBottomGrid {
-    grid-template-columns: 1fr;
-  }
-
   .footerBottomPrimary,
   .footerBottomSecondary,
   .footerBottomActions {
@@ -123,68 +32,11 @@
 
   .footerBottomActions {
     grid-row: 4;
-    justify-content: center;
   }
 }
 
-.footerBottomLink {
-  text-decoration: none;
-}
-
-.footerBottomLinkTitle {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-}
-
-.footerBottomLink:hover .footerBottomLinkTitle,
-.footerBottomLink:focus .footerBottomLinkTitle {
-  text-decoration-color: var(--color-secondary);
-}
-
-.footerBottomLinkDescription {
-  text-decoration: none;
-}
-
-.footerBottomLinkDescriptionText {
-  color: var(--color-content);
-}
-
-.footerBottomLink:hover .footerBottomLinkDescriptionText,
-.footerBottomLink:focus-visible .footerBottomLinkDescriptionText {
-  color: var(--color-content);
-}
-
-.footerIconButton :global([data-icon]) {
-  color: var(--color-content);
-  fill: currentcolor;
-  height: 2rem;
-  stroke: currentcolor;
-  width: 2rem;
-}
-
-.footerIconButton {
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  line-height: 1;
-  padding: 0.25rem;
-}
-
-.footerIconButton:hover :global([data-icon]),
-.footerIconButton:focus-visible :global([data-icon]) {
-  color: var(--color-secondary);
-}
-
-.footerGrid :global(a:focus-visible),
-.footerGrid :global(button:focus-visible) {
-  outline: 2px solid var(--color-spotlight);
-  outline-offset: 2px;
-}
-
 @media (width >= 40em) {
   .footerGrid {
-    display: grid;
-    gap: 0.5rem 1rem;
     grid-template-areas:
       "contact social"
       "contact channels"
@@ -220,14 +72,7 @@
   }
 
   .footerHireMe {
-    align-self: end;
     grid-area: hire-me;
-    margin-top: 2rem;
-  }
-
-  .footerHireMeAnchor {
-    margin-top: 0.5rem;
-    text-decoration: none;
   }
 }
 

src/components/Footer/footer.module.css.d.ts

@@ -2,28 +2,13 @@ declare const styles: {
   readonly footerGrid: string
   readonly footerContact: string
   readonly footerSocial: string
-  readonly footerSocialList: string
-  readonly footerSocialItem: string
-  readonly footerSocialLink: string
-  readonly footerSocialHeaderRow: string
-  readonly footerSocialIcon: string
-  readonly footerSocialPlatform: string
-  readonly footerSocialBlurb: string
-  readonly footerSocialBlurbText: string
   readonly footerBottomRow: string
-  readonly footerBottomGrid: string
   readonly footerBottomPrimary: string
   readonly footerBottomSecondary: string
   readonly footerBottomActions: string
-  readonly footerBottomLink: string
-  readonly footerBottomLinkTitle: string
-  readonly footerBottomLinkDescription: string
-  readonly footerBottomLinkDescriptionText: string
   readonly footerCopyright: string
   readonly footerHireMe: string
   readonly footerHireMeAnchor: string
-  readonly footerFeedIcon: string
-  readonly footerIconButton: string
 }
 
 export default styles