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 0000000..2ef48de Binary files /dev/null and b/app/static/fonts/icomoon/fonts/icomoon.ttf differ diff --git a/app/static/fonts/icomoon/fonts/icomoon.woff b/app/static/fonts/icomoon/fonts/icomoon.woff new file mode 100755 index 0000000..aa8d35b Binary files /dev/null and b/app/static/fonts/icomoon/fonts/icomoon.woff differ 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