From 4c6bf7ec68becb6b16ebc2cfe64d62682e92c7b8 Mon Sep 17 00:00:00 2001 From: Rafal Proszowski Date: Sat, 17 Jun 2017 15:09:29 +0100 Subject: [PATCH] Use custom fonts Font-awesome although is in fact awesome, is massive. We're not using every single icon, in fact, we're using only 4 out of 675... It's unreasonable to keep using it. We're preparing our own font and styling, to keep the same approach, with much less MB to be loaded. It also, fixes the issue with [go-libsas][1] we're having, allowing us to move forward with the application. [1]: https://github.com/wellington/go-libsass/issues/52 --- .gitignore | 1 - config.yml | 6 ---- package.json | 1 - public/fonts/icons.eot | Bin 0 -> 2642 bytes public/fonts/icons.svg | 71 ++++++++++++++++++++++++++++++++++++++++ public/fonts/icons.ttf | Bin 0 -> 2464 bytes public/fonts/icons.woff | Bin 0 -> 1812 bytes scss/_icons.scss | 56 +++++++++++++++++++++++++++++++ scss/_structure.scss | 2 +- scss/_variables.scss | 3 -- scss/app.scss | 2 +- templates/master.html | 10 +++--- 12 files changed, 134 insertions(+), 18 deletions(-) create mode 100644 public/fonts/icons.eot create mode 100644 public/fonts/icons.svg create mode 100644 public/fonts/icons.ttf create mode 100644 public/fonts/icons.woff create mode 100644 scss/_icons.scss diff --git a/.gitignore b/.gitignore index c03bca1..fd80448 100644 --- a/.gitignore +++ b/.gitignore @@ -7,5 +7,4 @@ npm-debug.log db/dbconf.yml vendor/ cache/ -fonts/ test/public/ diff --git a/config.yml b/config.yml index 4dd698e..c3291e8 100644 --- a/config.yml +++ b/config.yml @@ -8,16 +8,10 @@ keywords: php, html, css, scss, javascript, js, mysql, go, web, developer, engla version: 2.1.0 inline: initial_css: public/css/app.css -copy: - - name: font-awesome - src: node_modules/font-awesome/fonts/* - dest: public/fonts - force: true sass: include_paths: - scss - node_modules/bourbon/app/assets/stylesheets - - node_modules/font-awesome/scss - node_modules/susy/sass compile: - name: app diff --git a/package.json b/package.json index d024a45..5669f81 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "homepage": "https://github.com/paroxp/rafalp#readme", "devDependencies": { "bourbon": "^4.3.4", - "font-awesome": "^4.7.0", "susy": "^2.2.12" } } diff --git a/public/fonts/icons.eot b/public/fonts/icons.eot new file mode 100644 index 0000000000000000000000000000000000000000..cfd798669994d43f8934dda54436562e83742e1c GIT binary patch literal 2642 zcmdrOOKclO^u3w=+41iB?l)- z6~9AIAZ{EuAdnEP#J3X41yl*dfuA_^0PPKlsui^2fMVXPH!ZZN+?n0k_uV)1-n^N4 z``rLPwK7%l9*dGs17Jwo(jjrsb*&wqqEM1MzpXX8}c0v~Pz;1H5iqPKPXk>lvc8 z>ABNWufO8iPVzD8mu4pGkN5n3{Q$`>QLoGpgI~ih$X1Z(wKMbWr==0_5&bdIvAI^G z&aO&n`gbkS!TI{r3$Pc?keuv+)vV7?!cX5M0aW^*xffa|+h^9qvNXO$@}stIQyt2LU^s&N4$>CQ@@2jm*=#+*yV!1M&wL+LpvGt4+2!E;s~| z%@T&YTAL~8qDlA_o&}lMyK#!>?GC&Fy+F~uof#yZ{En>Vk+9wRfmf-gG^)IpQO-PV|`b-!`Izg&56ukf1_PBq@y|JS0e-cCMI$>oinu z4~oM49YY9BC%IRD`9DHCzhS-eJO{tv6uysFDHFFG!{A$ zp;4_xO3=aeUk7i3V1V2BNxmI^zu{O*0wv=27>o_lM)rKzPX98DNU4^~iFM zrnA7-NRNIw5RC>d8}98fk8T*cCq=mpK)Z(a2zlNQMc4u0FNA|iGF^%o7zq~(#Y(Xt zV6~FYq*KYvzjOboq;{2F`|dS*pOX~iZpH@JKlA|Sn#8!gZSTmKqB8DbY$SJNx5O1q zl9U6-ise#i`cX-Ct6Wwatqo(Ui%AB@W!ut43@9!=g^Chn>3tYbd-Or(Rdjw|PR}x3 zHKn}4OwAOzi?jzmC%-<0gG6TneoTYbv^2dyY>my^2exCJvtIWtvhOFq!7>8;%Y3$J5- zMuG;TMHA~st_hIklxD?rxm1l~gupn``c|rnT44~faBxSvc4VjS*|8y6?s2;f!=H$F z!o8zr=E=>xKNrg;)+Rj31Rk>@dU^IpWfVt-EXJikH05V{Vl391-^e|lSUxtO`qzcT znMy}X=S!N?2M~dEFa)qJlq#1}Nmc2`ls{7p<^;1X!qy&Zr~e=p`7zC!#1;uMysK7f+#p}>(Y=7$|V zqjBdPoWnzOPjvMq()rE7Ww6k2aE0t|fvt4qFTiQK{%5Hun4wa^qBFihF|(jxmjP86 zCVUHN)rmhtr2=eiEu3DQot|l1gN-4pkjqzxtt|`n#tg~ssuOB+_4aI|MYYErg~$HM z>7}_kRUkFH>}cC?k!CSzk1fg%3pP@}(`1*MhboLvbVqK@6KbtyyVhEqp0o + + + + +Created by FontForge 20160405 at Sat Jun 17 15:00:27 2017 + By Apache +Copyright (c) 2017, Apache + + + + + + + + + + + + + diff --git a/public/fonts/icons.ttf b/public/fonts/icons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..dfcf3ff690e1f2211afaebace09d42fdd72eca5d GIT binary patch literal 2464 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 literal 0 HcmV?d00001 diff --git a/scss/_icons.scss b/scss/_icons.scss new file mode 100644 index 0000000..1cfcf03 --- /dev/null +++ b/scss/_icons.scss @@ -0,0 +1,56 @@ +@font-face { + font-family: "Social"; + src: url("./fonts/icons.eot"); + src: url("./fonts/icons.eot?#iefix") format("embedded-opentype"), url("./fonts/icons.woff") format("woff"), url("./fonts/icons.ttf") format("truetype"), url("./fonts/icons.svg#icon") format("svg"); + font-weight: normal; + font-style: normal; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face{ + font-family: "Social"; + src: url("./fonts/icons.svg#icon") format("svg"); + } +} + +.icon { + &:before { + display: inline-block; + font-family: "Social"; + font-style: normal; + font-weight: normal; + font-variant: normal; + line-height: 1; + text-decoration: inherit; + text-rendering: optimizeLegibility; + text-transform: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + } + + &.envelope:before { + content: "\f100"; + } + + &.spotify:before { + content: "\f101"; + } + + &.github:before { + content: "\f102"; + } + + &.twitter:before { + content: "\f103"; + } + + &.linkedin:before { + content: "\f104"; + } +} +$icon-envelope: "\f100"; +$icon-spotify: "\f101"; +$icon-github: "\f102"; +$icon-twitter: "\f103"; +$icon-linkedin: "\f104"; diff --git a/scss/_structure.scss b/scss/_structure.scss index 7778c12..ee916d6 100644 --- a/scss/_structure.scss +++ b/scss/_structure.scss @@ -212,7 +212,7 @@ body { } } - .social { + .icons { cursor: default; @include user-select(none); diff --git a/scss/_variables.scss b/scss/_variables.scss index 933fe30..2b04694 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -51,6 +51,3 @@ $social: ( $mobile: 20em; $tablet: 48rem; $desktop: 60rem; - -// Font Awesome -$fa-font-path: "../node_modules/font-awesome/fonts" !default; \ No newline at end of file diff --git a/scss/app.scss b/scss/app.scss index cf5f1fd..762a6fe 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -3,7 +3,6 @@ // Include some toolkits. @import "bourbon"; -@import "font-awesome"; @import "susy"; // Import our dependencies. @@ -11,6 +10,7 @@ // Import rest of our styles. @import "global"; +@import "icons"; @import "page/about"; @import "page/home"; @import "structure"; diff --git a/templates/master.html b/templates/master.html index 36f5b1b..48d6b86 100644 --- a/templates/master.html +++ b/templates/master.html @@ -72,25 +72,25 @@

Web Developer