0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update icons for mute and unmute

Browse source
This commit is contained in:
imohkay 2021-10-26 15:56:07 +05:30
parent 48ad35555d
commit eab1b1b4f2
15 changed files with 120 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/static/css/partials/_about.scss
View file

@ -51,13 +51,13 @@
}
}
.about-phantasma-block {
//.about-phantasma-block {
@media screen and (min-width: 800px) {
background: rgba(255, 255, 255, 0.04);
padding: var(--spacing-2);
}
}
//@media screen and (min-width: 800px) {
//background: rgba(255, 255, 255, 0.04);
//padding: var(--spacing-2);
//}
//}
.accordion-checkbox {
position: absolute;

27
app/static/css/partials/_ascroll.scss
View file

@ -56,8 +56,8 @@
max-width: var(--container-width);
margin: auto;
padding: 20px 20px;
font-size: 22px;
line-height: 26px;
font-size: 20px;
line-height: 24px;
figure {
width: 100%;
@ -70,4 +70,27 @@
}
}
}
.annotation-icon-wrapper {
border: 3px solid rgba(#fff, 0.8);
border-radius: 50%;
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
background-size: 300% 100%;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
animation: background_animation 30s ease-in-out infinite;
opacity: 0.9;
&:hover, &:focus {
opacity: 1;
}
}
.annotation-icon {
color: rgba(#fff, 1);
font-size: 38px;
}
}

15
app/static/css/partials/_icomoon.scss
View file

@ -1,9 +1,9 @@
@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');
url('/static/fonts/icomoon/icomoon.ttf?5ydswh') format('truetype'),
url('/static/fonts/icomoon/fonts/icomoon.woff?5ydswh') format('woff'),
url('/static/fonts/icomoon/icomoon.svg?5ydswh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -36,3 +36,12 @@
.f-icon-triangle-down:before {
content: "\e903";
}
.f-icon-volume_down:before {
content: "\e906";
}
.f-icon-volume_up:before {
content: "\e905";
}
.f-icon-volume_off:before {
content: "\e904";
}

4
app/static/css/partials/_text.scss
View file

@ -62,6 +62,8 @@ em {
}
main > .texts {
max-width: var(--container-width);
padding: var(--spacing-2);
box-sizing: border-box;
a {
@ -70,7 +72,7 @@ main > .texts {
}
.text {
margin: var(--spacing);
margin: 0 0 var(--spacing-2) 0;
h1 {
font-weight: bold;
font-size: 20px;

3
app/static/fonts/icomoon/demo-files/demo.css
View file

@ -149,4 +149,7 @@ p {
.fs1 {
font-size: 20px;
}
.fs2 {
font-size: 24px;
}

47
app/static/fonts/icomoon/demo.html
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;4)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;7)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 20</h1>
@ -70,6 +70,51 @@
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_down"></span>
<span class="mls"> f-icon-volume_down</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e906" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe906;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_up"></span>
<span class="mls"> f-icon-volume_up</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e905" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe905;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_off"></span>
<span class="mls"> f-icon-volume_off</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e904" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe904;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
</div>
<!--[if gt IE 8]><!-->
<div class="mhl clearfix mbl">

3
app/static/fonts/icomoon/fonts/icomoon.svg
View file

@ -11,4 +11,7 @@
<glyph unicode="&#xe901;" glyph-name="triangle-right" d="M768 460.8l-460.8-256v512l460.8-256z" />
<glyph unicode="&#xe902;" glyph-name="triangle-left" d="M716.8 716.8v-512l-460.8 256 460.8 256z" />
<glyph unicode="&#xe903;" glyph-name="triangle-down" d="M256 665.6h512l-256-460.8-256 460.8z" />
<glyph unicode="&#xe904;" glyph-name="volume_off" d="M512 768.667v-180l-90 90zM182 810.667l714-714-54-54-88 88q-66-56-156-78v88q50 14 96 50l-182 182v-288l-214 214h-170v256h202l-202 202zM810 426.667q0 102-59 180t-153 106v88q130-28 214-133t84-241q0-94-44-178l-64 66q22 54 22 112zM704 426.667q0-18-2-26l-104 104v94q44-22 75-72t31-100z" />
<glyph unicode="&#xe905;" glyph-name="volume_up" d="M598 800.667q130-28 214-133t84-241-84-241-214-133v88q94 28 153 106t59 180-59 180-153 106v88zM704 426.667q0-120-106-172v344q44-22 75-72t31-100zM128 554.667h170l214 214v-684l-214 214h-170v256z" />
<glyph unicode="&#xe906;" glyph-name="volume_down" d="M214 554.667h170l214 214v-684l-214 214h-170v256zM790 426.667q0-118-108-172v344q44-22 76-73t32-99z" />
</font></defs></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
app/static/fonts/icomoon/fonts/icomoon.ttf
View file

Binary file not shown.

BIN
app/static/fonts/icomoon/fonts/icomoon.woff
View file

Binary file not shown.

2
app/static/fonts/icomoon/selection.json
View file

@ -1 +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}}
{"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},{"icon":{"paths":["M214 384h170l214-214v684l-214-214h-170v-256zM790 512q0 118-108 172v-344q44 22 76 73t32 99z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_down"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59654,"name":"volume_down"},"setIdx":9,"setId":7,"iconIdx":0},{"icon":{"paths":["M598 138q130 28 214 133t84 241-84 241-214 133v-88q94-28 153-106t59-180-59-180-153-106v-88zM704 512q0 120-106 172v-344q44 22 75 72t31 100zM128 384h170l214-214v684l-214-214h-170v-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_up"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59653,"name":"volume_up"},"setIdx":9,"setId":7,"iconIdx":1},{"icon":{"paths":["M512 170v180l-90-90zM182 128l714 714-54 54-88-88q-66 56-156 78v-88q50-14 96-50l-182-182v288l-214-214h-170v-256h202l-202-202zM810 512q0-102-59-180t-153-106v-88q130 28 214 133t84 241q0 94-44 178l-64-66q22-54 22-112zM704 512q0 18-2 26l-104-104v-94q44 22 75 72t31 100z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_off"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59652,"name":"volume_off"},"setIdx":9,"setId":7,"iconIdx":2}],"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}}

15
app/static/fonts/icomoon/style.css
View file

@ -1,9 +1,9 @@
@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');
url('fonts/icomoon.ttf?5ydswh') format('truetype'),
url('fonts/icomoon.woff?5ydswh') format('woff'),
url('fonts/icomoon.svg?5ydswh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -36,3 +36,12 @@
.f-icon-triangle-down:before {
content: "\e903";
}
.f-icon-volume_down:before {
content: "\e906";
}
.f-icon-volume_up:before {
content: "\e905";
}
.f-icon-volume_off:before {
content: "\e904";
}

6
app/static/js/ascroll.js Normal file → Executable file
View file

@ -170,11 +170,11 @@ function showOverlay(event) {
overlay.style.display = 'flex'
overlay.style.alignItems = 'center'
overlay.style.justifyContent = 'center'
overlay.style.fontSize = '45px'
//overlay.style.fontSize = '45px'
video.controls = false
var off = `🔇`
var on = `🔊`
var off = `<span class="annotation-icon-wrapper animated"><span class="text f-icon-volume_off annotation-icon"></span>`
var on = `<span class="annotation-icon-wrapper"><span class="f-icon-volume_down annotation-icon"></span></span>`
if (video.muted) {
overlay.innerHTML = off

10
app/templates/about.html
View file

@ -23,7 +23,7 @@
<p>The artworks present in this exhibition, even as they maintain scepticism towards techno-fetishistic, development-philic, heteronormative, non-inclusive paradigms for the future, propelled in the interest of capital and by the anaemic premise inscribed by the idea of progress, they do not deny the possibility of reorienting civilizational creativity and resilience towards reconsiderations.</p>
<p>The online platform that hosts this exhibition conceptualized and drawn from <a href="https://pad.ma" class="font-family-wrong">pad.ma</a> proposes alternative ways of deepening the connectivity and democratic possibilities that can exist vis-à-vis the internet towards ethical digital infrastructures to engage intimately with art.</p>
<p>The online platform that hosts this exhibition conceptualized and drawn from <a href="https://pad.ma" class="font-family-wrong">Pad.ma</a> proposes alternative ways of deepening the connectivity and democratic possibilities that can exist vis-à-vis the internet towards ethical digital infrastructures to engage intimately with art.</p>
</div>
</div>
<div class="col col--about">
@ -38,8 +38,8 @@
<p>錄像計畫「未至之城：回望未來」由安努舒卡．拉堅德蘭策展，該計劃想像各種被主流勢力所阻擋、威脅的未來景觀，而許多的「未來」在當前世界裡已出現蛛絲馬跡。展覽中一系列的動態影像以「未來過去式」探索各種議題，深掘當代時間感知的循環特性，以及時間間隙當中的潛在可能。</p>
<p>雖然展覽中的作品對於科技迷戀、發展導向、異性戀觀點、對未來的排他敘事、受資本驅動、進步導向的貧乏敘事提出質疑，藝術家仍然願意透過文明創造力與韌性，重新探索不同未來可能。</p>
<p>呈現此計畫的網路平台之發想與概念來自 pad.ma，該平台提倡以另類的方式，讓數位介面的藝術體驗更具有連結性也更民主。</p>
<p>呈現此計畫的網路平台之發想與概念來自 <a href="https://pad.ma" class="font-family-wrong">pad.ma</a>，該平台提倡以另類的方式，讓數位介面的藝術體驗更具有連結性也更民主。</p>
<p>呈現此計畫的網路平台之發想與概念來自 Pad.ma，該平台提倡以另類的方式，讓數位介面的藝術體驗更具有連結性也更民主。</p>
<p>呈現此計畫的網路平台之發想與概念來自 <a href="https://pad.ma" class="font-family-wrong">Pad.ma</a>，該平台提倡以另類的方式，讓數位介面的藝術體驗更具有連結性也更民主。</p>
</div>
</div>
</div>
@ -68,7 +68,7 @@
<div class="accordion-content">
<p><a href="https://pad.ma" class="font-family-wrong"><strong>Pad.ma</strong></a> is an artist-run online archive of densely text-annotated video material, primarily footage and not finished films contributed by filmmakers, artists and cultural workers. It was set up in 2008 as a collaboration between CAMP, 0x2620, the Alternative Law Forum and Majlis. Pad.ma (and her allied projects) remain at the forefront of radical and future-oriented thinking and engagement with both material and theory of digital archives.</p>
<p><a href="https://studio.camp"><strong>CAMP</strong></a> is a collaborative studio founded in Bombay in 2007. It has been producing fundamental new work in film and video, electronic media, and public art forms, in a practice characterised by a hand-dirtying, non-alienated relation to technology. From their home base in Mumbai, they co-host the online archives <a href="https://pad.ma" class="font-family-wrong">pad.ma</a> and <a href="https://indiancine.ma">indiancine.ma</a> and run a rooftop cinema for the past 14 years.</p>
<p><a href="https://studio.camp"><strong>CAMP</strong></a> is a collaborative studio founded in Bombay in 2007. It has been producing fundamental new work in film and video, electronic media, and public art forms, in a practice characterised by a hand-dirtying, non-alienated relation to technology. From their home base in Mumbai, they co-host the online archives <a href="https://pad.ma" class="font-family-wrong">Pad.ma</a> and <a href="https://indiancine.ma">indiancine.ma</a> and run a rooftop cinema for the past 14 years.</p>
<p>Founded in 2010 in Berlin, <a href="https://0x2620.org"><strong>0x2620</strong></a> is an artist-run agency for the advancement of the international exchange of information, and usually operates at the intersections of art, politics and technology. Its activities include extensive research on intellectual property and piracy, the development of open-source software tools and web applications, and the production of both technological and social infrastructure for the collaborative creation, maintenance and use of relatively large data sets.</p>
</div>
@ -124,7 +124,7 @@
</p>
<p><a href="https://studio.camp"><strong>CAMP</strong></a>為2007年成立於孟買的合作型工作室。其創作一向與技術維持近距親身的接觸，和不排斥不疏離的關係，並秉持此一精神與作法，不斷推出電影及錄像、電子媒體、公共藝術等類型的全新作品。他們以設址於孟買的總部為據點，執行線上資料庫​Pad.ma和​Indiancine.ma的聯合運作，其於14年前開辦的屋頂電影院至今依舊照常營運。</p>
<p><a href="https://studio.camp"><strong>CAMP</strong></a>為2007年成立於孟買的合作型工作室。其創作一向與技術維持近距親身的接觸，和不排斥不疏離的關係，並秉持此一精神與作法，不斷推出電影及錄像、電子媒體、公共藝術等類型的全新作品。他們以設址於孟買的總部為據點，執行線上資料庫Pad.ma和Indiancine.ma的聯合運作，其於14年前開辦的屋頂電影院至今依舊照常營運。</p>
<p><a href="https://0x2620.org"><strong>0x2620</strong></a> 2010年成立於柏林，是一個為促進國際資訊交流而建立的藝術家營運機構，擅長處理藝術、政治、技術之間所產生的交集與碰撞塊。活動包括在智慧財產與盜版、開放源軟體工具及網路應用程式的開發、合作性創作、相對巨量數據集的維護及使用等多方面的研究。</p>
</div>

0
app/templates/text.html Normal file → Executable file
View file