<h1>Touch targets…</h1>

<ul class="horizontal-list">
  <li class="horizontal-list__item">
    <a href="https://github.com/svinkle" target="_blank" rel="noopener" aria-label="GitHub" aria-describedby="new-window-2" class="horizontal-list__link">
      <svg class="icon icon--social" viewBox="0 0 48 48" focusable="false" aria-hidden="true">
        <use xlink:href="#github"></use>
      </svg>
    </a>
  </li>
  <li class="horizontal-list__item">
    <a href="https://medium.com/@svinkle" target="_blank" rel="noopener" aria-label="Medium" aria-describedby="new-window-2" class="horizontal-list__link">
      <svg class="icon icon--social" viewBox="0 0 48 48" focusable="false" aria-hidden="true">
        <use xlink:href="#medium"></use>
      </svg>
    </a>
  </li>
  <li class="horizontal-list__item">
    <a href="https://twitter.com/svinkle" target="_blank" rel="noopener" aria-label="Twitter" aria-describedby="new-window-2" class="horizontal-list__link">
      <svg class="icon icon--social" viewBox="0 0 48 48" focusable="false" aria-hidden="true">
        <use xlink:href="#twitter"></use>
      </svg>
    </a>
  </li>
</ul>

<!-- New window warning messages -->
<div hidden>
  <span id="new-window-0">Opens in a new window</span>
  <span id="new-window-1">Opens an external site</span>
  <span id="new-window-2">Opens an external site in a new window</span>  
</div>

<!-- SVG sprite sheet -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" hidden>
    <symbol id="new-window" viewBox="0 0 24 24">
      <g transform="scale(0.0234375 0.0234375)"> 
        <path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z"></path>
      </g>
    </symbol>
    <symbol id="github" viewBox="0 0 48 48">
      <g transform="scale(0.046875 0.046875)">
        <path d="M512.008 12.642c-282.738 0-512.008 229.218-512.008 511.998 0 226.214 146.704 418.132 350.136 485.836 25.586 4.738 34.992-11.11 34.992-24.632 0-12.204-0.48-52.542-0.696-95.324-142.448 30.976-172.504-60.41-172.504-60.41-23.282-59.176-56.848-74.916-56.848-74.916-46.452-31.778 3.51-31.124 3.51-31.124 51.4 3.61 78.476 52.766 78.476 52.766 45.672 78.27 119.776 55.64 149.004 42.558 4.588-33.086 17.852-55.68 32.506-68.464-113.73-12.942-233.276-56.85-233.276-253.032 0-55.898 20.004-101.574 52.76-137.428-5.316-12.9-22.854-64.972 4.952-135.5 0 0 43.006-13.752 140.84 52.49 40.836-11.348 84.636-17.036 128.154-17.234 43.502 0.198 87.336 5.886 128.256 17.234 97.734-66.244 140.656-52.49 140.656-52.49 27.872 70.528 10.35 122.6 5.036 135.5 32.82 35.856 52.694 81.532 52.694 137.428 0 196.654-119.778 239.95-233.79 252.624 18.364 15.89 34.724 47.046 34.724 94.812 0 68.508-0.596 123.644-0.596 140.508 0 13.628 9.222 29.594 35.172 24.566 203.322-67.776 349.842-259.626 349.842-485.768 0-282.78-229.234-511.998-511.992-511.998z"></path>
      </g>
    </symbol>
    <symbol id="medium" viewBox="0 0 48 48">
      <g transform="scale(0.046875 0.046875)">
        <path d="M121.429 271.36c1.28-12.587-3.541-25.003-12.928-33.451l-95.573-115.2v-17.195h296.832l229.461 503.253 201.728-503.253h283.051v17.195l-81.792 78.379c-7.040 5.376-10.539 14.208-9.088 22.955v576c-1.451 8.704 2.048 17.493 9.088 22.912l79.787 78.379v17.195h-401.493v-17.195l82.645-80.299c8.107-8.107 8.107-10.496 8.107-22.955v-465.536l-229.973 584.021h-31.019l-267.733-584.021v391.424c-2.219 16.469 3.243 33.024 14.805 44.928l107.52 130.56v17.152h-304.853v-17.195l107.52-130.56c11.52-11.861 16.64-28.587 13.909-44.885v-452.608z"></path>
      </g>
    </symbol>
    <symbol id="twitter" viewBox="0 0 48 48">
      <g transform="scale(0.046875 0.046875)">
        <path d="M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"></path>
      </g>
    </symbol>
  </svg>
.horizontal-list__link {
  margin: 10px;

  /* Comment above 👆 and uncomment below 👇 to increase touch target size without changing the layout! */

  /* padding: 10px; */
}

/* Extra styles… */

.horizontal-list__item {
  margin: 0;
}

.icon--social {
  height: 24px;
  width: 24px;
}

External CSS

  1. https://svinkle.github.io/css/codepen.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js
  2. https://svinkle.github.io/js/codepen.js