diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..3c611d4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present Tim Carry (@pixelastic)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 4260c13..5e4bdf3 100644
--- a/README.md
+++ b/README.md
@@ -5,13 +5,14 @@ Recreating all the flags of the nations of the world in pure CSS, using only one
You can see it live on [https://pixelastic.github.io/css-flags/](https://pixelastic.github.io/css-flags/)
-This side-project has no real-world application, it was just an exercice to push
+This side-project has no real-world application, it was just an exercise to push
the boundaries of what I know about CSS. Trying to use the language to do things
-it wasn't meant to do in the first place teached me a lot about the language.
+it wasn't meant to do in the first place taught me a lot about the language.
## Running the project locally
```sh
+bundle install
npm install
npm run serve
```
@@ -54,7 +55,7 @@ already exists in the UTF8 table, so I just have to grab them from existing
fonts (or use [utf8icons.com][7]).
But more often, I had to use Vexilla Mundi. The website provides nice png images
-of all the symbols. Unfortunatly, the symbols they provide are already colored,
+of all the symbols. Unfortunately, the symbols they provide are already colored,
and I needed them black to use in the font so I was able to define the color
myself.
@@ -97,15 +98,13 @@ longer user percentage values, I need real, absolute, pixel values.
-## Sibling projects
-
-Here are two others projects I did while working on CSS Flags.
+## Related projects
### img2css
[http://github.com/pixelastic/img2css/](http://github.com/pixelastic/img2css/)
-Commanline tool to convert any image (jpg or png) to full CSS. This will
+Commandline tool to convert any image (jpg or png) to full CSS. This will
replicate all pixels of the initial image using numerous `box-shadows`.
This works wel but results in really heavy generated CSS (several MB), so
@@ -118,6 +117,13 @@ I choose not to use it in this project.
Commandline tool to get an approximation in hexadecimal of a Pantone color
value. Really useful as Vexilla Mundi gives color values in Pantone.
+
+### Vexillum
+
+[https://github.com/talgautb/vexillum](https://github.com/talgautb/vexillum)
+
+Someone else had the same idea.
+
## Tips and tricks
Here is an incomplete list of the tricks I had to use:
@@ -125,7 +131,7 @@ Here is an incomplete list of the tricks I had to use:
### Invisible text-shadow
I sometimes put an invisible symbol in an `after` or `before` element (through
-`color: transparent`) and positionned it at `top:0; left: 0`.
+`color: transparent`) and positioned it at `top:0; left: 0`.
Then I added several `text-shadow` to it, with a full color. Doing so helped in
getting the coordinates right because everything is then relative to the origin
@@ -154,7 +160,7 @@ add:
- Link to codepen to let users play with the code
- Making it work on more browsers...
- ...which implies that I need to add a visual testing framework on top if it
-- Adding the missings flags
+- Adding the missing flags
- Using a clip-path when only one star instead of a font
- Building the font with npm instead of icomoon.io
- Adding stars to Brazil
diff --git a/app/assets/fonts/Symbols.svg b/app/assets/fonts/Symbols.svg
index b652c1a..5fff292 100644
--- a/app/assets/fonts/Symbols.svg
+++ b/app/assets/fonts/Symbols.svg
@@ -127,35 +127,41 @@
CS