octospacc
/
twemoji-astonishing
mirror of https://gitlab.com/octtspacc/twemoji-astonishing
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Readme tweaks; Fix CI

This commit is contained in:
octospacc 2022-09-02 22:33:39 +02:00
parent f96a46881f
commit 6db46b0275
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/main.yml vendored
View File

@ -21,7 +21,7 @@ jobs:
sudo apt install -y software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install -y python3.10 tree wget tar xz p7zip
sudo apt install -y python3.10 tree wget tar xz-utils p7zip
python3.10 ./Tools/BuildCSS.py
python3.10 ./Tools/BuildCSS.py --Output="maxcdn" --URLPrefix="https://twemoji.maxcdn.com/v/latest/svg/"
./Tools/DeployPages.sh

40
README.md
View File

@ -1,13 +1,13 @@
# 🌈 Twemoji Astonishing 😲
Like **Font-Awesome, but for [Twitter Emojis](https://github.com/twitter/twemoji)** - and this time, it's astonishing! 😄
Like **Font-Awesome, but for [Twitter Emojis](https://github.com/twitter/twemoji)** - and this time, it's **astonishing**! 😄
![Banner with some emojis](Banner.png)
Modern drop-in replacement for projects like [Twemoji-Amazing](https://github.com/SebastianAigner/twemoji-amazing), with some quality-of-life improvements:
Modern **drop-in replacement** for projects like [Twemoji-Amazing](https://github.com/SebastianAigner/twemoji-amazing), with some **quality-of-life improvements**:
- Easy support for fallback text emojis
- Literal emojis as CSS class names, in addition to text names
- Easy support for **fallback text** emojis
- Literal **emojis as CSS class names**, in addition to text names
## Usage
@ -15,50 +15,50 @@ Modern drop-in replacement for projects like [Twemoji-Amazing](https://github.co
You can get your preferred variant of the CSS file for use in your webpages:
- `twemoji-astonishing`: The full package with all the features
- `twemoji-astonishing.chars`: Only literal emojis used as class names
- `twemoji-astonishing.names`: Only ASCII names used as class names, like Twemoji-Amazing
- `twemoji-astonishing`: The **full package** with all the features
- `twemoji-astonishing.chars`: **Only literal emojis** used as class names
- `twemoji-astonishing.names`: **Only ASCII names** used as class names, like Twemoji-Amazing
Every variant, of course, has both a pure (`.css`) version, and a minified (`.min.css`) one.
Every variant, of course, has both a **pure** (`.css`) version, and a **minified** (`.min.css`) one.
### Getting the Files
For getting the files and using them, you can choose between:
- Hotlinking to the latest file hosted on the Pages branch of the repo:
- **Hotlinking** to the latest file hosted on the Pages branch of the repo:
- **Directly**: `https://octtspacc.gitlab.io/twemoji-astonishing/maxcdn/<VARIANT>.css`
- (Better) **Using a CDN** like jsDelivr: `https://cdn.jsdelivr.net/gh/octospacc/twemoji-astonishing@gh-pages/<VARIANT>.css`
- Downloading a prebuilt archive containing all the CSS and SVG files, which you can host on your own server:
- **Downloading a prebuilt archive** containing all the CSS and SVG files, which you can host on your own server:
- See file listing [here (GitLab)](https://octtspacc.gitlab.io/twemoji-astonishing/index.html), or [here (GitHub)](https://octospacc.github.io/twemoji-astonishing/index.html); archives are in the "Archives" directory.
### Using the CSS Classes
Just assign the base class (`twa`), an emoji class, and optionally any option class to a new inline element.
Just **assign** the **base class** (`twa`), an **emoji class**, and optionally any option class **to a new inline element**.
#### Size Option Classes
Like for Font-Awesome and Twemoji-Amazing, the following classes can be used to alter emoji sizes:
Like for Font-Awesome and Twemoji-Amazing, the following classes can be used to **alter emoji sizes**:
`twa-lg`, `twa-2x`, `twa-3x`, `twa-4x`, `twa-5x`.
#### Emoji classes
Emoji classes can be used in one of 2 forms.
First, an emoji class can be the standard form `twa-emoji-name`; essentially, the ASCII name of the emoji, prefixed by `twa-`.
First, an emoji class can be the **standard form** `twa-emoji-name`; essentially, the ASCII name of the emoji, prefixed by `twa-`.
Example:
```html
<span class="twa twa-astonished-face"></span>
```
You can also (additionally, or exclusively) use literal emojis (always prefixed by `twa-`) as class names.
You can also (additionally, or exclusively) use **literal emojis** (always prefixed by `twa-`) as class names.
Example:
```html
<span class="twa twa-🗿"></span>
```
Any text inside elements with the `twa` class will be properly hidden via CSS.
This means that you are free to write text inside those HTML tags - including emoji characters, that will act as a fallback on unsupported platforms (very old browsers), while also allowing emojis to be copied with other text when that gets selected. In fact, you should do this.
This means that you are free to write text inside those HTML tags - including emoji characters, that will act as a **fallback on unsupported platforms** (very old browsers), while also **allowing emojis to be copied** with other text when that gets selected. In fact, you should do this.
Example:
```html
<span class="twa twa-exploding-head">🤯</span>
@ -66,19 +66,19 @@ Example:
### Finding emojis
- You can look for emoji names, codes, and characters at [Emoji List](https://unicode.org/emoji/charts/emoji-list.html) by the Unicode Consortium. The names you get from the table correspond to the CSS class names if you remove letter accents, remove special characters, and replace spaces with dashes.
- You can **look for emoji names, codes, and characters** at [Emoji List](https://unicode.org/emoji/charts/emoji-list.html) by the Unicode Consortium. The names you get from the table correspond to the CSS class names if you remove letter accents, remove special characters, and replace spaces with dashes.
- [Emojipedia](https://emojipedia.org) is also a great resource for finding emoji information - the above, but also much more. For each emoji on the site, the URL names correspond to the CSS class names.
- [Emojipedia](https://emojipedia.org) is also a **great resource** for finding emoji information - the above, but also much more. For each emoji on the site, the URL names correspond to the CSS class names.
## Building
Running `./Tools/BuildCSS.py` generates all final CSS files. Requires Python >= 3.9.
Running `./Tools/BuildCSS.py` **generates** all final **CSS files**. (Requires Python >= 3.9).
`./Tools/DeployPages.sh` also does other tasks, like downloading a fresh copy of Twemoji SVG files and creating archives.
`./Tools/DeployPages.sh` also **does other tasks**, like downloading a fresh copy of Twemoji SVG files and creating archives.
## Credits and Licenses
License for Twemoji-Astonishing scripts, snippets, and documentation: [MIT](https://mit-license.org).
**License for Twemoji-Astonishing** scripts, snippets, and documentation: [MIT](https://mit-license.org).
Uses CSS snippets from [Twemoji-Amazing](https://github.com/SebastianAigner/twemoji-amazing), licensed under [MIT](https://mit-license.org).