From a7ffc402c05fe937b983889f26ebf94702b59c77 Mon Sep 17 00:00:00 2001 From: imohkay Date: Mon, 25 Oct 2021 12:01:19 +0530 Subject: [PATCH] replace unicode play icon with font face icon --- app/static/css/partials/_film.scss | 7 +- app/static/css/partials/_icomoon.scss | 38 +++++ app/static/css/style.scss | 1 + app/static/fonts/icomoon/Read Me.txt | 7 + app/static/fonts/icomoon/demo-files/demo.css | 152 +++++++++++++++++++ app/static/fonts/icomoon/demo-files/demo.js | 30 ++++ app/static/fonts/icomoon/demo.html | 94 ++++++++++++ app/static/fonts/icomoon/fonts/icomoon.svg | 14 ++ app/static/fonts/icomoon/fonts/icomoon.ttf | Bin 0 -> 1148 bytes app/static/fonts/icomoon/fonts/icomoon.woff | Bin 0 -> 1224 bytes app/static/fonts/icomoon/selection.json | 1 + app/static/fonts/icomoon/style.css | 38 +++++ app/templates/film.html | 2 +- 13 files changed, 382 insertions(+), 2 deletions(-) create mode 100755 app/static/css/partials/_icomoon.scss create mode 100755 app/static/fonts/icomoon/Read Me.txt create mode 100755 app/static/fonts/icomoon/demo-files/demo.css create mode 100755 app/static/fonts/icomoon/demo-files/demo.js create mode 100755 app/static/fonts/icomoon/demo.html create mode 100755 app/static/fonts/icomoon/fonts/icomoon.svg create mode 100755 app/static/fonts/icomoon/fonts/icomoon.ttf create mode 100755 app/static/fonts/icomoon/fonts/icomoon.woff create mode 100755 app/static/fonts/icomoon/selection.json create mode 100755 app/static/fonts/icomoon/style.css diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index d5fd5ee..a11cfe1 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -152,7 +152,6 @@ main > .film { border: 4px solid rgba(#fff, 0.3); border-radius: 50%; box-sizing: border-box; - font-size: 36px; text-decoration: none; width: 54px; height: 54px; @@ -160,6 +159,12 @@ main > .film { align-items: center; justify-content: center; margin: auto; + + .text { + font-family: "icomoon"; + font-size: 42px; + display: block; + } } .film-play-block { diff --git a/app/static/css/partials/_icomoon.scss b/app/static/css/partials/_icomoon.scss new file mode 100755 index 0000000..cc207a1 --- /dev/null +++ b/app/static/css/partials/_icomoon.scss @@ -0,0 +1,38 @@ +@font-face { + font-family: 'icomoon'; + src: + url('/static/fonts/icomoon/icomoon.ttf?ru5m2') format('truetype'), + url('/static/fonts/icomoon/fonts/icomoon.woff?ru5m2') format('woff'), + url('/static/fonts/icomoon/icomoon.svg?ru5m2#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="f-icon-"], [class*=" f-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.f-icon-triangle-up:before { + content: "\e900"; +} +.f-icon-triangle-right:before { + content: "\e901"; +} +.f-icon-triangle-left:before { + content: "\e902"; +} +.f-icon-triangle-down:before { + content: "\e903"; +} diff --git a/app/static/css/style.scss b/app/static/css/style.scss index 4eee9b0..0838308 100755 --- a/app/static/css/style.scss +++ b/app/static/css/style.scss @@ -1,4 +1,5 @@ @import "partials/reset"; +@import "partials/icomoon"; @import "partials/layout"; @import "partials/titleanimation"; @import "partials/menu"; diff --git a/app/static/fonts/icomoon/Read Me.txt b/app/static/fonts/icomoon/Read Me.txt new file mode 100755 index 0000000..e39b544 --- /dev/null +++ b/app/static/fonts/icomoon/Read Me.txt @@ -0,0 +1,7 @@ +Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. + +To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts + +You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. + +You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. diff --git a/app/static/fonts/icomoon/demo-files/demo.css b/app/static/fonts/icomoon/demo-files/demo.css new file mode 100755 index 0000000..640525b --- /dev/null +++ b/app/static/fonts/icomoon/demo-files/demo.css @@ -0,0 +1,152 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; + font-size: 1em; + line-height: 1.5; + color: #555; + background: #fff; +} +h1 { + font-size: 1.5em; + font-weight: normal; +} +small { + font-size: .66666667em; +} +a { + color: #e74c3c; + text-decoration: none; +} +a:hover, a:focus { + box-shadow: 0 1px #e74c3c; +} +.bshadow0, input { + box-shadow: inset 0 -2px #e7e7e7; +} +input:hover { + box-shadow: inset 0 -2px #ccc; +} +input, fieldset { + font-family: sans-serif; + font-size: 1em; + margin: 0; + padding: 0; + border: 0; +} +input { + color: inherit; + line-height: 1.5; + height: 1.5em; + padding: .25em 0; +} +input:focus { + outline: none; + box-shadow: inset 0 -2px #449fdb; +} +.glyph { + font-size: 16px; + width: 15em; + padding-bottom: 1em; + margin-right: 4em; + margin-bottom: 1em; + float: left; + overflow: hidden; +} +.liga { + width: 80%; + width: calc(100% - 2.5em); +} +.talign-right { + text-align: right; +} +.talign-center { + text-align: center; +} +.bgc1 { + background: #f1f1f1; +} +.fgc1 { + color: #999; +} +.fgc0 { + color: #000; +} +p { + margin-top: 1em; + margin-bottom: 1em; +} +.mvm { + margin-top: .75em; + margin-bottom: .75em; +} +.mtn { + margin-top: 0; +} +.mtl, .mal { + margin-top: 1.5em; +} +.mbl, .mal { + margin-bottom: 1.5em; +} +.mal, .mhl { + margin-left: 1.5em; + margin-right: 1.5em; +} +.mhmm { + margin-left: 1em; + margin-right: 1em; +} +.mls { + margin-left: .25em; +} +.ptl { + padding-top: 1.5em; +} +.pbs, .pvs { + padding-bottom: .25em; +} +.pvs, .pts { + padding-top: .25em; +} +.unit { + float: left; +} +.unitRight { + float: right; +} +.size1of2 { + width: 50%; +} +.size1of1 { + width: 100%; +} +.clearfix:before, .clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; +} +.hidden-true { + display: none; +} +.textbox0 { + width: 3em; + background: #f1f1f1; + padding: .25em .5em; + line-height: 1.5; + height: 1.5em; +} +#testDrive { + display: block; + padding-top: 24px; + line-height: 1.5; +} +.fs0 { + font-size: 16px; +} +.fs1 { + font-size: 20px; +} + diff --git a/app/static/fonts/icomoon/demo-files/demo.js b/app/static/fonts/icomoon/demo-files/demo.js new file mode 100755 index 0000000..6f45f1c --- /dev/null +++ b/app/static/fonts/icomoon/demo-files/demo.js @@ -0,0 +1,30 @@ +if (!('boxShadow' in document.body.style)) { + document.body.setAttribute('class', 'noBoxShadow'); +} + +document.body.addEventListener("click", function(e) { + var target = e.target; + if (target.tagName === "INPUT" && + target.getAttribute('class').indexOf('liga') === -1) { + target.select(); + } +}); + +(function() { + var fontSize = document.getElementById('fontSize'), + testDrive = document.getElementById('testDrive'), + testText = document.getElementById('testText'); + function updateTest() { + testDrive.innerHTML = testText.value || String.fromCharCode(160); + if (window.icomoonLiga) { + window.icomoonLiga(testDrive); + } + } + function updateSize() { + testDrive.style.fontSize = fontSize.value + 'px'; + } + fontSize.addEventListener('change', updateSize, false); + testText.addEventListener('input', updateTest, false); + testText.addEventListener('change', updateTest, false); + updateSize(); +}()); diff --git a/app/static/fonts/icomoon/demo.html b/app/static/fonts/icomoon/demo.html new file mode 100755 index 0000000..d8c030c --- /dev/null +++ b/app/static/fonts/icomoon/demo.html @@ -0,0 +1,94 @@ + + + + + IcoMoon Demo + + + + + +
+

Font Name: icomoon (Glyphs: 4)

+
+
+

Grid Size: 20

+
+
+ + f-icon-triangle-up +
+
+ + +
+
+ liga: + +
+
+
+
+ + f-icon-triangle-right +
+
+ + +
+
+ liga: + +
+
+
+
+ + f-icon-triangle-left +
+
+ + +
+
+ liga: + +
+
+
+
+ + f-icon-triangle-down +
+
+ + +
+
+ liga: + +
+
+
+ + +
+

Font Test Drive

+ + +
  +
+
+ +
+

Generated by IcoMoon

+
+ + + + diff --git a/app/static/fonts/icomoon/fonts/icomoon.svg b/app/static/fonts/icomoon/fonts/icomoon.svg new file mode 100755 index 0000000..8c6fa16 --- /dev/null +++ b/app/static/fonts/icomoon/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/app/static/fonts/icomoon/fonts/icomoon.ttf b/app/static/fonts/icomoon/fonts/icomoon.ttf new file mode 100755 index 0000000000000000000000000000000000000000..2ef48de011c9bee48a177974c0401a54bfcf00a1 GIT binary patch literal 1148 zcmah|J!lhQ7=FIHOH5K|Y}FPd$_WJ*iK(ac2Me8wRjN=WlVGpOc?sn1Vtyb2hq{P# z(Y0}La1-**=X02A1Rj>4_mXU}D) z6YuGHM_n&@c73+^X$ufJ@;k2GtkWJQmp0|ry7x~%%BRUYx# zlDql`^1I}76|dEqfnkwvlAE=lWaBNKkiQ_G_Uuj_86?Qx$hdEN&i3{6Px8;4@wgr| zTilak$bKety(gZj{B7+cJx?`d#Wz@jTkR3SwfD*rFwpg#a0g2|l|gwIBQX__)1>AY zi>$7)axid-{tQyk_z0K-J^USps>&QdVG(|vHCQ*^S3oc;JLc1XiUT^S>X=`i|Js#cWYtuD7iyLautwc4FG~t9P<9%ZR1}F^az%qFR4cYo zAcLbgi8Hu@YbeqsyQKc!t1R0ulXxA^5;(+QG*=^DkFid?5MzV59peQ54aZ`fr2j^Y zGdPYdInzkfGs#GVHDWi$I`LwR4dRC}PGAQ7T2*b5{(B2gl0PYz5bN0WPG5!aHE}lmK literal 0 HcmV?d00001 diff --git a/app/static/fonts/icomoon/fonts/icomoon.woff b/app/static/fonts/icomoon/fonts/icomoon.woff new file mode 100755 index 0000000000000000000000000000000000000000..aa8d35bececa0727b4425807c50f067d222e12f8 GIT binary patch literal 1224 zcmah|J!lj`7=5$57w;~RKQ#e~vVveEXX0x7!9c3RC@~P_TC=&VcY)j8c(;c+NMj?C zM%%>J!a}SqEJ6@e@EUt7tDvooKX<-wcFsfzILn)P-~0Y%W_Rz;7mHBfaNeO`uj{ET z{O>V;>+Cr|WvMO-21hb)%b~wYtxEg0V660UqvAJ2drezn1w)lu>n^o7nFZ9?^J(N1?yQS~krz z4tZoEKMbh3?EO%%c|G@IHEtw4uk@f!NQ!N5sVB&==BDoSI9=5jcq&K#{-K8UTf%36 zUEAL7ZezwKs3@X0TupQrvT^!^k8_r&aX7fdHP4%}_$au$cK27eOAX}ETy;N>IVM9p zI4LMb4eBbXW&sy3>(+by|D&-8%UW%AhB~Qibfhj+o2K&6?)h?Rm_ARnyAnws(6;#K zykTXvJ079;qJ7NUGBp)fW^Hvm=IMRo`{8>R?hIc2hJHuy{L|B)J3@M^?keAo^pe3m zeZRac8N9%~6KVz7)RP*L<}ift%$hp#ID!*6gDbd(5+$jU{d2FqZfR^f58$QgrEth( z@G~J_G`dYbWw=A$G(5vU>Zsv;)NdG`$1!Y3PbWuZfS#0F`_tTTxMCJxLxP+SNq z&6;0l(|{Xoq6Q!J10#!Zl(>~33hI6mEW1lBceWhQac>0_b?=1TD=ZV~9r;MOE>l}V Vi}S2Lz+8F&?oq$+{V(NT{u`wzqcs2k literal 0 HcmV?d00001 diff --git a/app/static/fonts/icomoon/selection.json b/app/static/fonts/icomoon/selection.json new file mode 100755 index 0000000..cede3a1 --- /dev/null +++ b/app/static/fonts/icomoon/selection.json @@ -0,0 +1 @@ +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M768 716.8h-512l256-460.8 256 460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-up"],"grid":20},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":20,"code":59648,"name":"triangle-up"},"setIdx":0,"setId":16,"iconIdx":0},{"icon":{"paths":["M768 512l-460.8 256v-512l460.8 256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-right"],"grid":20},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":20,"code":59649,"name":"triangle-right"},"setIdx":0,"setId":16,"iconIdx":1},{"icon":{"paths":["M716.8 256v512l-460.8-256 460.8-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-left"],"grid":20},"attrs":[{}],"properties":{"order":3,"id":1,"prevSize":20,"code":59650,"name":"triangle-left"},"setIdx":0,"setId":16,"iconIdx":2},{"icon":{"paths":["M256 307.2h512l-256 460.8-256-460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-down"],"grid":20},"attrs":[{}],"properties":{"order":4,"id":0,"prevSize":20,"code":59651,"name":"triangle-down"},"setIdx":0,"setId":16,"iconIdx":3}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"f-icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true},"imagePref":{"prefix":"icon-","png":false,"useClassSelector":true,"color":16777215,"bgColor":16777215,"classSelector":".icon","name":"icomoon","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}} \ No newline at end of file diff --git a/app/static/fonts/icomoon/style.css b/app/static/fonts/icomoon/style.css new file mode 100755 index 0000000..8c7113e --- /dev/null +++ b/app/static/fonts/icomoon/style.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'icomoon'; + src: + url('fonts/icomoon.ttf?ru5m2') format('truetype'), + url('fonts/icomoon.woff?ru5m2') format('woff'), + url('fonts/icomoon.svg?ru5m2#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="f-icon-"], [class*=" f-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.f-icon-triangle-up:before { + content: "\e900"; +} +.f-icon-triangle-right:before { + content: "\e901"; +} +.f-icon-triangle-left:before { + content: "\e902"; +} +.f-icon-triangle-down:before { + content: "\e903"; +} diff --git a/app/templates/film.html b/app/templates/film.html index 1b21cf5..2896ab5 100755 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -52,7 +52,7 @@ body {
- +
OR
View on Pad.ma