pages/_includes/repository/repo_trophies.liquid
George a9da28e256
Renamed repo-img- to only- to allow setting images for only one theme (#2886)
Closes #930.

We already had classes for this kind of feature, but it was used
specifically for repository information. Just renamed the classes so it
is clear how they can be used.

To use them with markdown, just do it like this:

```markdown
![Only light](assets/img/prof_pic_color.png){: .only-light}
![Only dark](assets/img/prof_pic.jpg){: .only-dark}
```

and with html:

```html
<img
  class="only-light"
  src="assets/img/prof_pic_color.png"
>
<img
  class="only-dark"
  src="assets/img/prof_pic.jpg"
>
```

Signed-off-by: George Araújo <george.gcac@gmail.com>
2024-12-12 12:45:04 -03:00

43 lines
2.0 KiB
Plaintext

<div class="repo p-2 text-center">
<a href="https://github.com/ryo-ma/github-profile-trophy">
<span class="d-none d-sm-none d-md-block">
<img
class="only-light"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=6"
>
<img
class="only-dark"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=6"
>
</span>
<span class="d-none d-sm-block d-md-none">
<img
class="only-light"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=4"
>
<img
class="only-dark"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=4"
>
</span>
<span class="d-block d-sm-none">
<img
class="only-light"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=3"
>
<img
class="only-dark"
alt="{{ include.username }}"
src="https://github-profile-trophy.vercel.app/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=3"
>
</span>
</a>
</div>