Skip to content

Instantly share code, notes, and snippets.

@ReeceM
Last active August 3, 2021 19:50
Show Gist options
  • Select an option

  • Save ReeceM/15bc5e2461d3dcb65f2077597c267858 to your computer and use it in GitHub Desktop.

Select an option

Save ReeceM/15bc5e2461d3dcb65f2077597c267858 to your computer and use it in GitHub Desktop.
Package Pages Badges

Pacakge Pages Badges

To add a badge to your page in the bottom corner, you can add the following css to your style sheets or your docs main page.

.pkg-badge {
  position: fixed; 
  bottom: 0px; 
  left: 0px; 
  width: 100%;
  display: flex; 
  padding: 0.3rem; 
  justify-content: flex-end;
}

.pkg-badge svg {
  width: 170px;
}

.pkg-badge img {
  width: 170px;
}

@media only screen and (max-width: 600px) {
  .pkg-badge svg {
    width: 100px;
  }
  
  .pkg-badge img {
    width: 100px;
  }
}
    <div class="pkg-badge">
        <a href="https://https://packagepages.dev/" rel="noopener noreferrer">
            <!-- svg file here or img -->
        </a>
    </div>

The svg file code can be copied for either dark or light, or linked as an img from an assets folder

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment