{%- assign social = site.waterfall.social_links -%} <div class=“social-media fixed bottom-0 h-screen-1/2 hidden md:block sm:left-3 md:left-4 lg:left-9”>

<div class="relative h-full">

   <div class="bg-gray-100 dark:bg-gray-900">
      {%- if social.email -%}
         <a href="mailto:{{ social.email | cgi_escape | escape }}" class="text-primary-700 text-lg block p-3">
            {%- include svg/envelope.svg -%}
         </a>
      {%- endif -%}

      {%- if social.github -%}
         <a href="https://github.com/{{ social.github | cgi_escape | escape }}" target="_blank" class="text-primary-700 text-lg block p-3">
            {%- include svg/github.svg -%}
         </a>
      {%- endif -%}

      {%- if social.linkedin -%}
         <a href="https://www.linkedin.com/in/{{ social.linkedin | cgi_escape | escape }}" target="_blank" class="text-primary-700 text-lg block p-3">
            {%- include svg/linkedin.svg -%}
         </a>
      {%- endif -%}
   </div>

   <div class="vertical-line h-full absolute top-0 bottom-0 bg-primary-700 -z-10" style="width: 2px; left: calc(50% - 1px);"></div>
</div>

</div>