diff --git a/src/components/Bismillah/index.js b/src/components/Bismillah/index.js index 02735dc75..2b8a40036 100644 --- a/src/components/Bismillah/index.js +++ b/src/components/Bismillah/index.js @@ -5,10 +5,12 @@ const Bismillah = ({ chapter }) => { if (chapter && chapter.bismillahPre) { return (
- ﭑﭒﭓ + ﷽
); } diff --git a/src/components/Home/SurahsList/index.js b/src/components/Home/SurahsList/index.js index 0c747c46a..99df1d3f1 100644 --- a/src/components/Home/SurahsList/index.js +++ b/src/components/Home/SurahsList/index.js @@ -19,11 +19,15 @@ const SurahsList = (props) => {
{chapter.nameSimple} -
- {chapter.translatedName.name}
-
- {chapter.nameArabic} +
+ +
+ +
+ + {chapter.translatedName.name} +
diff --git a/src/components/Home/SurahsList/style.scss b/src/components/Home/SurahsList/style.scss index 08aedee52..e0e170ee4 100644 --- a/src/components/Home/SurahsList/style.scss +++ b/src/components/Home/SurahsList/style.scss @@ -12,7 +12,7 @@ padding: 10px 10px; } - .english { + .translated_name { font-size: 10px; } .arabic { diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js index a1a04c7df..fab0a343a 100644 --- a/src/containers/Surah/index.js +++ b/src/containers/Surah/index.js @@ -377,11 +377,6 @@ class Surah extends Component { style={[ { cssText: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}` // eslint-disable-line max-len - }, - { - cssText: `@font-face {font-family: 'bismillah'; - src: url('//quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')} - .bismillah{font-family: 'bismillah'; font-size: 36px !important; color: #000; padding: 25px 0px;}` // eslint-disable-line max-len } ]} /> diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss index 06687b4b5..d151ff881 100644 --- a/src/styles/fonts/_fonts.scss +++ b/src/styles/fonts/_fonts.scss @@ -60,6 +60,36 @@ font-style: normal; } +@font-face { + font-family: 'surah_names'; + src: url('../../static/fonts/surah_names/surah_names.eot?yg3f94'); + src: url('../../static/fonts/surah_names/surah_names.eot?yg3f94#iefix') format('embedded-opentype'), + url('../../static/fonts/surah_names/surah_names.ttf?yg3f94') format('truetype'), + url('../../static/fonts/surah_names/surah_names.woff?yg3f94') format('woff'), + url('../../static/fonts/surah_names/surah_names.svg?yg3f94#surah_names') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'bismillah'; + src: url('../../static/fonts/bismillah/bismillah.eot?yg3f94'); + src: url('../../static/fonts/bismillah/bismillah.eot?yg3f94#iefix') format('embedded-opentype'), + url('../../static/fonts/bismillah/bismillah.ttf?yg3f94') format('truetype'), + url('../../static/fonts/bismillah/bismillah.woff?yg3f94') format('woff'), + url('../../static/fonts/bismillah/bismillah.svg?yg3f94#bismillah') format('svg'); + font-weight: normal; + font-style: normal; +} + + +#bismillah{ + font-family: 'bismillah'; + font-size: 60px; + color: #000; + padding: 25px 0px; +} + /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ html:hover [class^="ss-"] { -ms-zoom: 1; diff --git a/src/styles/main.scss b/src/styles/main.scss index 94779b874..ed5865153 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -12,6 +12,7 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; @import 'partials/highlight'; @import 'nightmode'; @import 'partials/no-script'; +@import 'partials/surah_names'; html,body{ height: 100%; diff --git a/src/styles/partials/_surah_names.scss b/src/styles/partials/_surah_names.scss new file mode 100644 index 000000000..728b569a9 --- /dev/null +++ b/src/styles/partials/_surah_names.scss @@ -0,0 +1,360 @@ +[class^="icon-surah"], [class*=" icon-surah"] { + font-family: 'surah_names' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 25px; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-surah-surah:before { + content: "\691"; +} +.icon-surah1:before { + content: "\692"; +} +.icon-surah2:before { + content: "\6a9"; +} +.icon-surah3:before { + content: "\6aa"; +} +.icon-surah4:before { + content: "\6ab"; +} +.icon-surah5:before { + content: "\6ac"; +} +.icon-surah6:before { + content: "\6af"; +} +.icon-surah7:before { + content: "\6b0"; +} +.icon-surah8:before { + content: "\6b1"; +} +.icon-surah9:before { + content: "\6b2"; +} +.icon-surah10:before { + content: "\6b3"; +} +.icon-surah11:before { + content: "\6b4"; +} +.icon-surah12:before { + content: "\6b5"; +} +.icon-surah13:before { + content: "\6b6"; +} +.icon-surah14:before { + content: "\6b7"; +} +.icon-surah15:before { + content: "\6b8"; +} +.icon-surah16:before { + content: "\6b9"; +} +.icon-surah17:before { + content: "\6ba"; +} +.icon-surah18:before { + content: "\6bb"; +} +.icon-surah19:before { + content: "\6bc"; +} +.icon-surah20:before { + content: "\6bd"; +} +.icon-surah21:before { + content: "\6be"; +} +.icon-surah22:before { + content: "\6bf"; +} +.icon-surah23:before { + content: "\6c0"; +} +.icon-surah24:before { + content: "\6c1"; +} +.icon-surah25:before { + content: "\6c2"; +} +.icon-surah26:before { + content: "\6c3"; +} +.icon-surah27:before { + content: "\6c4"; +} +.icon-surah28:before { + content: "\6c5"; +} +.icon-surah29:before { + content: "\6c6"; +} +.icon-surah30:before { + content: "\6c7"; +} +.icon-surah31:before { + content: "\6c8"; +} +.icon-surah32:before { + content: "\6c9"; +} +.icon-surah33:before { + content: "\6ca"; +} +.icon-surah34:before { + content: "\6d2"; +} +.icon-surah35:before { + content: "\6d3"; +} +.icon-surah36:before { + content: "\6d4"; +} +.icon-surah37:before { + content: "\6d5"; +} +.icon-surah38:before { + content: "\6ad"; +} +.icon-surah39:before { + content: "\6ae"; +} +.icon-surah40:before { + content: "\6cb"; +} +.icon-surah41:before { + content: "\6cc"; +} +.icon-surah42:before { + content: "\6cd"; +} +.icon-surah43:before { + content: "\6ce"; +} +.icon-surah44:before { + content: "\6cf"; +} +.icon-surah45:before { + content: "\6d0"; +} +.icon-surah46:before { + content: "\6d1"; +} +.icon-surah47:before { + content: "\6d6"; +} +.icon-surah48:before { + content: "\677"; +} +.icon-surah49:before { + content: "\6d7"; +} +.icon-surah50:before { + content: "\6d8"; +} +.icon-surah51:before { + content: "\6d9"; +} +.icon-surah52:before { + content: "\6da"; +} +.icon-surah53:before { + content: "\6db"; +} +.icon-surah54:before { + content: "\6dc"; +} +.icon-surah55:before { + content: "\6dd"; +} +.icon-surah56:before { + content: "\6de"; +} +.icon-surah57:before { + content: "\6df"; +} +.icon-surah58:before { + content: "\6e0"; +} +.icon-surah59:before { + content: "\649"; +} +.icon-surah60:before { + content: "\64a"; +} +.icon-surah61:before { + content: "\fbea"; +} +.icon-surah62:before { + content: "\fbeb"; +} +.icon-surah63:before { + content: "\fbec"; +} +.icon-surah64:before { + content: "\fbed"; +} +.icon-surah65:before { + content: "\fbee"; +} +.icon-surah66:before { + content: "\fbef"; +} +.icon-surah67:before { + content: "\fbf0"; +} +.icon-surah68:before { + content: "\fbf1"; +} +.icon-surah69:before { + content: "\fbf2"; +} +.icon-surah70:before { + content: "\fbf3"; +} +.icon-surah71:before { + content: "\fbf4"; +} +.icon-surah72:before { + content: "\fbf5"; +} +.icon-surah73:before { + content: "\fbf6"; +} +.icon-surah74:before { + content: "\fbf7"; +} +.icon-surah75:before { + content: "\fbf8"; +} +.icon-surah76:before { + content: "\fbf9"; +} +.icon-surah77:before { + content: "\fbfa"; +} +.icon-surah78:before { + content: "\fbfb"; +} +.icon-surah79:before { + content: "\6e1"; +} +.icon-surah80:before { + content: "\6e2"; +} +.icon-surah81:before { + content: "\6e3"; +} +.icon-surah82:before { + content: "\6e4"; +} +.icon-surah83:before { + content: "\fc00"; +} +.icon-surah84:before { + content: "\fc01"; +} +.icon-surah85:before { + content: "\fc02"; +} +.icon-surah86:before { + content: "\fc03"; +} +.icon-surah87:before { + content: "\fc04"; +} +.icon-surah88:before { + content: "\fc05"; +} +.icon-surah89:before { + content: "\fc06"; +} +.icon-surah90:before { + content: "\fc07"; +} +.icon-surah91:before { + content: "\fc08"; +} +.icon-surah92:before { + content: "\fc09"; +} +.icon-surah93:before { + content: "\fc0a"; +} +.icon-surah94:before { + content: "\fc0b"; +} +.icon-surah95:before { + content: "\fc0c"; +} +.icon-surah96:before { + content: "\fc0d"; +} +.icon-surah97:before { + content: "\fc0e"; +} +.icon-surah98:before { + content: "\fc0f"; +} +.icon-surah99:before { + content: "\fc10"; +} +.icon-surah100:before { + content: "\fc11"; +} +.icon-surah101:before { + content: "\fc12"; +} +.icon-surah102:before { + content: "\fc13"; +} +.icon-surah103:before { + content: "\fc14"; +} +.icon-surah104:before { + content: "\fc15"; +} +.icon-surah105:before { + content: "\fc16"; +} +.icon-surah106:before { + content: "\fc17"; +} +.icon-surah107:before { + content: "\fc18"; +} +.icon-surah108:before { + content: "\fc19"; +} +.icon-surah109:before { + content: "\fc1a"; +} +.icon-surah110:before { + content: "\fc1b"; +} +.icon-surah111:before { + content: "\fc1c"; +} +.icon-surah112:before { + content: "\fc1d"; +} +.icon-surah113:before { + content: "\fc1e"; +} +.icon-surah114:before { + content: "\fc1f"; +} diff --git a/static/fonts/bismillah/bismillah.eot b/static/fonts/bismillah/bismillah.eot new file mode 100755 index 000000000..5c15c5716 Binary files /dev/null and b/static/fonts/bismillah/bismillah.eot differ diff --git a/static/fonts/bismillah/bismillah.svg b/static/fonts/bismillah/bismillah.svg new file mode 100755 index 000000000..56f74fe3a --- /dev/null +++ b/static/fonts/bismillah/bismillah.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/static/fonts/bismillah/bismillah.ttf b/static/fonts/bismillah/bismillah.ttf new file mode 100755 index 000000000..ac3609a96 Binary files /dev/null and b/static/fonts/bismillah/bismillah.ttf differ diff --git a/static/fonts/bismillah/bismillah.woff b/static/fonts/bismillah/bismillah.woff new file mode 100755 index 000000000..9d6774c53 Binary files /dev/null and b/static/fonts/bismillah/bismillah.woff differ diff --git a/static/fonts/surah_names/surah_names.eot b/static/fonts/surah_names/surah_names.eot new file mode 100755 index 000000000..133dae1a3 Binary files /dev/null and b/static/fonts/surah_names/surah_names.eot differ diff --git a/static/fonts/surah_names/surah_names.svg b/static/fonts/surah_names/surah_names.svg new file mode 100755 index 000000000..b484e94f7 --- /dev/null +++ b/static/fonts/surah_names/surah_names.svg @@ -0,0 +1,125 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/fonts/surah_names/surah_names.ttf b/static/fonts/surah_names/surah_names.ttf new file mode 100755 index 000000000..d3c1705bb Binary files /dev/null and b/static/fonts/surah_names/surah_names.ttf differ diff --git a/static/fonts/surah_names/surah_names.woff b/static/fonts/surah_names/surah_names.woff new file mode 100755 index 000000000..1540cd6bd Binary files /dev/null and b/static/fonts/surah_names/surah_names.woff differ