diff --git a/README.MD b/README.MD index f4b485f6..4d374848 100644 --- a/README.MD +++ b/README.MD @@ -1,6 +1,7 @@ -# Warcry Card Creator 2.0 – Fighters and Abilities +# Warcry Card Creator 3.0 – Fighters and Abilities +A fork of [@HENNIROCKS's work](https://github.com/HENNIROCKS/warcry-card-creator). [Stevrak](https://github.com/Stevrak/warcry-card-creator/) added another smaller card type, some image stuff and hopes to do more. -A fork of [@rachelnertia's work](https://github.com/rachelnertia/warcry-card-creator). Further development and graphics (except runemarks) by [HENNIROCKS](https://hendrik-berends.de/en). Additional work by [@dorb4n](https://github.com/dorb4n), much appreciated! Made with [Bootswatch](https://bootswatch.com), supporting dark and light mode. +The project was started by by @rachelnertia (https://github.com/rachelnertia/warcry-card-creator). Further development and graphics (except runemarks) by [HENNIROCKS](https://hendrik-berends.de/en). Additional work by [@dorb4n](https://github.com/dorb4n), much appreciated! Made with [Bootswatch](https://bootswatch.com), supporting dark and light mode. Thanks everyone! [Creative Commons](http://creativecommons.org/licenses/by-nc/4.0/) diff --git a/_includes/fighters/section-background.html b/_includes/fighters/section-background.html index d8810534..5a5a426f 100644 --- a/_includes/fighters/section-background.html +++ b/_includes/fighters/section-background.html @@ -35,7 +35,14 @@

- +
+ + +
+
+ + +
{% comment %}
diff --git a/_includes/fighters/section-characteristics.html b/_includes/fighters/section-characteristics.html index 1ee60bf1..f6a8b495 100644 --- a/_includes/fighters/section-characteristics.html +++ b/_includes/fighters/section-characteristics.html @@ -10,6 +10,10 @@

+
+ + +
diff --git a/_includes/fighters/section-factionrunemark.html b/_includes/fighters/section-factionrunemark.html index fddeadb8..8221722b 100644 --- a/_includes/fighters/section-factionrunemark.html +++ b/_includes/fighters/section-factionrunemark.html @@ -18,7 +18,8 @@

{% include fighters/factionRunemarkSelectOrder.html %} {% include fighters/factionRunemarkSelectMonsters.html %}

