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 29062d2..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. @@ -103,7 +104,7 @@ longer user percentage values, I need real, absolute, pixel values. [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 @@ -130,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 @@ -159,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/yarn.lock b/yarn.lock index 231b8f7..38dc614 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3534,13 +3534,13 @@ node-uuid@~1.4.0, node-uuid@~1.4.7: version "1.4.7" resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f" -nopt@2: +nopt@2, "nopt@2 || 3": version "2.2.1" resolved "https://registry.yarnpkg.com/nopt/-/nopt-2.2.1.tgz#2aa09b7d1768487b3b89a9c5aa52335bff0baea7" dependencies: abbrev "1" -"nopt@2 || 3", nopt@~3.0.6: +nopt@~3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" dependencies: @@ -4575,7 +4575,13 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@2, rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4: +rimraf@2, rimraf@~2.4.0: + version "2.4.5" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da" + dependencies: + glob "^6.0.1" + +rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -4585,12 +4591,6 @@ rimraf@~2.2.2: version "2.2.8" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582" -rimraf@~2.4.0: - version "2.4.5" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da" - dependencies: - glob "^6.0.1" - ripemd160@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"