updates regarding member badges

main
Frank Homburg 3 years ago
parent 71831af64c
commit 1989aafcf4

@ -61,57 +61,55 @@ Note: I reserve the right to not add sites based on whether I think they're suit
{{< /detail-tag >}} {{< /detail-tag >}}
{{< detail-tag "Is there any way I can show that I am a no-JS club member?" >}} {{< detail-tag "Is there any way I can show that I am a no-JS club member?" >}}
### Using the no-JS club logos to showcase membership ### Available badges
Yes, **if your website is qualified and included in our list**, you are entitled to use one of the following two logos: Yes, **if your website is qualified and included in our list**, you are entitled to use one of the following badges:
### Available logos **Bright badge which fits darker website layouts:**
**Bright logo which fits darker website layout:** [![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_badge_bright.svg)](https://no-js.club)
[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_logo_bright.svg)](https://no-js.club) **Dark badge which fits brighter website layouts:**
**Dark logo which fits brighter website layout:** [![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_badge_dark.svg)](https://no-js.club)
[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_logo_dark.svg)](https://no-js.club) ### How to integrate badges
### How to integrate logos **HTML code snippet for bright badge:**
**HTML code snippet for bright logo:** `<a href="https://no-js.club/"><img alt="no-JS club" src="https://no-js.club/images/no-JS.club_badge_bright.svg">`
`<a href="https://no-js.club/"><img alt="no-JS club" src="https://no-js.club/images/no-JS.club_logo_bright.svg">` **HTML code snippet for dark badge:**
**HTML code snippet for dark logo:** `<a href="https://no-js.club/"><img alt="no-JS club" src="https://no-js.club/images/no-JS.club_badge_dark.svg">`
`<a href="https://no-js.club/"><img alt="no-JS club" src="https://no-js.club/images/no-JS.club_logo_dark.svg">` **Markdown code snippets for bright badge:**
**Markdown code snippets for bright logo:** `[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_badge_bright.svg)](https://no-js.club)`
`[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_logo_bright.svg)](https://no-js.club)` **Markdown code snippets for dark badge:**
**Markdown code snippets for dark logo:** `[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_badge_dark.svg)](https://no-js.club)`
`[![This website is a proud member of the no-JS.club](https://no-js.club/images/no-JS.club_logo_dark.svg)](https://no-js.club)` ### How to change badge size
### How to change logo size Below you see some **HTML** and **Markdown** solutions for changing the size of the badge.
Below you see some **HTML** and **Markdown** solutions for changing the size of the logo.
#### HTML solution #### HTML solution
To proportionally change the logo size you either add the **width** or **height** parameter to the HTML snippet. The browser will automatically calculate the size of the other edge. To proportionally change the badge size you either add the **width** or **height** parameter to the HTML snippet. The browser will automatically calculate the size of the other edge.
**Example using the "height" parameter:** **Example using the "height" parameter:**
`<a href="https://no-js.club"><img src="https://no-js.club/images/no-JS.club_logo_bright.svg" height="120px" /></a>` `<a href="https://no-js.club"><img src="https://no-js.club/images/no-JS.club_badge_bright.svg" height="120px" /></a>`
**Example using the "width" parameter:** **Example using the "width" parameter:**
`<a href="https://no-js.club"><img src="https://no-js.club/images/no-JS.club_logo_dark.svg" width="200px" /></a>` `<a href="https://no-js.club"><img src="https://no-js.club/images/no-JS.club_badge_dark.svg" width="200px" /></a>`
#### Markdown solution #### Markdown solution
Download the logo of your choice and open it with a text editor. Download the badge of your choice and open it with a text editor.
**Lines five and six** contain the dimensions in millimeters, which **can be adjusted to your liking.** **Lines five and six** contain the dimensions in millimeters, which **can be adjusted to your liking.**
@ -119,7 +117,7 @@ Download the logo of your choice and open it with a text editor.
`height="27.790841875mm"` `height="27.790841875mm"`
Upload the updated logo file to you web space and change the Markdown logo integration snippet respectively. Upload the updated badge file to you web space and change the Markdown integration snippet respectively.
{{< /detail-tag >}} {{< /detail-tag >}}
{{< detail-tag "Will membership cost me anything?" >}} {{< detail-tag "Will membership cost me anything?" >}}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 33 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 34 KiB

Loading…
Cancel
Save