- + +
diff --git a/_includes/tabs/tabContentFighters.html b/_includes/tabs/tabContentFighters.html index 87d2bb7b..5255080c 100644 --- a/_includes/tabs/tabContentFighters.html +++ b/_includes/tabs/tabContentFighters.html @@ -2,16 +2,35 @@
+ + + + + + + + + + + + + + + + + + + Sorry, your browser doesn't support the <canvas> element. diff --git a/assets/css/main.css b/assets/css/main.css index 75ef7708..cd4739e8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -13,6 +13,13 @@ url("../fonts/rodchenkoctt.svg#rodchenkoctt") format("svg"); } +@font-face { + font-family: 'SinaNovaReg'; + src: url("../fonts/SinaNovaReg-webfont.woff2") format('woff2'), + url("../fonts/SinaNovaReg-webfont.woff") format('woff'); + font-weight: normal; + font-style: normal; +} /* @media (prefers-color-scheme: dark) { a, .btn-link { color: tomato; } } diff --git a/assets/fonts/Fonts/SinaNovaReg.otf b/assets/fonts/Fonts/SinaNovaReg.otf new file mode 100644 index 00000000..490d52ad Binary files /dev/null and b/assets/fonts/Fonts/SinaNovaReg.otf differ diff --git a/assets/fonts/Licenses/Desktop/Desktop EULA 1.7.txt b/assets/fonts/Licenses/Desktop/Desktop EULA 1.7.txt new file mode 100644 index 00000000..68449be6 --- /dev/null +++ b/assets/fonts/Licenses/Desktop/Desktop EULA 1.7.txt @@ -0,0 +1,74 @@ +The Fontspring Desktop Font End User License Agreement +Version 1.7.0 - February 26, 2017 + +By downloading and/or installing font software (“Font”) offered by Fontspring or its distributors, you (“Licensee”) agree to be bound by the following terms and conditions of this End User Licensing Agreement (“EULA”): + +1. Rights Granted +Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to: + +a. Use the Font to create and distribute graphics, logos, and artwork for display on any surface including computer screens, television screens, paper, physical products, or any other surface. The created graphics may be a fixed size (e.g. JPG, PNG, etc.) or a static vector (e.g. SVG, EPS, etc. made with a “create outlines” tool). + +b. Embed or link the Font in accordance with the rules described in Section 2d, “Document Embedding,” of this EULA. + +2. Requirements and Restrictions + +a. Products +Licensee may not use the Font to create alphabet or letterform products for resale where the product consists of individual letterforms, including rubber stamps, die-cut products, stencil products, or adhesive sticker alphabet products where the likeness of the Font can be reproduced and the end-user of said products can create their own typesetting. An extended license may be available for an additional fee. + +Licensee may create typographic products using the Font if the product consists of commonly recognized words or phrases, for example, a rubber stamp that has the words “Great!” or a sticker that says “Thank You.” + +b. Dingbats and Illustrations +Licensee may NOT use illustrations or images in the Font OTHER THAN letterforms, numbers, punctuation marks, diacritics, etc., in a manner where the illustration or image becomes the primary aspect of a product for resale. For example, a dingbat image in the font can not be the sole design element on a coffee cup, t-shirt, greeting card, etc., intended for resale. An extended license may be available for an additional fee. + +c. Users and Deployment +The Font may be simultaneously used by no more than the number of users specified in the Invoice. A “user” is a single person or single machine, at the discretion of the Licensee. All users must belong to the same company or household purchasing the font except for temporary use by third parties as described in Section 3 “Provision to Third Parties” of this EULA. The Font may be installed on a server for the purpose of deploying to licensed users with all user restrictions listed above still applying. + +d. Document Embedding (including PDF, Microsoft Word® & Microsoft Powerpoint®) +Documents embedding the Font and sent to third parties, must be read-only by those recipients. + +Documents embedding the Font and created for in-house use or sent to third parties working on behalf of the Licensee as described in Section 3 “Provision to Third Parties” may be editable. + +3. Provision to Third Parties +The Licensee may temporarily provide the Font to a graphic designer, printer, agent, or independent contractor who is working on behalf of the Licensee. The Agents temporarily using the font are treated as licensed users and count toward the number of users specified on the Invoice. In the case of a single user license, the Licensee may temporarily provide the Font to a single third party without violating this EULA. + +The third party designer, developer, agent, or independent contractor must: + a. Agree in writing to use the Font exclusively for Licensee’s work, according to the terms of this EULA. + b. Retain no copies of the Font upon completion of the work. + +4. Term +This EULA grants a perpetual license for the rights set forth in Section 1, “Rights Granted,” unless and until the EULA terminates under Section 8, “Termination.” Fontspring will not charge additional fees post purchase, annually or otherwise. + +5. Other Usage +Licenses for @font-face embedding, computer applications and games, installable interactive books, software, mobile applications and games, ebooks, product creation websites, website template distribution, website templates, and other uses not allowed by this EULA may be available for an additional fee. Contact Fontspring at support@fontspring.com for more information. + +6. Modifications +Licensee may not modify the Font files, or create derivative fonts based on the Font without prior written consent from Fontspring or the owning Foundry EXCEPT THAT Licensee may generate files necessary for embedding or linking in accordance with this EULA. + +7. Copyright +The Font is protected by copyright law. The Foundry is the sole, exclusive owner of all intellectual property rights, including rights under copyright and trademark law. Licensee agrees not to use the Font in any manner that infringes the intellectual property rights of the Foundry or violates the terms of this EULA. Licensee will be held legally responsible, and indemnifies Fontspring, for any infringements on the Foundry’s rights caused by failure to abide by the terms of this EULA. + +8. Termination +This EULA is effective until terminated. If Licensee fails to comply with any term of this EULA, Fontspring may terminate the EULA with 30 days notice. This EULA will terminate automatically 30 days after the issuance of such notice. + +9. Refunds and Disclaimer +Fontspring will, at the Licensee’s request, provide a refund for the Font if: +a. The Font has not been used in any published or released work. +b. No more than 30 days have passed since the date of purchase, specified on the Invoice. +c. The Font has been uninstalled and deleted from all Licensee’s computers. + +The Product is provided “as is.” Fontspring makes no warranty of any kind, either expressed or implied, including, but not limited to the implied warranties of merchantability and fitness for a particular purpose. + +Fontspring shall not be liable for any direct, indirect, consequential, or incidental damages (including damages from loss of business profits, business interruption, loss of business information, and the like) arising out of the use of or inability to use the product even if Fontspring or the Foundry has been advised of the possibility of such damages. + +Because some states do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to Licensee. + +10. Governing Law +This EULA is governed by the laws of the United States of America and the State of Delaware. + +11. Entire Agreement +This EULA, in conjunction with the Invoice that accompanies each Font licensed from Fontspring or its distributors, constitutes the entire agreement between Fontspring and Licensee. + +12. Modification +The Parties may modify or amend this EULA in writing. + +13. Waiver. The waiver of one breach or default hereunder shall not constitute the waiver of any subsequent breach or default. diff --git a/assets/fonts/Licenses/Webfont/Web Font EULA 1.7.1.txt b/assets/fonts/Licenses/Webfont/Web Font EULA 1.7.1.txt new file mode 100644 index 00000000..0a3f0907 --- /dev/null +++ b/assets/fonts/Licenses/Webfont/Web Font EULA 1.7.1.txt @@ -0,0 +1,58 @@ +The Fontspring Web Font End User License Agreement +Version 1.7.1 - February 24, 2020 + +By downloading, installing and/or embedding font software (“Web Font”), designed by the foundry (“Foundry”) and offered by Fontspring, you (“Licensee”) agree to be bound by the following terms and conditions of this End User Licensing Agreement (“EULA”): + +1. Right Granted +Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferable license to link the Web Font to Websites using the @font-face selector in CSS files. + +2. Requirements and Restrictions +Licensee agrees to abide by the following requirements and restrictions: +a. Licensee must use the Web Font provided by Fontspring under this EULA. Licensee may not link to the full, CFF OpenType or TrueType font intended for desktop installation. +b. The total traffic of the Website(s), measured in pageviews per month, may be no greater than the number of pageviews specified in the Receipt. +c. Licensee may only install the Web Font on Websites that it owns or controls. +d. Licensee may embed Web Font in reports generated by the Website(s), provided that Licensee does not sell the reports for profit. + +3. Provision to Third Parties +Licensee may temporarily provide the Web Font to a producer, publisher or other agent who is working on behalf of the Licensee. + +The third party designer, developer, agent, or independent contractor must: +a. Agree in writing to use the Web Font exclusively for Licensee’s work, according to the terms of this EULA. +b. Retain no copies of the Web Font upon completion of the work. +c. Use and embed the Web Font only in Websites owned or controlled by Licensee. + +4. Term +This EULA grants a perpetual license for the rights set forth in Paragraph 1 unless and until the EULA terminates under Paragraph 7. Fontspring will not charge additional fees post purchase, annually or otherwise. + +5. Modifications +Licensee may not modify the Web Font or create derivative fonts based upon the Web Font without prior written consent from Fontspring or the Foundry EXCEPT THAT Licensee may generate files necessary for embedding or linking in accordance with this EULA. + +6. Copyright +The Web Font is protected by copyright law. The Foundry is the sole, exclusive owner of all intellectual property rights, including rights under copyright and trademark law. Licensee agrees not to use the Web Font in any manner that infringes the intellectual property rights of the Foundry or violates the terms of this EULA. Licensee will be held legally responsible, and indemnifies Fontspring, for any infringements on the Foundry’s rights caused by failure to abide by the terms of this EULA. + +7. Termination +This EULA is effective until terminated. If Licensee fails to comply with any term of this EULA, Fontspring may terminate the EULA with 30 days notice. This EULA will terminate automatically 30 days after the issuance of such notice. + +8. Refunds and Disclaimer +Fontspring will, upon request by the Licensee, provide a refund for the Web Font if: +a. The Web Font has not been used in any publicly available Website. +b. No more than 30 days have passed since the date of purchase, specified on the Receipt. +c. The Font has been uninstalled and deleted from all Licensee’s computers. + +The Web Font is provided “as is.” Fontspring makes no warranty of any kind, either expressed or implied, including, but not limited to the implied warranties of merchantability and fitness for a particular purpose. + +Fontspring shall not be liable for any direct, indirect, consequential, or incidental damages (including damages from loss of business profits, business interruption, loss of business information, and the like) arising out of the use of or inability to use the product even if Fontspring or the foundry has been advised of the possibility of such damages. + +Because some states do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to Licensee. + +9. Governing Law +This EULA is governed by the laws of the United States of America and the State of Delaware. + +10. Entire Agreement +This EULA, in conjunction with the Receipt that accompanies each Web Font licensed from Fontspring, constitutes the entire agreement between Fontspring and Licensee. + +11. Modification +Fontspring and Licensee may modify or amend this EULA in writing. + +12. Waiver. +The waiver of one breach or default hereunder shall not constitute the waiver of any subsequent breach or default. diff --git a/assets/fonts/SinaNovaReg-webfont.woff b/assets/fonts/SinaNovaReg-webfont.woff new file mode 100644 index 00000000..59f48185 Binary files /dev/null and b/assets/fonts/SinaNovaReg-webfont.woff differ diff --git a/assets/fonts/SinaNovaReg-webfont.woff2 b/assets/fonts/SinaNovaReg-webfont.woff2 new file mode 100644 index 00000000..bd4a84cf Binary files /dev/null and b/assets/fonts/SinaNovaReg-webfont.woff2 differ diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-demo.html b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-demo.html new file mode 100644 index 00000000..40c6a2f8 --- /dev/null +++ b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-demo.html @@ -0,0 +1,390 @@ + + + + + + + + + + + + + Sina Nova Regular Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodySina Nova Regular +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Sina Nova Regular in this kit supports the following languages:
+ + This font does not fully support any language.

