techno-tim / techno-tim.github.io

Open Source, Community Driven, Documentation for Techno Tim YouTube Videos/ Complete with examples for all your copy pasta needs!

Home Page:https://technotim.live

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Possible fix for misaligned github logo on site

rchiarino opened this issue · comments

Hi, maybe someone let the fa-2x tag on the Browser version of the page,
<i class="fab fa-github fa-2x"></i>

causing the github logo, to be misaligned with the circle.

image

I think this was intended to be on the Mobile version?
image

maybe this could work but change a bit of the design:

<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
  <a
    href="https://twitter.com/technotimlive"
    aria-label="twitter"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-twitter"></i>
  </a>
  <a
    href="https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A"
    aria-label="youtube"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-youtube"></i>
  </a>

  <a
    href="https://twitch.tv/technotim"
    aria-label="twitch"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-twitch"></i>
  </a>

  <a
    href="https://patreon.com/technotim"
    aria-label="patreon"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-patreon"></i>
  </a>

  <a
    href="https://discord.gg/DJKexrJ"
    aria-label="discord"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-discord"></i>
  </a>
  <!-- THIS IS THE OLD CODE FOR THE LOGO:
    
    <div class="d-flex flex-row justify-content-center align-items-center">
    <div class="p-1">
      <a
        href="https://github.com/techno-tim/techno-tim.github.io"
        target="_blank"
        rel="noopener"
      >
        <i class="fab fa-github fa-2x"></i>
      </a>
    </div>-->

  <a
    href="https://github.com/techno-tim/techno-tim.github.io"
    aria-label="github"
    target="_blank"
    rel="noopener"
  >
    <i class="fab fa-github"></i>
  </a>

  <!-- THIS IS THE OLD CODE FOR THE TEXT:
    <div class="p-1"> --changed the p-1 to the text
      <div class="d-flex flex-column align-items-start justify-content-end"> --flex-colum to flex-wrap, justify-content-end to justify-content-center
        <div class="text-sm-left">330 stars</div> --added p-1
        <div class="p-0">97 forks</div> --changed to p-1
      </div>
    </div>
  </div>
</div>  -->

  <div class="d-flex flex-weap justify-content-center">
    <div class="p-1 text-sm-left">330 stars</div>
    <div class="p-1">97 forks</div>
  </div>
</div>

The resault:
image

@rchiarino thank you so much! I will test this out soon!

fixed in ef141c2 thank you!