Day 18: Social share 🔗

A social share is a component that displays anchors holding social sharing links of a current page.

The example component is visible below.

A few notes about this social share component:

• CSS Variables are used for colors,
• CSS Flexbox is used for layout,
• the gap property is used to add spacing between flex items,
• the after pseudo-element is used to add the link icon,
• the :first-letter selector is used to make the first letter bolder.

The code:

<div class="advent-social">
  <p>Share on:</p>
  <a href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">Facebook</a>
  <a href="https://twitter.com/intent/tweet/?text=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">Twitter</a>
  <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F&amp;title=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;summary=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;source=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">LinkedIn</a>
  <a href="https://reddit.com/submit/?url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F&amp;resubmit=true&amp;title=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components." target="_blank" rel="noopener">Reddit</a>
</div>

.advent-social {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .5em;
}

.advent-social a {
  color: var(--color-xmas-beta);

  position: relative;
  padding-right: .75em;

  cursor: pointer;
}

.advent-social a:hover,
.advent-social a:focus,
.advent-social a:active {
  text-decoration: underline;
}

.advent-social a:first-letter {
  font-weight: bold;
}

.advent-social a:after {
  content: "🔗";

  font-size: .5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1rem;
  height: 1rem;

  position: absolute;
  top: 0;
  right: 0;

}

.advent-social p,
.advent-social a {
  display: block;
  margin: 0;
}

.advent-social p {
  font-size: .8em;
  font-weight: 300;
}