+

Glyph Chart

+

The subset of Sina Nova Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff new file mode 100644 index 00000000..59f48185 Binary files /dev/null and b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff differ diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff2 b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff2 new file mode 100644 index 00000000..bd4a84cf Binary files /dev/null and b/assets/fonts/Web Fonts/sinanova_regular_macroman/SinaNovaReg-webfont.woff2 differ diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/grid_12-825-55-15.css b/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/grid_12-825-55-15.css new file mode 100644 index 00000000..3d6aef78 --- /dev/null +++ b/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/specimen_stylesheet.css b/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/specimen_stylesheet.css new file mode 100644 index 00000000..84273c06 --- /dev/null +++ b/assets/fonts/Web Fonts/sinanova_regular_macroman/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #002339; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #2f7093; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #2f7093; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #2a6484; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 300px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/assets/fonts/Web Fonts/sinanova_regular_macroman/stylesheet.css b/assets/fonts/Web Fonts/sinanova_regular_macroman/stylesheet.css new file mode 100644 index 00000000..7b1be846 --- /dev/null +++ b/assets/fonts/Web Fonts/sinanova_regular_macroman/stylesheet.css @@ -0,0 +1,33 @@ +/*! + * Web Fonts from Fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2021 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: Hoftype + * License URL: https://www.fontspring.com/licenses/hoftype/webfont + * + * + */ + +@font-face { + font-family: 'SinaNovaReg'; + src: url('SinaNovaReg-webfont.woff2') format('woff2'), + url('SinaNovaReg-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} + diff --git a/assets/img/circle-alt-small.png b/assets/img/circle-alt-small.png new file mode 100644 index 00000000..16bf84ee Binary files /dev/null and b/assets/img/circle-alt-small.png differ diff --git a/assets/img/circle-alt.png b/assets/img/circle-alt.png new file mode 100644 index 00000000..f0c16f02 Binary files /dev/null and b/assets/img/circle-alt.png differ diff --git a/assets/img/fighters/Untitled.xcf b/assets/img/fighters/Untitled.xcf new file mode 100644 index 00000000..24008b45 Binary files /dev/null and b/assets/img/fighters/Untitled.xcf differ diff --git a/assets/img/fighters/bg-alt-far.jpg b/assets/img/fighters/bg-alt-far.jpg new file mode 100644 index 00000000..0b1c28d9 Binary files /dev/null and b/assets/img/fighters/bg-alt-far.jpg differ diff --git a/assets/img/fighters/bg-alt-far.png b/assets/img/fighters/bg-alt-far.png new file mode 100644 index 00000000..fa508dfb Binary files /dev/null and b/assets/img/fighters/bg-alt-far.png differ diff --git a/assets/img/fighters/bg-alt-near.jpg b/assets/img/fighters/bg-alt-near.jpg new file mode 100644 index 00000000..11b753f6 Binary files /dev/null and b/assets/img/fighters/bg-alt-near.jpg differ diff --git a/assets/img/fighters/bg-alt-near.png b/assets/img/fighters/bg-alt-near.png new file mode 100644 index 00000000..ce813e76 Binary files /dev/null and b/assets/img/fighters/bg-alt-near.png differ diff --git a/assets/img/fighters/bg-alt.jpg b/assets/img/fighters/bg-alt.jpg new file mode 100644 index 00000000..9ed3b384 Binary files /dev/null and b/assets/img/fighters/bg-alt.jpg differ diff --git a/assets/img/fighters/bg-alt.png b/assets/img/fighters/bg-alt.png new file mode 100644 index 00000000..7986b211 Binary files /dev/null and b/assets/img/fighters/bg-alt.png differ diff --git a/assets/img/fighters/bg-dark-102-far.jpg b/assets/img/fighters/bg-dark-102-far.jpg new file mode 100644 index 00000000..1373dcf1 Binary files /dev/null and b/assets/img/fighters/bg-dark-102-far.jpg differ diff --git a/assets/img/fighters/bg-dark-102-near.png b/assets/img/fighters/bg-dark-102-near.png new file mode 100644 index 00000000..6c7bca1b Binary files /dev/null and b/assets/img/fighters/bg-dark-102-near.png differ diff --git a/assets/img/fighters/bg-fire-112-far.jpg b/assets/img/fighters/bg-fire-112-far.jpg new file mode 100644 index 00000000..055c5ffd Binary files /dev/null and b/assets/img/fighters/bg-fire-112-far.jpg differ diff --git a/assets/img/fighters/bg-fire-112-near.png b/assets/img/fighters/bg-fire-112-near.png new file mode 100644 index 00000000..13633189 Binary files /dev/null and b/assets/img/fighters/bg-fire-112-near.png differ diff --git a/assets/img/fighters/fighter2weapons.xcf b/assets/img/fighters/fighter2weapons.xcf new file mode 100644 index 00000000..034b9b35 Binary files /dev/null and b/assets/img/fighters/fighter2weapons.xcf differ diff --git a/assets/img/weapon-profile-alt-2.png b/assets/img/weapon-profile-alt-2.png new file mode 100644 index 00000000..5507d4f8 Binary files /dev/null and b/assets/img/weapon-profile-alt-2.png differ diff --git a/assets/img/weapon-profile-alt.png b/assets/img/weapon-profile-alt.png new file mode 100644 index 00000000..c646971a Binary files /dev/null and b/assets/img/weapon-profile-alt.png differ diff --git a/assets/js/addKerning.js b/assets/js/addKerning.js new file mode 100644 index 00000000..67b23d00 --- /dev/null +++ b/assets/js/addKerning.js @@ -0,0 +1,53 @@ +/** + * CanvasRenderingContext2D.renderText extension + coutesy of Davidhong on JSfiddle + */ + +if (CanvasRenderingContext2D && !CanvasRenderingContext2D.renderText) { + // @param letterSpacing {float} CSS letter-spacing property + CanvasRenderingContext2D.prototype.renderText = function (text, x, y, letterSpacing) { + if (!text || typeof text !== 'string' || text.length === 0) { + return; + } + + if (typeof letterSpacing === 'undefined') { + letterSpacing = 0; + } + + // letterSpacing of 0 means normal letter-spacing + + var characters = String.prototype.split.call(text, ''), + index = 0, + current, + currentPosition = x, + align = 1; + + if (this.textAlign === 'right') { + characters = characters.reverse(); + align = -1; + } else if (this.textAlign === 'center') { + var totalWidth = 0; + for (var i = 0; i < characters.length; i++) { + totalWidth += (this.measureText(characters[i]).width + letterSpacing); + } + currentPosition = x - (totalWidth / 2); + } + + while (index < text.length) { + current = characters[index++]; + this.fillText(current, currentPosition, y); + currentPosition += (align * (this.measureText(current).width + letterSpacing)); + } + } +} +/* +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.textAlign = "center"; +var x = (canvas.width / 2) + 3.5; +ctx.renderText('David Hong', x, canvas.height, 0); +ctx.renderText('David Hong', x, canvas.height - 19, 3); +ctx.renderText('David Hong', x, canvas.height - 40, 5); +ctx.renderText('David Hong', x, canvas.height - 61, 10); +ctx.renderText('David Hong', x, canvas.height - 82, 15); +*/ diff --git a/assets/js/fighters.js b/assets/js/fighters.js index ced1dfca..71845489 100644 --- a/assets/js/fighters.js +++ b/assets/js/fighters.js @@ -1,3 +1,7 @@ +isAltCard = function(){ + return document.getElementById('select-bg-alt').checked; +} + writeValue = function(ctx, value, pos) { var scale = getScalingFactor(getCanvas(), getBackgroundImage()); pos = {x: pos.x / scale.x, y: pos.y / scale.y }; @@ -9,10 +13,13 @@ writeValue = function(ctx, value, pos) { } getScalingFactor = function(canvas, warcryCardOne) { + return {x:1,y:1} +/* return { x: canvas.width / warcryCardOne.width, y: canvas.height / warcryCardOne.height }; +*/ } getCanvas = function() { @@ -23,28 +30,53 @@ getContext = function() { return getCanvas().getContext("2d"); } +getNearBackgroundImage = function() { + let bg = $("input[type='radio'][name='toggle-backgrounds']:checked")[0].id; + + return document.getElementById(bg.replace('select-','')+"-near"); +} + +getFarBackgroundImage = function() { + let bg = $("input[type='radio'][name='toggle-backgrounds']:checked")[0].id; + + return document.getElementById(bg.replace('select-','') + "-far"); + +} + getBackgroundImage = function() { - if (document.getElementById('select-bg-dark-102').checked) { - return document.getElementById('bg-dark-102'); - } else if (document.getElementById('select-bg-dark-112').checked) { - return document.getElementById('bg-dark-112'); + let bg = $("input[type='radio'][name='toggle-backgrounds']:checked")[0].id; + return document.getElementById(bg.replace('select-','')); + +} - } else if (document.getElementById('select-bg-dark-302').checked) { - return document.getElementById('bg-dark-302'); +drawFarBackground = function() { + getContext().fillStyle = "white"; + getContext().clearRect(0, 0, canvas.width, canvas.height); - } else if (document.getElementById('select-bg-dark-312').checked) { - return document.getElementById('bg-dark-312'); + let background = getFarBackgroundImage(); + if (!background) return 0; + let width = getCanvas().width; + let height = getCanvas().height; - } else if (document.getElementById('select-bg-fire-102').checked) { - return document.getElementById('bg-fire-102'); + if (isAltCard()) + height = width / 2.307; - } else if (document.getElementById('select-bg-fire-112').checked) { - return document.getElementById('bg-fire-112'); + getContext().drawImage( background, 0, 0, width, height); - } else if (document.getElementById('select-bg-light-102').checked) { - return document.getElementById('bg-light-102'); - } + return 1; +} + +drawNearBackground = function() { + let background = getNearBackgroundImage(); + if (!background) return; + + let width = getCanvas().width; + let height = getCanvas().height; + if (isAltCard()) + height = width / 2.307; + + getContext().drawImage(background, 0, 0, width, height); } drawBackground = function() { @@ -72,6 +104,7 @@ drawCardElementFromInputId = function(inputId, pixelPosition) { drawCardElementFromInput(document.getElementById(inputId), pixelPosition); } +// put all these values into an array so we can have different card types drawToughness = function(value) { writeScaled(value, {x: 545, y: 391}); } @@ -104,6 +137,52 @@ drawWeaponStatblock = function(pixelPosition) { scaledSize.y); } +drawWeaponAltBackground = function(){ + var image = document.getElementById("weapon-profile-alt-2"); + var position = {x:65,y:230} + var scaledPosition = scalePixelPosition(position); + //var scaledSize = scalePixelPosition({x: image.width, y: image.height}); + var scaledSize = scalePixelPosition({x: 932, y: 484}); + getContext().drawImage( + image, + scaledPosition.x, + scaledPosition.y, + scaledSize.x, + scaledSize.y); + //getContext().drawImage( image,0,0,1772,1241); +} + +drawWeaponAlt = function(weaponData,pos,background){ + + // weapon rune + var position = scalePixelPosition({x: pos.x, y: pos.y}); + var size = scalePixelPosition({x: 150, y: 150}); + drawImageSrc(position, size, weaponData.runemark); + + // weapon range + var range = (weaponData.rangeMin > 0 ? (weaponData.rangeMin + "-") : "") + weaponData.rangeMax; + getContext().textAlign = "center"; + writeScaled(range, {x: pos.x + 260, y: pos.y+100}); + + // weapon attacks + writeScaled( + weaponData.attacks, + {x: pos.x + 435, y:pos.y+100}); + + + //weapon strength + writeScaled( + weaponData.strength, + {x: pos.x + 630, y: pos.y+100}); + + //weapon damage + writeScaled( + weaponData.damageBase + "/" + weaponData.damageCrit, + {x: pos.x + 805, y: pos.y+100});//800 + +} + + drawWeapon = function(weaponData, pixelPosition) { drawWeaponStatblock(pixelPosition); @@ -213,6 +292,49 @@ function setSelectedFactionRunemark(runemark) { setSelectedRunemark($('#factionRunemarkSelect')[0], runemark, "faction", "black"); } +function cropFighterName(name, length){ + let names = []; + let add = '', jump = 0;; + while(name.length > length){ + let i = length; + add = ''; jump = 0; + while( i>0 && name[i]!=' ' && name[i]!='-') i--; + if (i == 0){ i = length; add = '-';} + if (name[i] == ' ') jump = 1; + names.push(name.slice(0,i)+add); + name = name.slice(i+jump) + } + names.push(name); + return names; +} + +function drawFighterNameAlt(){ + let name = cropFighterName(document.getElementById('fighterName') + .value.toUpperCase(),16); + // .match(/.{1,20}/g); + let pos = scalePixelPosition({x:65, y:80}) + let fontSize = 100; + if (name.length == 2){ pos = scalePixelPosition({x:65, y:38});} + if (name.length > 2 ){ pos = scalePixelPosition({x:65, y:30}); fontSize = 70} + + getContext().font = ""+fontSize+"px SinaNovaReg"; + let ctx = getContext(); + ctx.save(); + ctx.textBaseline = "top"; + ctx.textAlign = "left"; + for(let i = 0; i= positions.length) return; var img = $("#circle")[0]; + if (isAltCard()){ + positions = [{x: 595, y: 590}, {x: 790, y: 590}, {x: 692.5, y: 450}]; + + img = $("#circle-alt-small")[0]; + + } var position = scalePixelPosition(positions[index]); var size = scalePixelPosition({x: 160, y: 160}); @@ -253,12 +399,36 @@ function drawTagRunemark(index, runemark) { drawImageSrc(position, size, runemark); } +function drawModelBack(fighterData,callback){ + + if (fighterData.imageUrl != null) + { + var image = new Image(); + image.onload = function(){ + var position = scalePixelPosition({x: 590 + fighterData.imageProperties.offsetX, y: fighterData.imageProperties.offsetY}); + var scale = fighterData.imageProperties.scalePercent/100.0; + var width = image.width * scale; + var height = image.height * scale; + getContext().drawImage(image, position.x, position.y, width, height); + + URL.revokeObjectURL(image.src); + callback(fighterData); + }; + image.src = fighterData.imageUrl; + + }else{ //draw rest if no fighter image + callback(fighterData) + } +} + + + function drawModel(imageUrl, imageProps) { if (imageUrl != null) { var image = new Image(); - image.onload = function(){ + image.onload = function(callback){ var position = scalePixelPosition({x: 590 + imageProps.offsetX, y: imageProps.offsetY}); var scale = imageProps.scalePercent/100.0; var width = image.width * scale; @@ -464,10 +634,28 @@ function readControls() data.tagRunemarks = readTagRunemarks(); data.weapon1 = readWeaponControls("#weapon1"); data.weapon2 = readWeaponControls("#weapon2"); - return data; } +function drawFactionRunemarkAlt(image){ + + let bg = $("#circle-alt")[0]; + let position = scalePixelPosition({x: 1176, y: 50}); + let size = scalePixelPosition({x: 220, y: 220}); + getContext().drawImage(bg, position.x, position.y, size.x, size.y); + + position = scalePixelPosition({x: 1206, y: 78}); + size = scalePixelPosition({x: 160, y: 160}); + drawImageSrc(position, size, image); + // //draw background circle + // let background = $("#circle-alt")[0]; + // console.log(background); + // var position = scalePixelPosition({x: 1176, y: 50}); + // var size = scalePixelPosition({x: 210, y: 280}); + // drawImageSrc(position, size, background); + // drawImageSrc(position, size, image); +} + function drawFactionRunemark(image) { var position = scalePixelPosition({x: 67.5, y: 67.5}); @@ -475,10 +663,74 @@ function drawFactionRunemark(image) drawImageSrc(position, size, image); } + +// pass second part of rendering as callback after model is drawn render = function(fighterData) { - drawBackground(); - drawModel(fighterData.imageUrl, fighterData.imageProperties); + fighterData.bgseperate = drawFarBackground(); + if (!fighterData.bgseperate) drawBackground(); + drawModelBack(fighterData,renderAfterModel) + +} + +cropCard = function() { + let ctx = getContext(); + ctx.clearRect(0, 0, canvas.width, 100);// top + ctx.clearRect(0, 0, 100, 600);// left + ctx.clearRect(canvas.width-100,0, 100, 600);// right + ctx.clearRect(0, 600, canvas.width, canvas.height-600); // bottom +} + +//when middle model picture is drawn, complete +renderAfterModel = function(fighterData){ + if (isAltCard()){ + + cropCard(); + if (fighterData.bgseperate) drawNearBackground(); + drawFighterNameAlt(); + drawFactionRunemarkAlt(fighterData.factionRunemark); + + getContext().font = "70px rodchenkoctt"; + getContext().fillStyle = "black"; + + getContext().textBaseline = "middle"; //middle, right, left + getContext().textAlign = "center"; + + writeScaled(fighterData.move, {x: 1310, y: 642}); // move + writeScaled(fighterData.toughness, {x: 1486, y: 642}); // toughness + getContext().textAlign = "left"; + writeScaled(fighterData.wounds, {x: 1620, y: 642}); // wounds + + getContext().textAlign = "center"; + getContext().fillStyle = "white"; + + writeScaled(fighterData.pointCost, {x: 1612, y: 166}); // point cost + + getContext().font = "70px rodchenkoctt"; + getContext().textBaseline = "top"; + getContext().textAlign = "left"; + getContext().fillStyle = "black"; + // draw weapons + if (fighterData.weapon1.enabled && fighterData.weapon2.enabled) { + //drawWeaponAlt = function(weaponData,pos){ + drawWeaponAltBackground(); + + drawWeaponAlt(fighterData.weapon1, {x: 93, y: 290}) + drawWeaponAlt(fighterData.weapon2, {x: 93, y: 522}) + + }else if (fighterData.weapon1.enabled){ + drawWeaponAlt(fighterData.weapon1, {x: 93, y: 290}) + + }else if (fighterData.weapon2.enabled){ + drawWeaponAlt(fighterData.weapon2, {x: 93, y: 290}) + } + + drawTagRunemarksAlt(fighterData); + + } else { //original card size + + if (fighterData.bgseperate) drawNearBackground(); + drawFactionRunemark(fighterData.factionRunemark); getContext().font = "92px rodchenkoctt"; @@ -507,23 +759,26 @@ render = function(fighterData) { if (fighterData.weapon1.enabled && fighterData.weapon2.enabled) { - drawWeapon(fighterData.weapon1, {x: 50, y: 750}); // Default was x:29, y:397 - drawWeapon(fighterData.weapon2, {x: 50, y: 950}); // Default was x:29, y:564 + drawWeapon(fighterData.weapon1, {x: 50, y: 750}); // Default was x:29, y:397 + drawWeapon(fighterData.weapon2, {x: 50, y: 950}); // Default was x:29, y:564 } else if (fighterData.weapon1.enabled) { - drawWeapon(fighterData.weapon1, {x: 50, y: 850}); // Default was x:29, y:463 + drawWeapon(fighterData.weapon1, {x: 50, y: 850}); // Default was x:29, y:463 } else if (fighterData.weapon2.enabled) { - drawWeapon(fighterData.weapon2, {x: 50, y: 850}); // Default was x:29, y:463 + drawWeapon(fighterData.weapon2, {x: 50, y: 850}); // Default was x:29, y:463 } + for (i = 0; i < fighterData.tagRunemarks.length; i++) { drawTagRunemark(i, fighterData.tagRunemarks[i]); } + } } + function writeControls(fighterData) { setName(fighterData.name); @@ -888,8 +1143,9 @@ function onDeleteClicked() // … // … -function saveCardAsImage() { +function saveCardAsImage_old() { var element = document.createElement('a'); + element.setAttribute('href', document.getElementById('canvas').toDataURL('image/png')); element.setAttribute('download', 'warcry-fighter-card.png'); element.style.display = 'none'; @@ -898,6 +1154,30 @@ function saveCardAsImage() { document.body.removeChild(element); } +// alter for small card cropping +function saveCardAsImage() { + + var canvas = document.getElementById('canvas') + var tempCanvas; + if (isAltCard()){ + tempCanvas = document.createElement("canvas"); + let tCtx = tempCanvas.getContext("2d"); + tempCanvas.width = canvas.width; + tempCanvas.height = 770; + tCtx.drawImage(canvas,0,0); + }else{ + tempCanvas = document.getElementById('canvas') + } + + var element = document.createElement('a'); + + element.setAttribute('href', tempCanvas.toDataURL('image/png')); + element.setAttribute('download', 'warcry-fighter-card.png'); + element.style.display = 'none'; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); +} $(document).ready(function() { var c=document.getElementById('canvas'); var ctx=c.getContext('2d'); diff --git a/index.html b/index.html index 0df27305..d12d09a1 100644 --- a/index.html +++ b/index.html @@ -62,6 +62,7 @@ +